Use map IDs

A map ID is a unique identifier that's used to represent a single instance of a Google Map. You use map IDs to enable features or manage or style maps on your websites and in your applications. You can create map IDs for each platform you need--JavaScript, Android, iOS, or Static maps--in your Google Cloud console project on the Map Management page.

What you can do with map IDs

Use map IDs to enable features and styling. Here are some examples of how to use map IDs. For a full list, see Features that use map IDs:

  • Cloud-based maps styling: Associate a map ID with a map style to style, customize, and manage your maps using the Google Cloud console. Available on all platforms: JavaScript, Android, iOS, and Maps Static API.

  • Vector maps: Use a map ID to use a map composed of vector-based tiles that are drawn at load time on the client side using WebGL. Available on JavaScript.

  • Advanced markers: Use a map ID to enable Advanced markers. Available on JavaScript, Android, and iOS.

Example for cloud-based maps styling

To use cloud-based maps styling to style maps on your website and Android apps, you follow these steps:

  1. Create map IDs for each platform you are using. For example, create a JavaScript and an Android map ID. For details, see Create map IDs.

  2. Configure a map style on the Google Cloud console. For details, see cloud-based maps styling.

  3. Associate both of your map IDs with the map style in the Google Cloud console. For details, see Associate map IDs with your style.

  4. Reference the map ID in your website JavaScript and your Android app code. For details, see Add a map ID to your app.

The map style associated with your map IDs is then displayed on your website and in your Android app. You can make updates to your map style in the Cloud console, and changes appear in both places automatically, without the need for any app updates by your customers.

Features that use map IDs

The following table shows the Google Maps Platform features and APIs that use map IDs:

Feature or API Uses map IDs to accomplish these goals
Advanced markers Enable advanced markers. You don't need to create a map ID, and can instead use the demo map ID `DEMO_MAP_ID`.
Data-driven styling for boundaries Associate the map ID with a set of boundaries and styling to style the map according to the boundaries.
Data-driven styling for datasets Associate the map ID with a set of data and styling to style the map according to the dataset.
Flutter Style the Google maps used in your Flutter apps.
Maps Embed API Specify and style the map to be embedded on a web page.
Maps JavaScript API Style the map to be displayed on a web page.
Maps SDK for Android Style the map to be displayed in an Android application.1
Maps SDK for iOS Style the map to be displayed in an iOS application.1
Maps Static API Specify and style the map to be rendered as a static image.
Mobility solutions Use the Maps JavaScript API and SDKs for Android and iOS to style maps in Mobility solutions.1
WebGL (Vector maps) Enable WebGL features using a JavaScript Vector map ID.

1 Using a map ID on Maps SDK for Android or Maps SDK for iOS triggers a map load that is charged against the Dynamic Maps SKU.

How to create and use map IDs

A map ID is a unique identifier representing a single instance of a Google Map. You create map IDs and update the map style associated with a map ID in the Cloud console.

Required permissions

To create or manage any map IDs in your project, you must use a principal with the appropriate role-level permissions, Editor or Owner, on the Cloud console IAM page for the project. For details, see IAM basic and predefinied roles reference.

Create map IDs

You can create map IDs and update a style associated with a map ID at any time in the Cloud console.

To create a map ID, follow these steps:

  1. Sign in to and open a Cloud console project with the required permissions.

  2. In the Cloud console, go to the Maps Management page.

  3. Select Create map ID.

    Create New Map ID

  4. On the Create new map ID page, do the following:

    1. For Name, give the map ID a name.
    2. Optional: For Description, describe what the map ID is used for.
    3. For Map type, select the platform on which you plan to use the map ID. If you choose JavaScript, also choose a Raster (the default) or Vector map type. For more information on Vector maps, see Vector Maps.
    4. Select Save to show your new map ID.

Associate a map ID to a map style

These instructions assume that there is at least one existing map style in your project. If you don't have any map styles, see Cloud-based maps styling and select your platform for instructions on how to create one.

  1. In the Cloud console, go to the Maps Management page.
  2. From the table, select an existing map ID.
  3. Under Associated map style, select a map style.

  4. Select Save.

    Details page for a map ID, where you associate a map style

Add the map ID to your app

Android

Add your map ID through a <fragment> element in the activity's layout file, by using the MapView class, or programmatically using the GoogleMapOptions class.

For example, assume you created a map ID that is stored as a string value named map_id in res/values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>

For maps added through a <fragment> element in the activity's layout file, all map fragments that should have the custom style must specify the map ID in the map:mapId attribute:

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
    …
    map:mapId="@string/map_id" />

You can also use the map:mapId attribute of the MapView class to specify a map ID:

<com.google.android.gms.maps.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    ....
    map:mapId="@string/map_id" />

To specify a map ID programmatically, pass it to a MapFragment instance using the GoogleMapOptions class:

Java

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

Kotlin

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

In Android Studio, build and run your app as you normally would. Custom styles configured in the first step are applied to all maps with the specified map ID.

iOS

To instantiate a map using a map ID, do the folowing:

  1. Create a GMSMapID with the map ID string from Cloud console.
  2. Create a GMSMapView specifying the map ID you just created.

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

If you are using your own map ID, you can set your map ID in the Cloud console to have a new style at any time, and that style will be reflected on your map view automatically for you and users within about six hours.

If you want to see the changes immediately, you can close out and restart your app by exiting the app, forcing a quit of the app from the recently-used apps list, and then reopening it. The updated map will then be visible.

JavaScript

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

  1. If you are already customizing your map with embedded JSON code, remove the styles property from your MapOptions object; otherwise, skip this step.

  2. Add a 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'
});

Maps Static

To add a map ID to a new or existing map that uses one of our web-service APIs, append the map_id URL parameter and set it to your map ID. This example shows adding a map ID to a map using Maps Static API.

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=MAP_ID&signature=YOUR_SIGNATURE" />

A map centered on the Brooklyn Bridge in New York City, NY, US with map controls in the lower right corner. The map displays custom styling on the roads, water, and land.

If you have a digital signature in your Maps Static URL before adding your map ID, you will need to create and add a new digital signature after adding your map ID. When generating your new URL signing secret, remember to remove your previous digital signature from the URL.