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.
Basic marker
This example map shows creating a basic custom marker declaratively.
< 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
>
