<ScriptGoogleMapsStaticMap>

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
    :map-options="{
      center,
      zoom: 7,
    }"
  >
    <template #placeholder>
      <ScriptGoogleMapsStaticMap
        :center="center"
        :zoom="7"
        loading="eager"
        maptype="satellite"
      />
    </template>
  </ScriptGoogleMaps>
</template>

Props

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 it unless you provide an explicit apiKey prop. Passing the prop produces a direct https://maps.googleapis.com/maps/api/staticmap image URL.

The built-in proxy cannot use a client-provided signature because the server appends the API key after it receives the query. Pass both apiKey and signature to make a signed direct request.

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>