Api
<ScriptGoogleMapsPolygon>
Polygon shape overlay on the map. Place inside a <ScriptGoogleMaps> component.
optionsOmit<google.maps.PolygonOptions, 'map'>Configuration options for the polygon overlay.
Usage
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsPolygon
:options="{
paths: [
{ lat: -34.397, lng: 150.644 },
{ lat: -34.407, lng: 150.654 },
{ lat: -34.417, lng: 150.634 },
],
fillColor: '#0000FF',
fillOpacity: 0.3,
strokeWeight: 2,
}"
/>
</ScriptGoogleMaps>
</template>
Polygon with Hole
Pass an array of arrays to paths to cut holes in the polygon. The first array defines the outer boundary; subsequent arrays define holes.
<template>
<ScriptGoogleMaps api-key="your-api-key" :center="{ lat: -34.404, lng: 150.644 }" :zoom="14">
<ScriptGoogleMapsPolygon
:options="{
paths: [
[
{ lat: -34.390, lng: 150.630 },
{ lat: -34.390, lng: 150.660 },
{ lat: -34.420, lng: 150.660 },
{ lat: -34.420, lng: 150.630 },
],
[
{ lat: -34.400, lng: 150.640 },
{ lat: -34.400, lng: 150.650 },
{ lat: -34.410, lng: 150.650 },
{ lat: -34.410, lng: 150.640 },
],
],
fillColor: '#FF0000',
fillOpacity: 0.35,
strokeWeight: 2,
}"
/>
</ScriptGoogleMaps>
</template>
Editable Polygon
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsPolygon
:options="{
paths: [
{ lat: -34.397, lng: 150.644 },
{ lat: -34.407, lng: 150.654 },
{ lat: -34.417, lng: 150.634 },
],
editable: true,
draggable: true,
fillColor: '#4285F4',
fillOpacity: 0.2,
}"
@click="(e) => console.log('Clicked at', e.latLng?.toJSON())"
/>
</ScriptGoogleMaps>
</template>
Mouse events emit
google.maps.PolyMouseEvent which includes vertex, edge, and path indices, so you can identify exactly which part of the polygon geometry was clicked. The options prop is deeply reactive.