How to style Google Map Vue3?

Question

Google Maps

How to apply styles to google map?

I am using this library: https://vue-map.netlify.app/components/map.html

Documentation says that styles are applied in this way

<GMapMap
        :center="{lat: 51.093048, lng: 6.842120}"
        :zoom="7"
        :style="mapStyles"
    />

Next, I write the styles:

export default {
  name: 'Map',
  data() {
    return {
      mapStyles: {
        styles: [
          {elementType: 'geometry', stylers: [{color: '#d59563'}]},
          {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
          {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
          {
            featureType: 'administrative.locality',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
          },
          {
            featureType: 'poi',
            elementType: 'labels.text.fill',
            stylers: [{color: '#d59563'}]
          },
          {
            featureType: 'poi.park',
            elementType: 'geometry',
            stylers: [{color: '#263c3f'}]
          },
...

But I'm obviously doing something wrong, the styles are not applied.
Help me to understand.
Thank you!

Answer 1

:style="mapStyles"

data() {
  return {
    mapStyles: {
      styles: [

First, it's not very clear where you got the idea that styles should be an object containing the styles property. The documentation has a link to the style constructor - it gives out just an array, without a wrapper in the form of an object.
Secondly, the map component does not have a style parameter. That is, the documentation is lying. Yes, it happens. But there is an options parameter, of which styles are a part. So you should replace
mapStyles: {with with Well, you should also make sure that the api key is there - they don’t want to apply styles without it. options: {
:style="mapStyles":options="options"