Create markers

  • Learn how to add simple or customized markers, including labels, scaling, and color adjustments to Photorealistic 3D Maps.

  • Discover techniques to replace default icons with custom graphics using SVGs, PNGs, or Place icons, enhancing marker visualization.

  • Explore creating interactive markers that respond to user clicks, providing an engaging user experience in the 3D map environment.

  • Understand how to extrude markers to add a third dimension, allowing for more realistic and informative map representations.

  • Gain insights into controlling marker collision behavior, ensuring optimal marker visibility and preventing overlapping in crowded areas, and understand how to remove markers from the map when necessary.
The following example creates a marker over the Google office in Mountain View.

Read the documentation.

JavaScript

async function init() {
    // Make sure the Marker3DElement is included.
    const { Map3DElement, Marker3DElement } = await google.maps.importLibrary("maps3d");
    const map = new Map3DElement({
        center: { lat: 37.4239163, lng: -122.0947209, altitude: 0 },
        tilt: 67.5,
        range: 1000,
        mode: 'SATELLITE'
    });
    const marker = new Marker3DElement({
        position: { lat: 37.4239163, lng: -122.0947209, altitude: 50 }, // (Required) Marker must have a lat / lng, but doesn't need an altitude.
        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.
    document.body.append(map);
}
init();
index.js

CSS

/* * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
  <head>
    <title>Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta",});</script>
  </body>
</html>
index.html

Try Sample

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application. 

  git clone https://github.com/googlemaps-samples/js-api-samples.git
  cd samples/3d-simple-marker
  npm i
  npm start