You can use custom HTML and CSS to create markers with high visual impact,
that can feature interactivity and animation. All Marker3DElement
instances
are added to the DOM as HTML elements, which you can access using the Marker3DElement
property, and manipulate in the same way as any other DOM
element.
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 ; }
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>
