Guides

Example: Shapes & Overlays

Copy for LLMs
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

<script setup lang="ts">
const center = { lat: -33.8688, lng: 151.2093 }

const circleOptions = {
  center,
  radius: 2000,
  fillColor: '#4285F4',
  fillOpacity: 0.15,
  strokeColor: '#4285F4',
  strokeOpacity: 0.8,
  strokeWeight: 2,
}
</script>

<template>
  <ScriptGoogleMaps :center="center" :zoom="13">
    <ScriptGoogleMapsMarker :position="center" />
    <ScriptGoogleMapsCircle :options="circleOptions" />
  </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 },
]

const polygonOptions = {
  paths: zoneBoundary,
  fillColor: '#34a853',
  fillOpacity: 0.2,
  strokeColor: '#34a853',
  strokeWeight: 2,
}
</script>

<template>
  <ScriptGoogleMaps :center="{ lat: -33.865, lng: 151.210 }" :zoom="14">
    <ScriptGoogleMapsPolygon :options="polygonOptions" />
  </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 },
]

const polylineOptions = {
  path: routePath,
  strokeColor: '#ea4335',
  strokeOpacity: 1.0,
  strokeWeight: 3,
}

const startColor = '#34a853'
const endColor = '#ea4335'
</script>

<template>
  <ScriptGoogleMaps :center="{ lat: -33.862, lng: 151.212 }" :zoom="15">
    <ScriptGoogleMapsPolyline :options="polylineOptions" />
    <ScriptGoogleMapsMarker :position="routePath[0]">
      <template #content>
        <div class="w-6 h-6 rounded-full border-2 border-white" :style="{ background: startColor }" />
      </template>
    </ScriptGoogleMapsMarker>
    <ScriptGoogleMapsMarker :position="routePath[routePath.length - 1]">
      <template #content>
        <div class="w-6 h-6 rounded-full border-2 border-white" :style="{ background: endColor }" />
      </template>
    </ScriptGoogleMapsMarker>
  </ScriptGoogleMaps>
</template>

Rectangle: Bounding Box

<script setup lang="ts">
const rectangleOptions = {
  bounds: {
    north: -33.855,
    south: -33.875,
    east: 151.225,
    west: 151.195,
  },
  fillColor: '#fbbc04',
  fillOpacity: 0.15,
  strokeColor: '#fbbc04',
  strokeWeight: 2,
}
</script>

<template>
  <ScriptGoogleMaps :center="{ lat: -33.865, lng: 151.210 }" :zoom="14">
    <ScriptGoogleMapsRectangle :options="rectangleOptions" />
  </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' },
    },
  ],
}

const geoJsonStyle = {
  fillColor: '#4285F4',
  fillOpacity: 0.3,
  strokeColor: '#4285F4',
  strokeWeight: 2,
}
</script>

<template>
  <ScriptGoogleMaps :center="{ lat: -33.885, lng: 151.225 }" :zoom="13">
    <ScriptGoogleMapsGeoJson :src="geoJson" :style="geoJsonStyle" />
  </ScriptGoogleMaps>
</template>

Remote URL

<script setup lang="ts">
const geoJsonStyle = {
  fillColor: '#34a853',
  fillOpacity: 0.2,
  strokeWeight: 1,
}
</script>

<template>
  <ScriptGoogleMaps :center="{ lat: -33.885, lng: 151.225 }" :zoom="10">
    <ScriptGoogleMapsGeoJson
      src="https://example.com/boundaries.geojson"
      :style="geoJsonStyle"
    />
  </ScriptGoogleMaps>
</template>
Edit this page
Markdown For LLMs

Example: Markers & Info Windows

Example: Marker Clustering