CODEWITHSUNDEEP
google-mapsgoogle-cloud-platformgoogle-maps-api-3
velsietis
velsietis

Reputation: 73

Google Maps Javascript API Cloud based styling

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

Upvotes: 2

Views: 1829

Answers (1)

velsietis
velsietis

Reputation: 73

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.

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&v=weekly&callback=yourInitMapMethod&map_ids=abcd1234mymapid,efgh5678myothermap"></script>

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.

Upvotes: 1

Related Questions