Use markers to display single locations on a map. This page shows how to add a marker to a map programmatically, and by using HTML.
Add a marker using HTML
To add a 3D marker using HTML, add a gmp-marker-3d
child element to the gmp-map-3d
element. The following snippet shows adding markers to a web page:
<gmp-map-3d
mode="hybrid"
center="48.861000,2.335861"
heading="110"
tilt="67.5"
range="1000"
style="height:400px"
>
<gmp-marker-3d
position="48.861000,2.335861">
</gmp-marker-3d>
</gmp-map-3d>
Add a marker programmatically
To add a 3D marker to a map programmatically, create a new Marker3DElement
,
passing lat/lng
coordinates and a reference to the basemap, as shown in this
example:
const
marker
=
new
Marker3DElement
({
position
:
{
lat
:
47.6093
,
lng
:
-
122.3402
},
// (Required) Marker must have a lat/lng.
altitudeMode
:
"ABSOLUTE"
,
// (Optional) Treated as CLAMP_TO_GROUND if omitted.
extruded
:
true
,
// (Optional) Draws line from ground to the bottom of the marker.
label
:
"Basic Marker"
// (Optional) Add a label to the marker.
});
map
.
append
(
marker
);
// The marker must be appended to the map.
