Introducing Places UI Kit :A ready-to-use, low-cost component library that lets you bring the familiar Google Maps UI for Places to any map of your choice. Try it out, and share your input to help shape the future of GMP!

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

Basic marker customization

Add a marker to a 3D map Stay organized with collections Save and categorize content based on your preferences.

Add a marker using HTML

Add a marker programmatically

Next steps

Add a marker to a 3D map