Get a Maps Demo Key :Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Customize markers with HTML

The following example shows how to customize markers using HTML and CSS in 3D Maps in Maps JavaScript.

Read the documentation .

CSS

 @ 
 keyframes 
  
 marker-bounce 
  
 { 
  
 0 
 % 
  
 { 
  
 transform 
 : 
  
 translateY 
 ( 
 0 
 ); 
  
 } 
  
 30 
 % 
  
 { 
  
 transform 
 : 
  
 translateY 
 ( 
 -12 
 px 
 ); 
  
 } 
  
 55 
 % 
  
 { 
  
 transform 
 : 
  
 translateY 
 ( 
 -5 
 px 
 ); 
  
 } 
  
 75 
 % 
  
 { 
  
 transform 
 : 
  
 translateY 
 ( 
 -10 
 px 
 ); 
  
 } 
  
 100 
 % 
  
 { 
  
 transform 
 : 
  
 translateY 
 ( 
 -8 
 px 
 ); 
  
 } 
 } 
 html 
 , 
 gmp-map-3d 
  
 { 
  
 height 
 : 
  
 100 
 % 
 ; 
 } 
 html 
 , 
 body 
  
 { 
  
 height 
 : 
  
 100 
 % 
 ; 
  
 margin 
 : 
  
 0 
 ; 
  
 padding 
 : 
  
 0 
 ; 
 } 
 : 
 root 
  
 { 
  
 --google-blue 
 : 
  
 #1a73e8 
 ; 
  
 --google-gray 
 : 
  
 #3c4043 
 ; 
  
 --google-silver 
 : 
  
 #dadce0 
 ; 
  
 --google-white 
 : 
  
 #ffffff 
 ; 
 } 
 . 
 custom-marker 
  
 { 
  
 display 
 : 
  
 inline-flex 
 ; 
  
 align-items 
 : 
  
 center 
 ; 
  
 justify-content 
 : 
  
 center 
 ; 
  
 padding 
 : 
  
 8 
 px 
  
 16 
 px 
 ; 
  
 background-color 
 : 
  
 var 
 ( 
 --google-white 
 ); 
  
 color 
 : 
  
 var 
 ( 
 --google-blue 
 ); 
  
 border 
 : 
  
 1 
 px 
  
 solid 
  
 var 
 ( 
 --google-silver 
 ); 
  
 border-radius 
 : 
  
 20 
 px 
 ; 
  
 font-family 
 : 
  
 'Google Sans' 
 , 
  
 'Roboto' 
 , 
  
 Arial 
 , 
  
 sans-serif 
 ; 
  
 font-size 
 : 
  
 14 
 px 
 ; 
  
 font-weight 
 : 
  
 600 
 ; 
  
 box-shadow 
 : 
  
 0 
  
 4 
 px 
  
 6 
 px 
  
 rgba 
 ( 
 60 
 , 
  
 64 
 , 
  
 67 
 , 
  
 0.1 
 ), 
  
 0 
  
 1 
 px 
  
 3 
 px 
  
 rgba 
 ( 
 60 
 , 
  
 64 
 , 
  
 67 
 , 
  
 0.2 
 ); 
  
 white-space 
 : 
  
 nowrap 
 ; 
  
 position 
 : 
  
 relative 
 ; 
  
 cursor 
 : 
  
 default 
 ; 
  
 transition 
 : 
  
 background-color 
  
 0.3 
 s 
  
 ease-in-out 
 , 
  
 box-shadow 
  
 0.3 
 s 
  
 ease-in-out 
 ; 
  
 user-select 
 : 
  
 none 
 ; 
 } 
 . 
 custom-marker 
 : 
 hover 
  
 { 
  
 background-color 
 : 
  
 #f8f9fa 
 ; 
  
 box-shadow 
 : 
  
 0 
  
 8 
 px 
  
 16 
 px 
  
 rgba 
 ( 
 60 
 , 
  
 64 
 , 
  
 67 
 , 
  
 0.2 
 ), 
  
 0 
  
 2 
 px 
  
 4 
 px 
  
 rgba 
 ( 
 60 
 , 
  
 64 
 , 
  
 67 
 , 
  
 0.25 
 ); 
  
 animation 
 : 
  
 marker 
 - 
 bounce 
  
 0.5 
 s 
  
 ease-out 
  
 forwards 
 ; 
 } 
 . 
 custom-marker 
 :: 
 after 
  
 { 
  
 content 
 : 
  
 '' 
 ; 
  
 position 
 : 
  
 absolute 
 ; 
  
 top 
 : 
  
 100 
 % 
 ; 
  
 left 
 : 
  
 50 
 % 
 ; 
  
 transform 
 : 
  
 translateX 
 ( 
 -50 
 % 
 ); 
  
 width 
 : 
  
 0 
 ; 
  
 height 
 : 
  
 0 
 ; 
  
 border-left 
 : 
  
 8 
 px 
  
 solid 
  
 transparent 
 ; 
  
 border-right 
 : 
  
 8 
 px 
  
 solid 
  
 transparent 
 ; 
  
 border-top 
 : 
  
 8 
 px 
  
 solid 
  
 var 
 ( 
 --google-silver 
 ); 
  
 transition 
 : 
  
 border-top-color 
  
 0.2 
 s 
  
 ease-in-out 
 ; 
 } 
 . 
 custom-marker 
 :: 
 before 
  
 { 
  
 content 
 : 
  
 '' 
 ; 
  
 position 
 : 
  
 absolute 
 ; 
  
 top 
 : 
  
 99 
 % 
 ; 
  
 left 
 : 
  
 50 
 % 
 ; 
  
 transform 
 : 
  
 translateX 
 ( 
 -50 
 % 
 ); 
  
 width 
 : 
  
 0 
 ; 
  
 height 
 : 
  
 0 
 ; 
  
 border-left 
 : 
  
 7 
 px 
  
 solid 
  
 transparent 
 ; 
  
 border-right 
 : 
  
 7 
 px 
  
 solid 
  
 transparent 
 ; 
  
 border-top 
 : 
  
 7 
 px 
  
 solid 
  
 var 
 ( 
 --google-white 
 ); 
  
 z-index 
 : 
  
 1 
 ; 
  
 transition 
 : 
  
 border-top-color 
  
 0.2 
 s 
  
 ease-in-out 
 ; 
 } 
 . 
 custom-marker 
 : 
 hover 
 :: 
 after 
  
 { 
  
 border-top-color 
 : 
  
 #cacdd2 
 ; 
 } 
 . 
 custom-marker 
 : 
 hover 
 :: 
 before 
  
 { 
  
 border-top-color 
 : 
  
 #f8f9fa 
 ; 
 } 
   style 
 . 
 css

HTML

<html>
    <head>
        <title>3D Marker HTML</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d
            center="40.7489,-73.9680,0"
            heading="315"
            tilt="65"
            range="800"
            mode="SATELLITE">
            <gmp-marker position="40.7489,-73.9680" title="UN Headquarters">
                <div class="custom-marker">
                    United Nations Secretariat Building
                </div>
            </gmp-marker>
        </gmp-map-3d>
    </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 
 / 
 3 
 d 
 - 
 marker 
 - 
 html 
 
  
  npm 
  
 i 
 
  
  npm 
  
 start

Customize markers with HTML Stay organized with collections Save and categorize content based on your preferences.

CSS

HTML

Try Sample

Clone Sample

Customize markers with HTML