Applying cloud based map style with vue2-google-maps?

Question

As mentioned in these docs, we can now apply cloud based styling to a map by setting the mapId property of the map.

I tried my luck with this:

<GmapMap ref="mapView" :center="driver.location" :zoom="15" :options="{ mapId: '84f11e866388cfc5' }">
</GmapMap>

But it didn't work. I also tried adding the map programatically with this:

new this.google.maps.Map(document.getElementById('container'), {
     mapId: '84f11e866388cfc5',
     center: {lat:61.180059, lng: -149.822075},
     zoom:12
});

It does add the map, but doesn't apply the custom style designed in the cloud. According to the docs, it requires the MAP_ID to be set in the API URL as well like this:

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

But how to do that? Is there a way to configure this plugin to set MAP_ID while importing the API? If not, is there any other Vue plugin which does the job?

Any help would be appreciated.

Answer 1

After looking trough the source code I found that you can add anything in the url when initializing the Gmap module

Vue.use(GmapVue, {
  load: {
    key: <your code>,
    libraries: "places",
    map_id: <your map-id>
  },
  installComponents: true
});

This successfully ads the map_id to the url, however it's still not working for me, even when using the correct url.

Maybe I did something wrong completely different and this "answer" actually works for you.

Answer 2

options : {
  mapId: "Your Map ID"
};

add map option, put it on your GmapMap tag

 <GmapMap :options="options">
    </GmapMap>

Your main.js

Vue.use(VueGoogleMaps, {
  load: {
    key: "Your map api key",
    map_ids: "Your map ID"
  }
});