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.
Custom HTML markers offer lower performance than standard 3D markers. For applications with large datasets, standard markers are strongly encouraged to ensure optimal performance.
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" /> </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> <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=beta&libraries=maps3d"></script> </body> </html>
Try Sample
Simple HTML marker
The following sample shows how to create a basic, custom marker:
< html
>
< head
>
< title>3D
Map
-
Declarative
< /
title
>
< style
>
html
,
body
{
height
:
100
%
;
margin
:
0
;
padding
:
0
;
}
gmp
-
map
-
3
d
{
height
:
100
%
;
}
< /
style
>
< /head
>
< body
>
< gmp
-
map
-
3
d
center
=
"37.4239163, -122.0947209, 0"
tilt
=
"67.5"
range
=
"1000"
mode
=
"hybrid"
>
< gmp
-
marker
-
3
d
position
=
"37.4239163, -122.0947209,50"
altitude
-
mode
=
"absolute"
extruded
=
"true"
label
=
"Basic Marker"
>< /
gmp
-
marker
-
3
d
>
< /
gmp
-
map
-
3
d
>
< script
async
src
=
"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=beta&libraries=maps3d"
>< /
script
>
< /body
>
< /html
>
Interactive marker
This example shows creating an interactive marker using HTML.
< html
>
< head
>
< title>Pure
HTML
Interactive
Marker
Demo
< /
title
>
< style
>
html
,
body
{
height
:
100
%
;
margin
:
0
;
padding
:
0
;
}
gmp
-
map
-
3
d
{
height
:
400
px
;
width
:
800
px
;
}
< /
style
>
< /
head
>
< body
>
< gmp
-
map
-
3
d
center
=
"37.819852,-122.478549"
tilt
=
"75"
range
=
"2000"
heading
=
"330"
mode
=
"hybrid"
>
< gmp
-
marker
-
3
d
-
interactive
position
=
"37.819852,-122.478549,100"
>< /
gmp
-
marker
-
3
d
-
interactive
>
< /
gmp
-
map
-
3
d
>
< script
async
src
=
"https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=alpha&libraries=maps3d"
>
< /
script
>
< /
body
>
< /html
>
