Guides

Map Styling

Copy for LLMs

Google Maps supports two styling approaches: legacy JSON styles and cloud-based map IDs. Both work with Nuxt Scripts, including the static map placeholder.

JSON Styles

Use the mapOptions.styles prop with a JSON style array. You can find pre-made styles on Snazzy Maps.

Styles automatically apply to both the static map placeholder and the interactive map.

<script setup lang="ts">
const mapOptions = {
  styles: [
    { elementType: 'labels', stylers: [{ visibility: 'off' }, { color: '#f49f53' }] },
    { featureType: 'landscape', stylers: [{ color: '#f9ddc5' }, { lightness: -7 }] },
    { featureType: 'road', stylers: [{ color: '#813033' }, { lightness: 43 }] },
    { featureType: 'water', stylers: [{ color: '#1994bf' }, { saturation: -69 }, { gamma: 0.99 }, { lightness: 43 }] },
    { featureType: 'poi.park', stylers: [{ color: '#645c20' }, { lightness: 39 }] },
  ],
}
</script>

<template>
  <ScriptGoogleMaps :map-options="mapOptions" />
</template>

Cloud-Based Map IDs

Google's Map Styling lets you create and manage styles in the Google Cloud Console, then apply them with a map ID.

<template>
  <ScriptGoogleMaps
    :map-options="{ mapId: 'YOUR_MAP_ID' }"
    :center="{ lat: -33.8688, lng: 151.2093 }"
    :zoom="12"
  />
</template>
JSON styles and mapId are mutually exclusive. When you provide both, the component ignores mapId and applies styles. Note that AdvancedMarkerElement requires a map ID to function; legacy Marker works without one.

Dark Mode / Color Mode

Switch map styles automatically based on the user's color mode preference. Provide a mapIds object with light and dark map IDs:

<template>
  <ScriptGoogleMaps
    :map-ids="{ light: 'LIGHT_MAP_ID', dark: 'DARK_MAP_ID' }"
    :center="{ lat: -33.8688, lng: 151.2093 }"
    :zoom="12"
  />
</template>

This auto-detects @nuxtjs/color-mode if installed. You can also control it manually with the colorMode prop:

<script setup lang="ts">
const isDark = ref(false)
</script>

<template>
  <ScriptGoogleMaps
    :map-ids="{ light: 'LIGHT_MAP_ID', dark: 'DARK_MAP_ID' }"
    :color-mode="isDark ? 'dark' : 'light'"
  />
  <button @click="isDark = !isDark">
    Toggle Dark Mode
  </button>
</template>

Combining Styles with Markers

Custom-styled maps pair well with custom marker content for a cohesive look:

<template>
  <ScriptGoogleMaps
    :map-options="{ mapId: 'DARK_THEME_ID' }"
    :center="{ lat: -33.8688, lng: 151.2093 }"
    :zoom="13"
  >
    <ScriptGoogleMapsAdvancedMarkerElement
      v-for="place in places"
      :key="place.id"
      :position="place.position"
    >
      <template #content>
        <div style="background: rgba(255,255,255,0.9); padding: 4px 8px; border-radius: 4px; font-size: 12px;">
          {{ place.label }}
        </div>
      </template>
    </ScriptGoogleMapsAdvancedMarkerElement>
  </ScriptGoogleMaps>
</template>
Edit this page
Markdown For LLMs

Programmatic API

The ScriptGoogleMaps component exposes its internal APIs via template ref, giving you full control beyond what the declarative SFC components provide.

Billing & Permissions