{const t=window,e=document.documentElement,c=["dark","light"],n=getStorageValue("localStorage","nuxt-color-mode")||"system";let i=n==="system"?u():n;const r=e.getAttribute("data-color-mode-forced");r&&(i=r),l(i),t["__NUXT_COLOR_MODE__"]={preference:n,value:i,getColorScheme:u,addColorScheme:l,removeColorScheme:d};function l(o){const s=""+o+"",a="";e.classList?e.classList.add(s):e.className+=" "+s,a&&e.setAttribute("data-"+a,o)}function d(o){const s=""+o+"",a="";e.classList?e.classList.remove(s):e.className=e.className.replace(new RegExp(s,"g"),""),a&&e.removeAttribute("data-"+a)}function f(o){return t.matchMedia("(prefers-color-scheme"+o+")")}function u(){if(t.matchMedia&&f("").media!=="not all"){for(const o of c)if(f(":"+o).matches)return o}return"light"}})();function getStorageValue(t,e){switch(t){case"localStorage":return window.localStorage.getItem(e);case"sessionStorage":return window.sessionStorage.getItem(e);case"cookie":return getCookie(e);default:return null}}function getCookie(t){const c=("; "+window.document.cookie).split("; "+t+"=");if(c.length===2)return c.pop()?.split(";").shift()}
Api

<ScriptGoogleMapsStaticMap>

Copy for LLMs

Renders a Google Maps Static API image. Use standalone for static map previews, or drop into the #placeholder slot of <ScriptGoogleMaps> for a loading placeholder.

This script's proxy endpoints use HMAC URL signing when you configure a NUXT_SCRIPTS_PROXY_SECRET. See the security guide for setup instructions.

Usage

Standalone

Display a static map without loading the interactive Google Maps JavaScript API.

<template>
  <ScriptGoogleMapsStaticMap
    center="51.95,19.13"
    :zoom="7"
    width="100%"
    height="300"
  />
</template>

As Placeholder

Use inside <ScriptGoogleMaps> to show a static map while the interactive map loads.

<template>
  <ScriptGoogleMaps :center="center" :zoom="7">
    <template #placeholder>
      <ScriptGoogleMapsStaticMap
        :center="center"
        :zoom="7"
        loading="eager"
        maptype="satellite"
      />
    </template>
  </ScriptGoogleMaps>
</template>

Props

PropTypeDefaultDescription
centerstring | { lat: number, lng: number }Map center as "lat,lng" string or LatLngLiteral.
zoomnumber15Zoom level (0 to 21).
size`${number}x${number}`autoExplicit pixel size for the API request. When omitted, measures the rendered container on mount. Falls back to 640x400 during SSR.
scale1 | 22Device pixel ratio.
formatStaticMapFormatImage format: png, jpg, gif, png8, png32, jpg-baseline.
maptypeStaticMapTypeMap type: roadmap, satellite, terrain, hybrid.
mapIdstringCloud-based map styling ID.
markersstring | string[]Marker descriptors.
pathstring | string[]Polyline path descriptors.
visiblestring | string[]Locations that should be visible on the map.
stylestring | string[] | MapTypeStyle[]Map styling. Accepts raw Static Maps API style strings or Google Maps JS API MapTypeStyle[] objects.
languagestringLanguage code for map labels.
regionstringRegion bias.
signaturestringDigital signature for keyless requests.
apiKeystringAPI key override. Takes priority over the proxy; the component falls back to the server-side key when omitted.
widthnumber | string640CSS width for the container.
heightnumber | string400CSS height for the container.
loading'eager' | 'lazy''lazy'Image loading strategy.
objectFitstring'cover'Object-fit for the <img> within its container.
imgAttrsImgHTMLAttributesAdditional attributes for the <img> element.

Size Handling

When size is not provided, the component:

  1. Client-side: Measures the container's pixel dimensions on mount and clamps to the Static Maps API limit of 640x640 (preserving aspect ratio).
  2. SSR: Derives from width/height props if both are pixel values.
  3. Fallback: Uses 640x400.

Set size explicitly to bypass auto-measurement.

Proxy Support

Configuring googleMaps in scripts.registry enables a server-side proxy automatically. The component routes requests through the proxy unless you provide an explicit apiKey prop.

Slots

default

Override the <img> element with a custom template. Receives { src } with the computed Static Maps URL.

<template>
  <ScriptGoogleMapsStaticMap center="51.95,19.13" :zoom="7">
    <template #default="{ src }">
      <img :src="src" alt="Custom static map" class="rounded-lg shadow">
    </template>
  </ScriptGoogleMapsStaticMap>
</template>
Edit this page
Markdown For LLMs

useScriptGoogleMaps()

The useScriptGoogleMaps() composable lets you have fine-grained control over the Google Maps SDK. It provides a way to load the Google Maps SDK and interact with it programmatically.

<ScriptGoogleMapsMarker>

Map marker with HTML content support. Place inside a <ScriptGoogleMaps> component.