[Vuejs]-Google maps 3.54 adding style to the map

Not sure about how it is with Vue but your code looks correct – with or without &v=3.54.

The thing is, if you instantiate your map with a mapId, the styles attribute in the constructor will not override the map’s appearance.

So, if you don’t have cloud styling associated with your mapId, remove it from the constructor. Your styles should apply right away. And I suspect this.map.setMapTypeId(...) will take effect too.

UPDATE

You cannot use mapIds and styles at the same time. When you do, you’ll get the warning:

A Map’s styles property cannot be set when a mapId is present. When a mapId is present, Map styles are controlled via the cloud console. Please see documentation at https://developers.google.com/maps/documentation/javascript/styling#cloud_tooling

Given that your style definitions are stored in a DB, you’ll likely need to create individual mapIds and their associated cloud style…

Alternatively, you can reconsider your usage of Advanced Markers. Here’s a guide to explore alternatives. Dislaimer: I wrote the guide.

Finally, you might want to keep an eye on the gcloud cli which might, at some future point, let you programmatically create mapIds and styles — just like Google did for API Keys.