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.

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.