It's the 15th anniversary of Google Maps Platform - Check out the latest news and announcements

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.

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
);

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="./app.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>
      "use strict";

      // 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>
"use strict"; // 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=AIzaSyCb1xprYSpXd0q_yDsJ1W2UGhfl9_YGKU0&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>