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