Guides

Example: Shapes & Overlays

Copy for LLMs
Google Maps Static Map
Shapes & Overlays Demo
Circle (blue), polygon (green), polyline route (red), and rectangle (yellow) on a single map.

All shape components are placed inside <ScriptGoogleMaps> and accept an options prop matching the corresponding Google Maps API options.

Circle: Delivery Radius

<template>
  <ScriptGoogleMaps :center="{ lat: -33.8688, lng: 151.2093 }" :zoom="13">
    <ScriptGoogleMapsAdvancedMarkerElement :position="{ lat: -33.8688, lng: 151.2093 }" />
    <ScriptGoogleMapsCircle
      :options="{
        center: { lat: -33.8688, lng: 151.2093 },
        radius: 2000,
        fillColor: '#4285F4',
        fillOpacity: 0.15,
        strokeColor: '#4285F4',
        strokeOpacity: 0.8,
        strokeWeight: 2,
      }"
    />
  </ScriptGoogleMaps>
</template>

Polygon: Zone Boundary

<script setup lang="ts">
const zoneBoundary = [
  { lat: -33.856, lng: 151.200 },
  { lat: -33.852, lng: 151.220 },
  { lat: -33.870, lng: 151.225 },
  { lat: -33.878, lng: 151.205 },
  { lat: -33.870, lng: 151.195 },
]
</script>

<template>
  <ScriptGoogleMaps :center="{ lat: -33.865, lng: 151.210 }" :zoom="14">
    <ScriptGoogleMapsPolygon
      :options="{
        paths: zoneBoundary,
        fillColor: '#34a853',
        fillOpacity: 0.2,
        strokeColor: '#34a853',
        strokeWeight: 2,
      }"
    />
  </ScriptGoogleMaps>
</template>

Polyline: Route Path

<script setup lang="ts">
const routePath = [
  { lat: -33.8568, lng: 151.2153 },
  { lat: -33.8600, lng: 151.2100 },
  { lat: -33.8650, lng: 151.2090 },
  { lat: -33.8688, lng: 151.2093 },
]
</script>

<template>
  <ScriptGoogleMaps :center="{ lat: -33.862, lng: 151.212 }" :zoom="15">
    <ScriptGoogleMapsPolyline
      :options="{
        path: routePath,
        strokeColor: '#ea4335',
        strokeOpacity: 1.0,
        strokeWeight: 3,
      }"
    />
    <ScriptGoogleMapsAdvancedMarkerElement :position="routePath[0]">
      <ScriptGoogleMapsPinElement :options="{ background: '#34a853' }" />
    </ScriptGoogleMapsAdvancedMarkerElement>
    <ScriptGoogleMapsAdvancedMarkerElement :position="routePath[routePath.length - 1]">
      <ScriptGoogleMapsPinElement :options="{ background: '#ea4335' }" />
    </ScriptGoogleMapsAdvancedMarkerElement>
  </ScriptGoogleMaps>
</template>

Rectangle: Bounding Box

<template>
  <ScriptGoogleMaps :center="{ lat: -33.865, lng: 151.210 }" :zoom="14">
    <ScriptGoogleMapsRectangle
      :options="{
        bounds: {
          north: -33.855,
          south: -33.875,
          east: 151.225,
          west: 151.195,
        },
        fillColor: '#fbbc04',
        fillOpacity: 0.15,
        strokeColor: '#fbbc04',
        strokeWeight: 2,
      }"
    />
  </ScriptGoogleMaps>
</template>

GeoJSON: Data Layer

Load GeoJSON from a URL or pass inline data. Both src and style are reactive.

<script setup lang="ts">
const geoJson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [[
          [151.20, -33.87],
          [151.25, -33.87],
          [151.25, -33.90],
          [151.20, -33.90],
          [151.20, -33.87],
        ]],
      },
      properties: { name: 'Sydney CBD' },
    },
  ],
}
</script>

<template>
  <ScriptGoogleMaps :center="{ lat: -33.885, lng: 151.225 }" :zoom="13">
    <ScriptGoogleMapsGeoJson
      :src="geoJson"
      :style="{ fillColor: '#4285F4', fillOpacity: 0.3, strokeColor: '#4285F4', strokeWeight: 2 }"
    />
  </ScriptGoogleMaps>
</template>

Remote URL

<template>
  <ScriptGoogleMaps :center="{ lat: -33.885, lng: 151.225 }" :zoom="10">
    <ScriptGoogleMapsGeoJson
      src="https://example.com/boundaries.geojson"
      :style="{ fillColor: '#34a853', fillOpacity: 0.2, strokeWeight: 1 }"
    />
  </ScriptGoogleMaps>
</template>
Edit this page
Markdown For LLMs

Example: Markers & Info Windows

Example: Marker Clustering