`
`Customizing a Google Map: Custom Markers | Maps JavaScript API | Google Developers
`
`Customizing a Google Map: Custom
`Markers
`
`Select platform:
`
` Android (/maps/documentation/android-sdk/marker)
`
`iOS (/maps/documentation/ios-sdk/marker)
`
`JavaScript (/maps/documentation/javascript/custom-markers)
`
`Overview
`
`This tutorial teaches you how to change the icon (#icon) of a Google maps marker. It is
`bene cial to know the basics of creating markers (/maps/documentation/javascript/markers) when
`using this tutorial.
`
`Note: You can use standard and custom marker icons from the Google Earth/Maps Icons collection
` (http://kml4earth.appspot.com/icons.html).
`
`The following map is an example of a map that uses customized markers.
`
`https://developers.google.com/maps/documentation/javascript/custom-markers#try-sample
`
`1/6
`
`MemoryWeb Ex. 2016
`Apple v. MemoryWeb – IPR2022-00031
`
`
`
`2/17/22, 11:01 PM
`
`Customizing a Google Map: Custom Markers | Maps JavaScript API | Google Developers
`
`The section below lists all of the code that you need to create the map in this tutorial.
`
`Map data ©2022
`
`JavaScript (#javascript)CSS (#css)HTML (#html)
`TypeScript
` (#typescript)
`
`https://developers.google.com/maps/documentation/javascript/custom-markers#try-sample
`
`2/6
`
`MemoryWeb Ex. 2016
`Apple v. MemoryWeb – IPR2022-00031
`
`let map: google.maps.Map;
`function initMap(): void {
` map = new google.maps.Map(document.getElementById("map") as HTMLElement,
` center: new google.maps.LatLng(-33.91722, 151.23064),
` zoom: 16,
`});
`const iconBase =
`"https://developers.google.com/maps/documentation/javascript/examples/f
`const icons: Record<string, { icon: string }> = {
` parking: {
` icon: iconBase + "parking_lot_maps.png",
`},
` library: {
` icon: iconBase + "library_maps.png",
`},
` info: {
`
`
`2/17/22, 11:01 PM
`
`Customizing a Google Map: Custom Markers | Maps JavaScript API | Google Developers
`
`https://developers.google.com/maps/documentation/javascript/custom-markers#try-sample
`
`3/6
`
`MemoryWeb Ex. 2016
`Apple v. MemoryWeb – IPR2022-00031
`
` icon: iconBase + "info-i_maps.png",
`},
`};
`const features = [
`{
` position: new google.maps.LatLng(-33.91721, 151.2263),
` type: "info",
`},
`{
` position: new google.maps.LatLng(-33.91539, 151.2282),
` type: "info",
`},
`{
` position: new google.maps.LatLng(-33.91747, 151.22912),
` type: "info",
`},
`{
` position: new google.maps.LatLng(-33.9191, 151.22907),
` type: "info",
`},
`{
` position: new google.maps.LatLng(-33.91725, 151.23011),
` type: "info",
`},
`{
` position: new google.maps.LatLng(-33.91872, 151.23089),
` type: "info",
`},
`{
` position: new google.maps.LatLng(-33.91784, 151.23094),
` type: "info",
`},
`{
` position: new google.maps.LatLng(-33.91682, 151.23149),
` type: "info",
`},
`{
` position: new google.maps.LatLng(-33.9179, 151.23463),
` type: "info",
`},
`{
` position: new google.maps.LatLng(-33.91666, 151.23468),
` type: "info",
`},
`
`
`2/17/22, 11:01 PM
`
`Customizing a Google Map: Custom Markers | Maps JavaScript API | Google Developers
`
`https://developers.google.com/maps/documentation/javascript/custom-markers#try-sample
`
`4/6
`
`MemoryWeb Ex. 2016
`Apple v. MemoryWeb – IPR2022-00031
`
`{
` position: new google.maps.LatLng(-33.916988, 151.23364),
` type: "info",
`},
`{
` position: new google.maps.LatLng(-33.91662347903106, 151.228794640197
` type: "parking",
`},
`{
` position: new google.maps.LatLng(-33.916365282092855, 151.22937399734
` type: "parking",
`},
`{
` position: new google.maps.LatLng(-33.91665018901448, 151.228247469558
` type: "parking",
`},
`{
` position: new google.maps.LatLng(-33.919543720969806, 151.23112279762
` type: "parking",
`},
`{
` position: new google.maps.LatLng(-33.91608037421864, 151.232882326736
` type: "parking",
`},
`{
` position: new google.maps.LatLng(-33.91851096391805, 151.234405821456
` type: "parking",
`},
`{
` position: new google.maps.LatLng(-33.91818154739766, 151.234620398178
` type: "parking",
`},
`{
` position: new google.maps.LatLng(-33.91727341958453, 151.233483141555
` type: "library",
`},
`];
`// Create markers.
`for (let i = 0; i < features.length; i++) {
`const marker = new google.maps.Marker({
` position: features[i].position,
` icon: icons[features[i].type].icon,
` map: map,
`});
`
`
`2/17/22, 11:01 PM
`
`Customizing a Google Map: Custom Markers | Maps JavaScript API | Google Developers
`
`}933c4b043d4fbabcedf916b9046037e652c06b9c/samples/custom-markers/src/index.ts#L18-L128)
`
` Note: Read the guide (/maps/documentation/javascript/using-typescript) on using TypeScript and
`Google Maps.
`
`Try Sample
`
`JSFiddle (#) CodeSandbox.io (https://codesandbox.io/embed/github/googlemaps/js-samples/tree/samp
`
`Customizing a map marker
`
`The image below displays a Google maps marker with the default red icon.
`
`You can change this icon to an image of your choice. The table below explains the code that
`customizes the default marker to use an icon for parking lots.
`
`Code and description
`
` property to the
`Adds the
`to change the marker’s icon.
`The
` property can be either a string (the URL to
`the marker icon), or an
` object.
`See the customized marker icon below.
`
` object,
`
`https://developers.google.com/maps/documentation/javascript/custom-markers#try-sample
`
`5/6
`
`MemoryWeb Ex. 2016
`Apple v. MemoryWeb – IPR2022-00031
`
`icon
`MarkerOptions
`icon
`Icon
`}
`var iconBase = 'https://maps.google.com
`';
`var marker = new google.maps.Marker(
`{
` position: myLatLng,
` map: map,
` icon: iconBase + 'parking_lot_maps.
`png'
`});
`
`
`2/17/22, 11:01 PM
`
`Customizing a Google Map: Custom Markers | Maps JavaScript API | Google Developers
`
`Customizing markers by map features
`
` attribute. Notice how the code
`Each point of interest in the list of campus features has a
`extract below speci es the
`,
` and
` types. You can customize the marker
`icon depending on the map feature
` you set it to.
`
`More information
`
`The image on a marker is called its 'icon'.
`
`A marker is also known as a 'pin'.
`
`Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License
` (https://creativecommons.org/licenses/by/4.0/), and code samples are licensed under the Apache 2.0 License
` (https://www.apache.org/licenses/LICENSE-2.0). For details, see the Google Developers Site Policies
` (https://developers.google.com/site-policies). Java is a registered trademark of Oracle and/or its a liates.
`
`Last updated 2022-02-17 UTC.
`
`https://developers.google.com/maps/documentation/javascript/custom-markers#try-sample
`
`6/6
`
`MemoryWeb Ex. 2016
`Apple v. MemoryWeb – IPR2022-00031
`
`type
`parking
`library
`info
`type
`var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
`var icons = {
` parking: {
` icon: iconBase + 'parking_lot_maps.png'
`},
` library: {
` icon: iconBase + 'library_maps.png'
`},
` info: {
` icon: iconBase + 'info-i_maps.png'
`}
`};
`function addMarker(feature) {
`var marker = new google.maps.Marker({
` position: feature.position,
` icon: icons[feature.type].icon,
` map: map
`});
`}
`