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

Using Cloud-based Map Styling (Beta)

The following instructions show how to use the Google Cloud console to create, customize, publish, and manage your maps at any time using Map IDs and Map Styles.

To create or manage any Map IDs or Map Styles in your Google Cloud project, you must have the Project Owner or Project Editor IAM role.

Creating a Map ID

A Map ID is a unique identifier that represents a single instance of a Google Map. You can create Map IDs and update a style associated with a Map ID at any time in the Google Cloud Console without changing embedded JSON styling in your application code.

To create a Map ID:

  1. In the Cloud Console, go to the Maps Management page.

    Go to the Maps Management page

  2. Click Create New Map ID, to display the Create New Map ID form.

    Create New Map ID

    In the form, do the following:

    • Specify a map name.
    • Specify a map type or platform.
    • Choose raster or vector image type.
    • Enter a description of the map.
    • Click Next to display the new Map ID.

Using Map IDs in your application code

To create a map with a Map ID in your application code:

  1. Update the script tag:

    <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_ID&callback=initMap">
    </script>

    Replace:

    • API_KEY with the API Key for your project.
    • MAP_ID with one or multiple Map IDs. For example: map_ids=1234 or map_ids=1234,2345
  2. If you are currently customizing your map with embedded JSON code, remove the styles property from your MapOptions object. Otherwise, skip this step.

  3. Add your Map ID to the map using the mapId property. For example:

    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8,
      mapId: 'MAP_ID'
    });

A Map Style is a unique identifier for a set of customizations that can be associated with any Map ID.

To create a new style:

  1. In the Cloud Console, go to the Map Styles page.

    Go to the Map Styles page

  2. Click Create New Map Style to open the Create New Style page.

    Create Style Options

In the Create New Style page, you can do the following:

  • Select a Map Style from one of the available templates, or import existing JSON styling code by pasting your JSON code into the text box on the Import JSON tab.

    Import JSON

  • Apply styling to a map by selecting map names. A single map style can be applied to multiple maps. You can always change the Map Style associated with a Map ID later.

  • Customize the display of different map features by clicking the Customize in Style Editor button. In the Style Editor, you can:

    • Change the styling of features on a map, such as roads, bodies of water, and commercial corridors.
    • Filter points of interest to specific business types.
    • Specify the display of points of interest density.

    Customize Style

  • Create a name and description to Save and Publish the Map Style. If you associated a Map ID, saving and publishing will make the changes in style customizations for the associated maps public.

Example App

Once you have created a Map ID, you can use it to work with your map in code. For example, the following JavaScript example initializes a map using its Map ID:

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Using a Map Id</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&libraries=&v=beta&map_ids=8e0a97af9386fef"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./app.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

All

<!DOCTYPE html>
<html>
  <head>
    <title>Using a Map Id</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&libraries=&v=beta&map_ids=8e0a97af9386fef"
      defer
    ></script>
    <style type="text/css">
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }

      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script>
      "use strict";

      function initMap() {
        new google.maps.Map(document.getElementById("map"), {
          mapId: "8e0a97af9386fef",
          center: {
            lat: 48.85,
            lng: 2.35,
          },
          zoom: 12,
        });
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
"use strict"; function initMap() { new google.maps.Map(document.getElementById("map"), { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35, }, zoom: 12, }); }
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<!DOCTYPE html> <html> <head> <title>Using a Map Id</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&libraries=&v=beta&map_ids=8e0a97af9386fef" defer ></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> </body> </html>