Stylers dont work anymore

[SanderBrijer]

I recently updated google maps to 0.21.0, afterwards de stylers of the map dont work anymore.

This doesnt work icw advanced marker and map id

What I tried:

 function getMapOptions() {
      return {
        styles: [
          {
            featureType: 'poi.business',
            stylers: [
              {
                visibility: 'off',
              },
            ],
          },
          {
            featureType: 'poi.government',
            stylers: [
              {
                visibility: 'off',
              },
            ],
          },
          {
            featureType: 'poi.school',
            stylers: [
              {
                visibility: 'off',
              },
            ],
          },
          {
            featureType: 'poi.medical',
            stylers: [
              {
                visibility: 'off',
              },
            ],
          },
          {
            featureType: 'poi.place_of_worship',
            stylers: [
              {
                visibility: 'off',
              },
            ],
          },
        ],
      };
    }

    watch(
      () => googleMap.value?.ready,
      (ready) => {
        if (!ready) return;

        googleMap.value.map.setOptions(getMapOptions());
      }
    );

and

 <google-map
      v-if="mapHeight"
      ref="googleMap"
      mapId="googleMap"
      style="width: 100%; height: 100%"
      :styles="mapstyles"

 mapstyles() {
      return [
        ...(this.layer?.labels?.companies === false
          ? [...this.styleRemoveLabels]
          : []),
        ...(this.darkmode.value ?? useQuasar()?.dark.isActive
          ? [...this.styles]
          : []),
      ];
    },

Darkmode is not working after the update, and the remove labels (POI companies) dont work anymore...

[beliven-francesco-delgiudice]

Same here!

[Guziq]

For version 0.21.0, I can confirm that styles and dark mode still work for me. Here's an example of my implementation:

<google-map
    ref="mapRef"
    :api-key="config.GOOGLE_MAPS_API_KEY"
    :street-view-control="false"
    :styles="mapOptions.styles"
    style="width: 100%; height: 100%"
/>

const mapOptions = computed(() => ({
    styles: isDark.value ? darkMapStyle : lightMapStyle,
}));

const darkMapStyle = [
    { elementType: 'geometry', stylers: [{ color: '#212121' }] },
    { elementType: 'labels.text.stroke', stylers: [{ color: '#212121' }] },
    { elementType: 'labels.text.fill', stylers: [{ color: '#757575' }] },
    { featureType: 'poi', stylers: [{ visibility: 'off' }] },
];

const lightMapStyle = [
    { featureType: 'poi', stylers: [{ visibility: 'off' }] },
];

[SanderBrijer]

@Guziq this only works if you dont use the id prop in the google-map

But that is required..

[JeffWelder]

@Guziq this only works if you dont use the id prop in the google-map

But that is required..

Running into this as well, can't set style with the error:

Google Maps JavaScript API: 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

Swapping them at runtime I get:

Google Maps JavaScript API: A Map's mapId property cannot be changed after initial Map render.
Which seems to be a more fundamental issue.

Seems to be a more underlying issue where you have to create a new map instance. Just wanted to share.