Api
<ScriptGoogleMapsPolygon>
Polygon shape overlay on the map. Place it inside a <ScriptGoogleMaps> component. Its options map to google.maps.PolygonOptions.
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. Google requires each inner path to use the opposite winding direction from the outer path.
<template>
<ScriptGoogleMaps
api-key="your-api-key"
:map-options="{
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.410, lng: 150.640 },
{ lat: -34.410, lng: 150.650 },
{ lat: -34.400, lng: 150.650 },
],
],
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>
Polygon mouse events emit google.maps.PolyMouseEvent. On editable geometry, its optional vertex, edge, and path indices identify the affected part of the path. The component watches the options prop deeply.