Vector Static Map

Load a static map for fast rendering

As a potential performance optimization, you can update your map options to enable a static map image while the map is loading. The map on the right is using this option.

TypeScript

new google.maps.Map(
  document.getElementById("right") as HTMLElement,
  {
    ...sharedOptions,
    mapId: "ed1309c122a3dfcb",
    useStaticMap: true,
  } as google.maps.MapOptions // TODO(jpoehnelt) add mapId to @types/googlemaps
);

JavaScript

new google.maps.Map(
  document.getElementById("right"),
  {
    ...sharedOptions,
    mapId: "ed1309c122a3dfcb",
    useStaticMap: true,
  } // TODO(jpoehnelt) add mapId to @types/googlemaps
);

This may not have as much of an impact on slower networks, however, since vector tiles are smaller than their raster counterparts.

TypeScript

// Initialize and add the side by side maps
function initMap(): void {
  const sharedOptions = {
    center: { lat: 47.609414458375674, lng: -122.33897030353548 },
    zoom: 17,
    disableDefaultUI: true,
    gestureHandling: "none",
  };

  new google.maps.Map(
    document.getElementById("left") as HTMLElement,
    {
      ...sharedOptions,
      mapId: "ed1309c122a3dfcb",
      useStaticMap: false,
    } as google.maps.MapOptions
  );

  new google.maps.Map(
    document.getElementById("right") as HTMLElement,
    {
      ...sharedOptions,
      mapId: "ed1309c122a3dfcb",
      useStaticMap: true,
    } as google.maps.MapOptions // TODO(jpoehnelt) add mapId to @types/googlemaps
  );
}

JavaScript

// Initialize and add the side by side maps
function initMap() {
  const sharedOptions = {
    center: { lat: 47.609414458375674, lng: -122.33897030353548 },
    zoom: 17,
    disableDefaultUI: true,
    gestureHandling: "none",
  };
  new google.maps.Map(document.getElementById("left"), {
    ...sharedOptions,
    mapId: "ed1309c122a3dfcb",
    useStaticMap: false,
  });
  new google.maps.Map(
    document.getElementById("right"),
    {
      ...sharedOptions,
      mapId: "ed1309c122a3dfcb",
      useStaticMap: true,
    } // TODO(jpoehnelt) add mapId to @types/googlemaps
  );
}

CSS

html,
body,
.container {
  height: 100%;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.map {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  height: 100%;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Vector Initial Static Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=beta&map_ids=ed1309c122a3dfcb"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div class="container">
      <div id="left" class="map"></div>
      <div id="right" class="map"></div>
    </div>
  </body>
</html>

All

<!DOCTYPE html>
<html>
  <head>
    <title>Vector Initial Static Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=beta&map_ids=ed1309c122a3dfcb"
      defer
    ></script>
    <style type="text/css">
      html,
      body,
      .container {
        height: 100%;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
      }

      .map {
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
        flex: 1;
        height: 100%;
      }
    </style>
    <script>
      // Initialize and add the side by side maps
      function initMap() {
        const sharedOptions = {
          center: { lat: 47.609414458375674, lng: -122.33897030353548 },
          zoom: 17,
          disableDefaultUI: true,
          gestureHandling: "none",
        };
        new google.maps.Map(document.getElementById("left"), {
          ...sharedOptions,
          mapId: "ed1309c122a3dfcb",
          useStaticMap: false,
        });
        new google.maps.Map(
          document.getElementById("right"),
          {
            ...sharedOptions,
            mapId: "ed1309c122a3dfcb",
            useStaticMap: true,
          } // TODO(jpoehnelt) add mapId to @types/googlemaps
        );
      }
    </script>
  </head>
  <body>
    <div class="container">
      <div id="left" class="map"></div>
      <div id="right" class="map"></div>
    </div>
  </body>
</html>
// Initialize and add the side by side maps function initMap() { const sharedOptions = { center: { lat: 47.609414458375674, lng: -122.33897030353548 }, zoom: 17, disableDefaultUI: true, gestureHandling: "none", }; new google.maps.Map(document.getElementById("left"), { ...sharedOptions, mapId: "ed1309c122a3dfcb", useStaticMap: false, }); new google.maps.Map( document.getElementById("right"), { ...sharedOptions, mapId: "ed1309c122a3dfcb", useStaticMap: true, } // TODO(jpoehnelt) add mapId to @types/googlemaps ); }
html, body, .container { height: 100%; } .container { display: flex; flex-wrap: wrap; margin: 0; } .map { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; height: 100%; }
<!DOCTYPE html> <html> <head> <title>Vector Initial Static Map</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&v=beta&map_ids=ed1309c122a3dfcb" defer ></script> <!-- jsFiddle will insert css and js --> </head> <body> <div class="container"> <div id="left" class="map"></div> <div id="right" class="map"></div> </div> </body> </html>

Create a starter application from sample

A skeleton starter application using TypeScript, Webpack, and Babel can be generated from this sample using one of the methods below.

Run Locally

Node.js is required to run this sample locally. Follow these instructions to install Node.js and NPM.

npm i -g '@googlemaps/js-samples'
googlemaps-js-samples init vector-use-static-map DESTINATION_FOLDER

Run in Google Cloud Shell

Google Cloud Shell is an interactive shell environment for Google Cloud Platform that makes it easy for you to learn and experiment with GCP and manage your projects and resources from your web browser.

Run in Cloud Shell