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

Create advanced markers using HTML and CSS

Page Summary

This example demonstrates how to create a custom HTML marker on a Google Map, replacing the default icon.
The marker is created using the AdvancedMarkerElement class and displays a price tag with custom styling.
Sample code is provided in both TypeScript and JavaScript, along with the corresponding HTML and CSS.
Users can experiment with the sample using JSFiddle or Google Cloud Shell, or clone and run it locally with Git and Node.js.

This example shows creating a new marker, replacing the default icon with custom HTML and CSS.

Read the documentation .

TypeScript

 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 
  
 } 
  
 = 
  
 ( 
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
  
 'marker' 
  
 )) 
  
 as 
  
 google 
 . 
 maps 
 . 
 MarkerLibrary 
 ; 
  
 const 
  
 priceTag 
  
 = 
  
 document 
 . 
 createElement 
 ( 
 'div' 
 ); 
  
 priceTag 
 . 
 className 
  
 = 
  
 'price-tag' 
 ; 
  
 priceTag 
 . 
 textContent 
  
 = 
  
 '$2.5M' 
 ; 
  
 const 
  
 marker 
  
 = 
  
 new 
  
 AdvancedMarkerElement 
 ({ 
  
 position 
 : 
  
 { 
  
 lat 
 : 
  
 37.42 
 , 
  
 lng 
 : 
  
 - 
 122.1 
  
 }, 
  
 }); 
  
 marker 
 . 
 append 
 ( 
 priceTag 
 ); 
  
 mapElement 
 . 
 append 
 ( 
 marker 
 ); 
 } 
 initMap 
 (); 
   index 
 . 
 ts

JavaScript

 const 
  
 mapElement 
  
 = 
  
 document 
 . 
 querySelector 
 ( 
 'gmp-map' 
 ); 
 async 
  
 function 
  
 initMap 
 () 
  
 { 
  
 // Request needed libraries. 
  
 const 
  
 { 
  
 Map 
  
 } 
  
 = 
  
 ( 
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'maps' 
 )); 
  
 const 
  
 { 
  
 AdvancedMarkerElement 
  
 } 
  
 = 
  
 ( 
 await 
  
 google 
 . 
 maps 
 . 
 importLibrary 
 ( 
 'marker' 
 )); 
  
 const 
  
 priceTag 
  
 = 
  
 document 
 . 
 createElement 
 ( 
 'div' 
 ); 
  
 priceTag 
 . 
 className 
  
 = 
  
 'price-tag' 
 ; 
  
 priceTag 
 . 
 textContent 
  
 = 
  
 '$2.5M' 
 ; 
  
 const 
  
 marker 
  
 = 
  
 new 
  
 AdvancedMarkerElement 
 ({ 
  
 position 
 : 
  
 { 
  
 lat 
 : 
  
 37.42 
 , 
  
 lng 
 : 
  
 - 
 122.1 
  
 }, 
  
 }); 
  
 marker 
 . 
 append 
 ( 
 priceTag 
 ); 
  
 mapElement 
 . 
 append 
 ( 
 marker 
 ); 
 } 
 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 
 ; 
 } 
 /* HTML marker styles */ 
 . 
 price-tag 
  
 { 
  
 background-color 
 : 
  
 #4285f4 
 ; 
  
 border-radius 
 : 
  
 8 
 px 
 ; 
  
 color 
 : 
  
 #ffffff 
 ; 
  
 font-size 
 : 
  
 14 
 px 
 ; 
  
 padding 
 : 
  
 10 
 px 
  
 15 
 px 
 ; 
  
 position 
 : 
  
 relative 
 ; 
  
 transform 
 : 
  
 translateY 
 ( 
 -8 
 px 
 ); 
 } 
 . 
 price-tag 
 :: 
 after 
  
 { 
  
 content 
 : 
  
 '' 
 ; 
  
 position 
 : 
  
 absolute 
 ; 
  
 left 
 : 
  
 50 
 % 
 ; 
  
 top 
 : 
  
 100 
 % 
 ; 
  
 transform 
 : 
  
 translate 
 ( 
 -50 
 % 
 , 
  
 0 
 ); 
  
 width 
 : 
  
 0 
 ; 
  
 height 
 : 
  
 0 
 ; 
  
 border-left 
 : 
  
 8 
 px 
  
 solid 
  
 transparent 
 ; 
  
 border-right 
 : 
  
 8 
 px 
  
 solid 
  
 transparent 
 ; 
  
 border-top 
 : 
  
 8 
 px 
  
 solid 
  
 #4285f4 
 ; 
 } 
   style 
 . 
 css

HTML

<html>
    <head>
        <title>Advanced Marker Simple HTML</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.42,-122.1"
            zoom="14"
            map-id="4504f8b37365c3d0"></gmp-map>
    </body>
</html>  index.html

Try Sample

JSFiddle.net

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 
 - 
 html 
 - 
 simple 
 
  
  npm 
  
 i 
 
  
  npm 
  
 start