Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Basic marker customization

  • This guide demonstrates how to customize advanced markers on Google Maps using theAdvancedMarkerElement andPinElement classes.

  • You can customize markers by adding title text, scaling, changing background and border colors, and modifying the glyph (including color, text, and visibility).

  • TheAdvancedMarkerElement defines basic marker properties, while thePinElement provides advanced styling options.

  • Code examples are provided in TypeScript and JavaScript to illustrate marker customization techniques.

  • This guide is platform-specific and offers resources for Android, iOS, and JavaScript development.

Select platform:AndroidiOSJavaScript

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

constparser=newDOMParser();constmapElement=document.querySelector('gmp-map')asgoogle.maps.MapElement;asyncfunctioninitMap(){// Request needed libraries.const{Map}=awaitgoogle.maps.importLibrary("maps")asgoogle.maps.MapsLibrary;const{AdvancedMarkerElement,PinElement}=awaitgoogle.maps.importLibrary("marker")asgoogle.maps.MarkerLibrary;// Each PinElement is paired with a marker to demonstrate setting each parameter.// Default marker with title text (no PinElement).constmarkerWithText=newAdvancedMarkerElement({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.constpinScaled=newPinElement({scale:1.5,});constmarkerScaled=newAdvancedMarkerElement({position:{lat:37.419,lng:-122.02},});markerScaled.append(pinScaled);mapElement.append(markerScaled);// Change the background color.constpinBackground=newPinElement({background:'#FBBC04',});constmarkerBackground=newAdvancedMarkerElement({position:{lat:37.419,lng:-122.01},});markerBackground.append(pinBackground);mapElement.append(markerBackground);// Change the border color.constpinBorder=newPinElement({borderColor:'#137333',});constmarkerBorder=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.035},});markerBorder.append(pinBorder);mapElement.append(markerBorder);// Change the glyph color.constpinGlyph=newPinElement({glyphColor:'white',});constmarkerGlyph=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.025},});markerGlyph.append(pinGlyph);mapElement.append(markerGlyph);constpinTextGlyph=newPinElement({//@ts-ignoreglyphText:'T',glyphColor:'white',});constmarkerGlyphText=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.015},});markerGlyphText.append(pinTextGlyph);mapElement.append(markerGlyphText);// Hide the glyph.constpinNoGlyph=newPinElement({//@ts-ignoreglyphText:'',});constmarkerNoGlyph=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.005},});markerNoGlyph.append(pinNoGlyph);mapElement.append(markerNoGlyph);}initMap();
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

constparser=newDOMParser();constmapElement=document.querySelector('gmp-map');asyncfunctioninitMap(){// Request needed libraries.const{Map}=awaitgoogle.maps.importLibrary("maps");const{AdvancedMarkerElement,PinElement}=awaitgoogle.maps.importLibrary("marker");// Each PinElement is paired with a marker to demonstrate setting each parameter.// Default marker with title text (no PinElement).constmarkerWithText=newAdvancedMarkerElement({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.constpinScaled=newPinElement({scale:1.5,});constmarkerScaled=newAdvancedMarkerElement({position:{lat:37.419,lng:-122.02},});markerScaled.append(pinScaled);mapElement.append(markerScaled);// Change the background color.constpinBackground=newPinElement({background:'#FBBC04',});constmarkerBackground=newAdvancedMarkerElement({position:{lat:37.419,lng:-122.01},});markerBackground.append(pinBackground);mapElement.append(markerBackground);// Change the border color.constpinBorder=newPinElement({borderColor:'#137333',});constmarkerBorder=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.035},});markerBorder.append(pinBorder);mapElement.append(markerBorder);// Change the glyph color.constpinGlyph=newPinElement({glyphColor:'white',});constmarkerGlyph=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.025},});markerGlyph.append(pinGlyph);mapElement.append(markerGlyph);constpinTextGlyph=newPinElement({//@ts-ignoreglyphText:'T',glyphColor:'white',});constmarkerGlyphText=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.015},});markerGlyphText.append(pinTextGlyph);mapElement.append(markerGlyphText);// Hide the glyph.constpinNoGlyph=newPinElement({//@ts-ignoreglyphText:'',});constmarkerNoGlyph=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.005},});markerNoGlyph.append(pinNoGlyph);mapElement.append(markerNoGlyph);}initMap();
Note: The JavaScript is compiled from the TypeScript snippet.

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;}

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>

Try Sample

This page shows you how to customize markers in the following ways:

The parts of an Advanced Marker.
Figure 1: The parts of an Advanced Marker.

Advanced markers uses two classes to define markers: theAdvancedMarkerElement class provides the basic parameters (position,title, andmap), and thePinElement class contains options for furthercustomization.

In order to add markers to a map, you must firstload themarker librarywhich provides theAdvancedMarkerElementandPinElementclasses.

The following snippet shows code to create a newPinElement, then apply it toa marker.

// Create a pin element.constmyPin=newPinElement({scale:1.5,});// Create a marker.constmyMarker=newAdvancedMarkerElement({position:{lat:37.4239163,lng:-122.0947209},});// Append the pin to the marker.myMarker.append(myPin);// Append the marker to the map.mapElement.append(myMarker);

In maps created using custom HTML elements, the basic parameters for amarker are declared using thegmp-advanced-marker HTML element; anycustomization that uses thePinElement class must be appliedprogrammatically. To do this, your code must retrieve thegmp-advanced-markerelements from the HTML page. The following snippet shows code to query for acollection ofgmp-advanced-marker elements, then iterate through the resultsto apply customization that was declared in thePinElement.

// Return an array of markers.constadvancedMarkers=[...document.querySelectorAll('gmp-advanced-marker')];// Loop through the markersfor(leti=0;i <advancedMarkers.length;i++){constpin=newPinElement({scale:2.0,});marker.append(pin);}

Add title text

Title text appears when the cursor hovers over a marker. Title text is readableby screen readers.

To add title text programmatically, use theAdvancedMarkerElement.titleoption:

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

To add title text to a marker created using custom HTML elements, usethetitle attribute:

<gmp-map  center="43.4142989,-124.2301242"  zoom="4"  map-id="DEMO_MAP_ID" >  <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 thescale option.

TypeScript

// Adjust the scale.constpinScaled=newPinElement({scale:1.5,});constmarkerScaled=newAdvancedMarkerElement({position:{lat:37.419,lng:-122.02},});markerScaled.append(pinScaled);mapElement.append(markerScaled);
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

// Adjust the scale.constpinScaled=newPinElement({scale:1.5,});constmarkerScaled=newAdvancedMarkerElement({position:{lat:37.419,lng:-122.02},});markerScaled.append(pinScaled);mapElement.append(markerScaled);

Change the background color

Use thePinElement.background option to change the background color of a marker:

TypeScript

// Change the background color.constpinBackground=newPinElement({background:'#FBBC04',});constmarkerBackground=newAdvancedMarkerElement({position:{lat:37.419,lng:-122.01},});markerBackground.append(pinBackground);mapElement.append(markerBackground);
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

// Change the background color.constpinBackground=newPinElement({background:'#FBBC04',});constmarkerBackground=newAdvancedMarkerElement({position:{lat:37.419,lng:-122.01},});markerBackground.append(pinBackground);mapElement.append(markerBackground);

Change the border color

Use thePinElement.borderColor option to change the border color of a marker:

TypeScript

// Change the border color.constpinBorder=newPinElement({borderColor:'#137333',});constmarkerBorder=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.035},});markerBorder.append(pinBorder);mapElement.append(markerBorder);
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

// Change the border color.constpinBorder=newPinElement({borderColor:'#137333',});constmarkerBorder=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.035},});markerBorder.append(pinBorder);mapElement.append(markerBorder);

Change the glyph color

Use thePinElement.glyphColor option to change the glyph color of a marker:

TypeScript

// Change the glyph color.constpinGlyph=newPinElement({glyphColor:'white',});constmarkerGlyph=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.025},});markerGlyph.append(pinGlyph);mapElement.append(markerGlyph);
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

// Change the glyph color.constpinGlyph=newPinElement({glyphColor:'white',});constmarkerGlyph=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.025},});markerGlyph.append(pinGlyph);mapElement.append(markerGlyph);

Use text in a glyph

Use thePinElement.glyphText option to replace the default glyph with a textcharacter. The text glyph of thePinElement scales with thePinElement andits default color matches the defaultglyphColor of thePinElement.

TypeScript

constpinTextGlyph=newPinElement({//@ts-ignoreglyphText:'T',glyphColor:'white',});constmarkerGlyphText=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.015},});markerGlyphText.append(pinTextGlyph);mapElement.append(markerGlyphText);
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

constpinTextGlyph=newPinElement({//@ts-ignoreglyphText:'T',glyphColor:'white',});constmarkerGlyphText=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.015},});markerGlyphText.append(pinTextGlyph);mapElement.append(markerGlyphText);

Hide the glyph

Set thePinElement.glyphText option to an empty string to hide a marker'sglyph:

TypeScript

// Hide the glyph.constpinNoGlyph=newPinElement({//@ts-ignoreglyphText:'',});constmarkerNoGlyph=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.005},});markerNoGlyph.append(pinNoGlyph);mapElement.append(markerNoGlyph);
Note: Read theguide on using TypeScript and Google Maps.

JavaScript

// Hide the glyph.constpinNoGlyph=newPinElement({//@ts-ignoreglyphText:'',});constmarkerNoGlyph=newAdvancedMarkerElement({position:{lat:37.415,lng:-122.005},});markerNoGlyph.append(pinNoGlyph);mapElement.append(markerNoGlyph);

Alternatively, setPinElement.glyphColor to the same value asPinElement.background. This has the effect of visually hiding the glyph.

Next steps:

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-11-21 UTC.