Customize advanced markers

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

Read the documentation.

TypeScript

const parser = new DOMParser();
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

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;

    // Each PinElement is paired with a marker to demonstrate setting each parameter.

    // Default marker with title text (no PinElement).
    const markerWithText = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.03 },
        title: 'Title text for the marker at lat: 37.419, lng: -122.03',
    });
    mapElement.append(markerWithText);

    // Adjust the scale.
    const pinScaled = new PinElement({
        scale: 1.5,
    });
    const markerScaled = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.02 },
    });
    markerScaled.append(pinScaled);
    mapElement.append(markerScaled);

    // Change the background color.
    const pinBackground = new PinElement({
        background: '#FBBC04',
    });
    const markerBackground = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.01 },
    });
    markerBackground.append(pinBackground);
    mapElement.append(markerBackground);

    // Change the border color.
    const pinBorder = new PinElement({
        borderColor: '#137333',
    });
    const markerBorder = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.035 },
    });
    markerBorder.append(pinBorder);
    mapElement.append(markerBorder);

    // Change the glyph color.
    const pinGlyph = new PinElement({
        glyphColor: 'white',
    });
    const markerGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.025 },
    });
    markerGlyph.append(pinGlyph);
    mapElement.append(markerGlyph);

    const pinTextGlyph = new PinElement({
        //@ts-ignore
        glyphText: 'T',
        glyphColor: 'white',
    });
    const markerGlyphText = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.015 },
    });
    markerGlyphText.append(pinTextGlyph);
    mapElement.append(markerGlyphText);

    // Hide the glyph.
    const pinNoGlyph = new PinElement({
        //@ts-ignore
        glyphText: '',
    });
    const markerNoGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.005 },
    });
    markerNoGlyph.append(pinNoGlyph);
    mapElement.append(markerNoGlyph);

}

initMap();
index.ts

JavaScript

const parser = new DOMParser();
const mapElement = document.querySelector('gmp-map');
async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
    // Each PinElement is paired with a marker to demonstrate setting each parameter.
    // Default marker with title text (no PinElement).
    const markerWithText = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.03 },
        title: 'Title text for the marker at lat: 37.419, lng: -122.03',
    });
    mapElement.append(markerWithText);
    // Adjust the scale.
    const pinScaled = new PinElement({
        scale: 1.5,
    });
    const markerScaled = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.02 },
    });
    markerScaled.append(pinScaled);
    mapElement.append(markerScaled);
    // Change the background color.
    const pinBackground = new PinElement({
        background: '#FBBC04',
    });
    const markerBackground = new AdvancedMarkerElement({
        position: { lat: 37.419, lng: -122.01 },
    });
    markerBackground.append(pinBackground);
    mapElement.append(markerBackground);
    // Change the border color.
    const pinBorder = new PinElement({
        borderColor: '#137333',
    });
    const markerBorder = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.035 },
    });
    markerBorder.append(pinBorder);
    mapElement.append(markerBorder);
    // Change the glyph color.
    const pinGlyph = new PinElement({
        glyphColor: 'white',
    });
    const markerGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.025 },
    });
    markerGlyph.append(pinGlyph);
    mapElement.append(markerGlyph);
    const pinTextGlyph = new PinElement({
        //@ts-ignore
        glyphText: 'T',
        glyphColor: 'white',
    });
    const markerGlyphText = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.015 },
    });
    markerGlyphText.append(pinTextGlyph);
    mapElement.append(markerGlyphText);
    // Hide the glyph.
    const pinNoGlyph = new PinElement({
        //@ts-ignore
        glyphText: '',
    });
    const markerNoGlyph = new AdvancedMarkerElement({
        position: { lat: 37.415, lng: -122.005 },
    });
    markerNoGlyph.append(pinNoGlyph);
    mapElement.append(markerNoGlyph);
}
initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

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>
    <!-- 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>
  </head>
  <body>
    <gmp-map center="37.419,-122.02" zoom="14" map-id="4504f8b37365c3d0"></gmp-map>
  </body>
</html>
index.html

Try Sample

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. 

  git clone https://github.com/googlemaps-samples/js-api-samples.git
  cd samples/advanced-markers-basic-style
  npm i
  npm start