`ScriptGoogleMapsMarker` cannot be used with `mapOptions.styles`

[yukiyohure]

🐛 The bug

Since v1 consolidates ScriptGoogleMapsMarker to wrap google.maps.marker.AdvancedMarkerElement
(removing the legacy google.maps.Marker), a mapId is now always required for markers to
function. However, the Map Styling guide
states:

JSON styles and mapId are mutually exclusive. When you provide both, the component ignores
mapId and applies styles.

This creates an irreconcilable conflict:

• ScriptGoogleMapsMarker (v1) requires mapId via AdvancedMarkerElement
• Providing mapOptions.styles silently drops mapId
• As a result, AdvancedMarkerElement fails to initialize, and the map surface shows
  "This Page Can’t Load Google Maps Correctly."

There is currently no supported way to apply JSON map styles when any ScriptGoogleMapsMarker
is present as a child of ScriptGoogleMaps in v1.

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-uyvxje18?file=pages%2Findex.vue

🌈 Expected behavior

Either:

• (a) mapOptions.styles is applied and ScriptGoogleMapsMarker renders correctly — both should be usable together, as they were in v0 (where ScriptGoogleMapsMarker used the legacy google.maps.Marker , which did not require mapId).
• (b) The documentation is updated to clearly state that JSON styles cannot be used alongside ScriptGoogleMapsMarker in v1, and an alternative migration path is provided.

ℹ️ Additional context

• In v0, ScriptGoogleMapsMarker wrapped google.maps.Marker, which does not require mapId. JSON styles worked without issue alongside markers.
• In v1, the migration guide states that ScriptGoogleMapsMarker now wraps google.maps.marker.AdvancedMarkerElement, which requires a Map ID.

[harlan-zw]

Thanks for the detailed report. The silent failure is a bug on our side, fixed in #719.

Unfortunately, option (a) isn't solvable. AdvancedMarkerElement requires a mapId (per Google's migration guide), and Google explicitly rejects the combination with: "A Map's styles property cannot be set when a mapId is present." When both are set, mapId wins and styles is ignored. There's no flag to override this.

To solve on your end you would need to create a Map ID in Google Cloud Console, attach your styles to it via cloud-based map styling, and pass it as mapOptions.mapId (or via mapIds if you want color-mode-aware styling). That's the only supported path for a styled map with advanced markers, it's a Google constraint rather than ours.