Add a marker to a 3D map

Select platform: Android iOS JavaScript

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. 

Next steps