Controls and interaction

Disable exploration controls

Exploration controls are enabled by default. To disable them, add default-ui-disabled to the gmp-map-3d tag, as demonstrated below:

<gmp-map-3d range="639.274301042242" tilt="64.92100184857551" center="34.0768990953219,-118.47450491266041,292.9794737933403" heading="-61.02026752077781" default-ui-disabled></gmp-map-3d>

Preset camera paths

FlyCameraTo

The following sample flies the camera from the San Jose Airport (SJC) to the San Francisco Airport (SFO).

<!DOCTYPE html>
<html>
  <head>
    <title>Photorealistic 3D Maps in Maps JavaScript Fly Camera To Demo</title>
    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }

      gmp-map-3d {
        height: 400px;
        width: 800px;
      }
    </style>
  </head>
  <body>
    <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: "<YOUR_API_KEY>",
      v: "alpha",
      // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
      // Add other bootstrap parameters as needed, using camel case.
    });
  </script>
    <script type="text/javascript">
    // Maps JS API is loaded using Dynamic Library import https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import

    async function init() {
      const { Map3DElement } = await google.maps.importLibrary("maps3d");

      const map = new Map3DElement({
        center: { lat: 37.36353, lng: -121.9286, altitude: 0 },
        tilt: 67.5,
        range: 1000
      });

      document.body.append(map);

      map.flyCameraTo({
        endCamera: {
          center: { lat: 37.6191, lng: -122.3816 },
          tilt: 67.5,
          range: 1000
        },
        durationMillis: 5000
      });
    }

    init();
    </script>
  </body>
</html>

FlyCameraAround

The following example flies the camera around the Eiffel Tower.

<!DOCTYPE html>
<html>
  <head>
    <title>Photorealistic 3D Maps in Maps JavaScript Fly Camera Around Demo</title>
    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }

      gmp-map-3d {
        height: 400px;
        width: 800px;
      }
    </style>
  </head>
  <body>
    <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: "<YOUR_API_KEY>",
      v: "alpha",
      // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
      // Add other bootstrap parameters as needed, using camel case.
    });
  </script>
    <script type="text/javascript">
    // Maps JS API is loaded using Dynamic Library import https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import

    async function init() {
      const { Map3DElement } = await google.maps.importLibrary("maps3d");

      const camera = {
        center: { lat: 48.8584, lng: 2.2945, altitude: 0 },
        tilt: 55,
        range: 1500
      };

      const map = new Map3DElement({
        ...camera,
        defaultLabelsDisabled: true
      });

      document.body.append(map);

      map.flyCameraAround({
        camera,
        durationMillis: 60000,
        rounds: 1
      });
    }

    init();
    </script>
  </body>
</html>

Combine animations

The following example flies the camera from Google's Mountain View office to the Eiffel Tower, then circles the Eiffel Tower.

<!DOCTYPE html>
<html>
  <head>
    <title>Photorealistic 3D Maps in Maps JavaScript Combine Animations Demo</title>
    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }

      gmp-map-3d {
        height: 400px;
        width: 800px;
      }
    </style>
  </head>
  <body>
    <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: "<YOUR_API_KEY>",
      v: "alpha",
      // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
      // Add other bootstrap parameters as needed, using camel case.
    });
  </script>
    <script type="text/javascript">
    // Maps JS API is loaded using Dynamic Library import https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import

    async function init() {
      const { Map3DElement } = await google.maps.importLibrary("maps3d");

      const flyToCamera = {
        center: { lat: 48.8584, lng: 2.2945, altitude: 0 },
        tilt: 55,
        range: 1500
      };

      const map = new Map3DElement({
        center: { lat: 37.4239163, lng: -122.0947209, altitude: 0 },
        tilt: 67.5,
        range: 1000,
        defaultLabelsDisabled: true
      });

      document.body.append(map);

      map.flyCameraTo({
        endCamera: flyToCamera,
        durationMillis: 5000,
      });

      map.addEventListener('gmp-animationend', () => {
        map.flyCameraAround({
          camera: flyToCamera,
          durationMillis: 60000,
          rounds: 1
        });
      }, {once: true});
    }

    init();
    </script>
  </body>
</html>

Stop animation

The following example shows how to stop animation.

<!DOCTYPE html>
<html>
  <head>
    <title>Photorealistic 3D Maps in Maps JavaScript stop animation</title>
    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }

      gmp-map-3d {
        height: 400px;
      }

      selector {
        padding: 2px;
        float: right;
      }
    </style>
  </head>
  <body>
    <selector>
      <button type="button" id="stopButton">Stop animation</button>
    </selector>
    <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: "<YOUR_API_KEY>",
        v: "alpha",
        // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
        // Add other bootstrap parameters as needed, using camel case.
      });
    </script>
    <div id="map">
      <script type="text/javascript">
        // Maps JS API is loaded using Dynamic Library import https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import

        let map;

        async function init() {
          const { Map3DElement } = await google.maps.importLibrary("maps3d");

          const camera = {
            center: { lat: 48.8584, lng: 2.2945, altitude: 0 },
            tilt: 55,
            range: 1500
          };

          map = new Map3DElement({
            ...camera,
            defaultLabelsDisabled: true
          });

          document.body.append(map);

          map.flyCameraAround({
            camera,
            durationMillis: 60000,
            rounds: 1
          });
        }

        document.getElementById('stopButton').addEventListener('click', () => {
          map.stopCameraAnimation();
        });

        init();

      </script>
  </div>
  </body>
</html>