See the complete example source code
This example shows how to customize markers in the following ways: add title text, scale the marker, change the background color, change the border color, change the glyph color, hide the glyph.
TypeScript
const parser = new DOMParser (); async function initMap () { // Request needed libraries. const { Map } = await google . maps . importLibrary ( "maps" ) as google . maps . MapsLibrary ; const { AdvancedMarkerElement , PinElement } = await google . maps . importLibrary ( "marker" ) as google . maps . MarkerLibrary ; const map = new Map ( document . getElementById ( 'map' ) as HTMLElement , { center : { lat : 37.419 , lng : - 122.02 }, zoom : 14 , mapId : '4504f8b37365c3d0' , }); // Each PinElement is paired with a MarkerView to demonstrate setting each parameter. // Default marker with title text (no PinElement). const markerViewWithText = new AdvancedMarkerElement ({ map , position : { lat : 37.419 , lng : - 122.03 }, title : 'Title text for the marker at lat: 37.419, lng: -122.03' , }); // Adjust the scale. const pinScaled = new PinElement ({ scale : 1.5 , }); const markerViewScaled = new AdvancedMarkerElement ({ map , position : { lat : 37.419 , lng : - 122.02 }, content : pinScaled.element , }); // Change the background color. const pinBackground = new PinElement ({ background : '#FBBC04' , }); const markerViewBackground = new AdvancedMarkerElement ({ map , position : { lat : 37.419 , lng : - 122.01 }, content : pinBackground.element , }); // Change the border color. const pinBorder = new PinElement ({ borderColor : '#137333' , }); const markerViewBorder = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.035 }, content : pinBorder.element , }); // Change the glyph color. const pinGlyph = new PinElement ({ glyphColor : 'white' , }); const markerViewGlyph = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.025 }, content : pinGlyph.element , }); const pinTextGlyph = new PinElement ({ glyph : 'T' , glyphColor : 'white' , }); const markerViewGlyphText = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.015 }, content : pinTextGlyph.element , }); // Hide the glyph. const pinNoGlyph = new PinElement ({ glyph : '' , }); const markerViewNoGlyph = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.005 }, content : pinNoGlyph.element , }); } initMap ();
JavaScript
const parser = new DOMParser (); async function initMap () { // Request needed libraries. const { Map } = await google . maps . importLibrary ( "maps" ); const { AdvancedMarkerElement , PinElement } = await google . maps . importLibrary ( "marker" ); const map = new Map ( document . getElementById ( 'map' ), { center : { lat : 37.419 , lng : - 122.02 }, zoom : 14 , mapId : '4504f8b37365c3d0' , }); // Each PinElement is paired with a MarkerView to demonstrate setting each parameter. // Default marker with title text (no PinElement). const markerViewWithText = new AdvancedMarkerElement ({ map , position : { lat : 37.419 , lng : - 122.03 }, title : 'Title text for the marker at lat: 37.419, lng: -122.03' , }); // Adjust the scale. const pinScaled = new PinElement ({ scale : 1.5 , }); const markerViewScaled = new AdvancedMarkerElement ({ map , position : { lat : 37.419 , lng : - 122.02 }, content : pinScaled . element , }); // Change the background color. const pinBackground = new PinElement ({ background : '#FBBC04' , }); const markerViewBackground = new AdvancedMarkerElement ({ map , position : { lat : 37.419 , lng : - 122.01 }, content : pinBackground . element , }); // Change the border color. const pinBorder = new PinElement ({ borderColor : '#137333' , }); const markerViewBorder = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.035 }, content : pinBorder . element , }); // Change the glyph color. const pinGlyph = new PinElement ({ glyphColor : 'white' , }); const markerViewGlyph = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.025 }, content : pinGlyph . element , }); const pinTextGlyph = new PinElement ({ glyph : 'T' , glyphColor : 'white' , }); const markerViewGlyphText = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.015 }, content : pinTextGlyph . element , }); // Hide the glyph. const pinNoGlyph = new PinElement ({ glyph : '' , }); const markerViewNoGlyph = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.005 }, content : pinNoGlyph . element , }); } initMap ();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ # map { height : 100 % ; } /* * Optional: Makes the sample page fill the window. */ html , body { height : 100 % ; margin : 0 ; padding : 0 ; }
HTML
<html> <head> <title>Advanced Marker Basic Customization</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script> </body> </html>
Try Sample
This page shows you how to customize markers in the following ways:
- Add title text
- Scale the marker
- Change the background color
- Change the border color
- Change the glyph color
- Use text in a glyph
- Hide the glyph
Advanced markers uses two classes to define markers: the AdvancedMarkerElement
class provides the basic parameters ( position
, title
, and map
), and the PinElement
class contains options for further
customization.
In order to add markers to a map, you must first load the marker
library
which provides the AdvancedMarkerElement
and PinElement
classes.
The following snippet shows code to create a new PinElement
, then apply it to
a marker.
// Create a pin element.
const
pin
=
new
PinElement
({
scale
:
1.5
,
});
// Create a marker and apply the element.
const
marker
=
new
AdvancedMarkerElement
({
map
,
position
:
{
lat
:
37.419
,
lng
:
-
122.02
},
content
:
pin
.
element
,
});
In maps created using custom HTML elements, the basic parameters for a
marker are declared using the gmp-advanced-marker
HTML element; any
customization that uses the PinElement
class must be applied
programmatically. To do this, your code must retrieve the gmp-advanced-marker
elements from the HTML page. The following snippet shows code to query for a
collection of gmp-advanced-marker
elements, then iterate through the results
to apply customization that was declared in the PinElement
.
// Return an array of markers.
const
advancedMarkers
=
[...
document
.
querySelectorAll
(
'gmp-advanced-marker'
)];
// Loop through the markers
for
(
let
i
=
0
;
i
<
advancedMarkers
.
length
;
i
++
)
{
const
pin
=
new
PinElement
({
scale
:
2.0
,
});
marker
.
appendChild
(
pin
.
element
);
}
Add title text
Title text appears when the cursor hovers over a marker. Title text is readable by screen readers.
To add title text programmatically, use the AdvancedMarkerElement.title
option:
// Default marker with title text (no PinElement). const markerViewWithText = new AdvancedMarkerElement ({ map , position : { lat : 37.419 , lng : - 122.03 }, title : 'Title text for the marker at lat: 37.419, lng: -122.03' , });
To add title text to a marker created using custom HTML elements, use
the title
attribute:
<gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map>
Scale the marker
To scale a marker, use the scale
option.
TypeScript
// Adjust the scale. const pinScaled = new PinElement ({ scale : 1.5 , }); const markerViewScaled = new AdvancedMarkerElement ({ map , position : { lat : 37.419 , lng : - 122.02 }, content : pinScaled.element , });
JavaScript
// Adjust the scale. const pinScaled = new PinElement ({ scale : 1.5 , }); const markerViewScaled = new AdvancedMarkerElement ({ map , position : { lat : 37.419 , lng : - 122.02 }, content : pinScaled . element , });
Change the background color
Use the PinElement.background
option to change the background color of a marker:
TypeScript
// Change the background color. const pinBackground = new PinElement ({ background : '#FBBC04' , }); const markerViewBackground = new AdvancedMarkerElement ({ map , position : { lat : 37.419 , lng : - 122.01 }, content : pinBackground.element , });
JavaScript
// Change the background color. const pinBackground = new PinElement ({ background : '#FBBC04' , }); const markerViewBackground = new AdvancedMarkerElement ({ map , position : { lat : 37.419 , lng : - 122.01 }, content : pinBackground . element , });
Change the border color
Use the PinElement.borderColor
option to change the border color of a
marker:
TypeScript
// Change the border color. const pinBorder = new PinElement ({ borderColor : '#137333' , }); const markerViewBorder = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.035 }, content : pinBorder.element , });
JavaScript
// Change the border color. const pinBorder = new PinElement ({ borderColor : '#137333' , }); const markerViewBorder = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.035 }, content : pinBorder . element , });
Change the glyph color
Use the PinElement.glyphColor
option to change the glyph color of a marker:
TypeScript
// Change the glyph color. const pinGlyph = new PinElement ({ glyphColor : 'white' , }); const markerViewGlyph = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.025 }, content : pinGlyph.element , });
JavaScript
// Change the glyph color. const pinGlyph = new PinElement ({ glyphColor : 'white' , }); const markerViewGlyph = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.025 }, content : pinGlyph . element , });
Add text to a glyph
Use the PinElement.glyph
option to replace the default glyph with a text
character. The text glyph of the PinElement
scales with the PinElement
and
its default color matches the default glyphColor
of the PinElement
.
TypeScript
const pinTextGlyph = new PinElement ({ glyph : 'T' , glyphColor : 'white' , }); const markerViewGlyphText = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.015 }, content : pinTextGlyph.element , });
JavaScript
const pinTextGlyph = new PinElement ({ glyph : 'T' , glyphColor : 'white' , }); const markerViewGlyphText = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.015 }, content : pinTextGlyph . element , });
Hide the glyph
Set the PinElement.glyph
option to an empty string to hide a marker's glyph:
TypeScript
// Hide the glyph. const pinNoGlyph = new PinElement ({ glyph : '' , }); const markerViewNoGlyph = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.005 }, content : pinNoGlyph.element , });
JavaScript
// Hide the glyph. const pinNoGlyph = new PinElement ({ glyph : '' , }); const markerViewNoGlyph = new AdvancedMarkerElement ({ map , position : { lat : 37.415 , lng : - 122.005 }, content : pinNoGlyph . element , });
Alternatively, set PinElement.glyphColor
to the same value as PinElement.background
.
This has the effect of visually hiding the glyph.
