Google Maps: color-mode reactivity fails with single mapId (Cloud-based styling)

[mtzrmzia]

🐛 The bug

The ScriptGoogleMaps component does not reactively update the map's colorScheme when the Nuxt color-mode changes if a single mapId is used. According to the documentation, providing a mapIds object or relying on auto-detection should handle the theme switch, but the map remains in the initial state (usually Light) even when the application's color mode and the HTML class successfully switch to dark.

The documentation suggests using two different Map IDs, but modern Google Maps Cloud-based styling allows a single Map ID to host both light and dark themes. Using a single ID for both keys in :map-ids or passing it via map-options results in no visual update or the error: A Map's mapId property cannot be changed after initial Map render if forced via reactivity.

To Reproduce

1. Configure a Google Map ID in Google Cloud Console with both "Light" and "Dark" color schemes assigned.
2. Use the following implementation:

<script setup lang="ts">
const mapOptions = {
 center: { lat: 23.96736602061825, lng: -102.1055418897208 },
 zoom: 5,
};
</script>

<template>
 <ScriptGoogleMaps
 :map-ids="{
 light: 'id_light', // ID CLARO
 dark: 'id_dark', // ID OSCURO
 }"
 :map-options="mapOptions"
 />
</template>

3. Toggle the Nuxt color mode.
4. Observe that the UI changes to dark mode, but the map stays in light mode.

🛠️ To reproduce

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

🌈 Expected behavior

The map should call setOptions({ colorScheme: 'DARK' }) (or 'LIGHT') on the existing instance without re-rendering the entire component or requiring a unique ID per theme, especially since Google's new API supports dynamic scheme switching on a single Map ID.

ℹ️ Additional context

Operating system	macOS 25.4.0
CPU	Apple M2 Pro (10 cores)
Node.js version	v22.13.0
nuxt/cli version	3.34.0
Package manager	yarn@4.7.0
Nuxt version	4.4.2
Nitro version	2.13.1
Builder	vite@7.3.1
Config	app, compatibilityDate, components, css, devtools, experimental, fonts, image, modules, piniaPluginPersistedstate, runtimeConfig, scripts, ssr, typescript, ui, vite
Modules	@nuxt/eslint@1.15.2, @nuxt/ui@4.5.1, @nuxt/image@2.0.0, @vueuse/nuxt@14.2.1, @pinia/nuxt@0.11.3, pinia-plugin-persistedstate/nuxt@4.7.1, @nuxt/scripts@1.0.2

[harlan-zw]

Thanks for the detailed issue, should hopefully be fixed in latest.

[mtzrmzia]

hey @harlan-zw thanks for the update! However, the map resets every time the theme is changed. Is there a way to apply styles without having to mount/unmount the map? The problem is that I lose the zoom and pins I had before changing the theme. thanks!

[harlan-zw]

The google maps sdk doesn't allow you to switch the map without reinitializing it, however, there was logic put in place to preserve the zoom, not too sure about pins. I'll double check.