To use the Data-driven styling Preview, you must create a map ID that uses the JavaScript vector map. Next, you must create a new map style, select the desired boundary feature layers, and associate the style with your map ID.
If you plan to use the Region Lookup API, you must enable it in the Google API Console.
Create a map ID
To create a new map ID, follow the steps in Cloud customization. Set the Map type to JavaScript, and select the Vector option. Check Tilt and/or Rotation to enable tilt and rotation on the map. If the use of tilt or heading will adversely affect your app, leave Tilt and Rotation un-checked so users will not be able to adjust tilt and rotation.
Create a new map style
To create a new map style, follow the instructions in Manage map styles to create the style, and associate the style with the map ID you just created.
Select feature layers
In the Google API Console you can select which feature layers to display. This determines which kinds of boundaries will appear on the map (for example localities, states, and so on).
To manage feature layers
- In the Google API Console, go to the Map Styles page.
- Select a project if prompted.
- Select a map style.
- Click the Feature layers drop-down to add or remove layers.
- Click Save to save your changes and make them available to your maps.
Update your map initialization code
This requires the map ID you just created. It can be found on your Maps Management page.
Use
v=beta
in your APIscript
tag. For example:<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&callback=initMap"></script>
(Optional) add the
region
parameter to set the map region. This alters your application to serve different map tiles based on the region and will also alter the polygons for certain boundary features. Learn more about region localization.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY®ion=JP&libraries=places&v=beta&callback=initMap"></script>
Provide a map ID when you instantiate the map using the
mapId
property. This should be the map ID that you configured using a map style with feature layers enabled.map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled. });
Add feature layers to a map
To get a reference to a feature layer on your map, call map.getFeatureLayer()
when the map initializes:
function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: 20.773, lng: -156.01 }, zoom: 12, mapId: 'MAP_ID', }); // Add a feature layer for localities. localityLayer = map.getFeatureLayer('LOCALITY'); ... }
Check map capabilities
Data-driven styling requires capabilities which are enabled in the
Google API Console, and associated with a map ID. Because map IDs are ephemeral
and subject to change, you can call map.getMapCapabilities()
to verify whether a certain capability (for example data-driven styling) is
available prior to calling it. This check is optional.
The following example shows adding a listener to subscribe to map capability changes:
// subscribe to changes map.addListener('mapcapabilities_changed', () => { const mapCapabilities = map.getMapCapabilities(); if (mapCapabilities.isDataDrivenStylingAvailable) { // Call data-driven styling here. } // When !mapCapabilities.isDataDrivenStylingAvailable, any existing featureLayers are also unavailable. });