Issue: Custom map styling is only visible for one second and then changes back to default.

[felixranesberger]

Hello, I would like to change the styling of my map and I followed the documentation for the implementation:

https://vue-map.netlify.app/components/map.html#provide-your-own-style

However, for some reason I have the problem that the map style is only visible for a second when reloading and then the map is reloaded and the default map style is visible again.

Does anyone know how I can fix this issue?

Here is the code I use for the Vue component.
https://gist.github.com/felixranesberger/f34152109e5bc2c65801ed0ba5e5c587

I would be very glad to receive a reply.

Many greetings
Felix

google-maps-custom-styling-issue.mov

[fawmi]

@felixranesberger
As i can see, you do not have Maps API key, this overwritten styles are shown over maps without a valid key.
Have you provided a valid API key while initiating the plugin?

app.use(VueGoogleMaps, {
    load: {
        key: 'YOUR_API_KEY_COMES_HERE',
    },
}).mount('#app')

Look at developer console, if you have some errors.

[felixranesberger]

I have an API key set up, but it does not currently have any payment information set up.

I will get back to you when I have tried an API key with working payment information.

This hint really helps me.

Thanks for the quick reply!

[fawmi]

Problems with API keys are logged in console, check the console, if you have any error.

[felixranesberger]

Your suggestion solved my issues.
Thanks a lot!

Have a nice day.