Google Maps Javascript API Cloud based styling

Question

Anybody understand how to use the "Cloud Based Map Styling" for the Google Maps Javascript API?

I've been following the documentation but it doesn't actually explain how to to use the Map ID once it's been associated with the styling.

The only advice I could find was this this answer, but I'm trying the script below and although a map appears, there is no style applied to it.

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    mapId: "t43vt7y4ct837ytv", //not my real Map ID
    disableDefaultUI: true,
    center: { lat: 51.4765924, lng:  -0.003 },
    zoom: 15.5
  });
}

user_2565840 · Answer

As pointed out by @ecg8 (and from a more careful read of the question How do I change the mapId of a Google vector map?) I also needed to supply the Map ID as with the map_ids query parameter in url of the script loading.

As an example see url in the script tag below.

I'm assuming this will be added back into the official documentation for the API, but at the moment I can't seem to find it, so answering my own question here.

Google Maps Javascript API Cloud based styling

1 Answers