Api
<ScriptGoogleMapsRectangle>
Rectangular overlay on the map. Place inside a <ScriptGoogleMaps> component.
optionsOmit<google.maps.RectangleOptions, 'map'>Configuration options for the rectangle overlay.
Usage
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsRectangle
:options="{
bounds: {
north: -34.387,
south: -34.407,
east: 150.664,
west: 150.624,
},
fillColor: '#00FF00',
fillOpacity: 0.25,
strokeWeight: 2,
}"
/>
</ScriptGoogleMaps>
</template>
Editable & Draggable
Allow users to resize or reposition the rectangle interactively.
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsRectangle
:options="{
bounds: {
north: -34.387,
south: -34.407,
east: 150.664,
west: 150.624,
},
editable: true,
draggable: true,
fillColor: '#4285F4',
fillOpacity: 0.15,
}"
@bounds_changed="() => console.log('Bounds changed')"
@click="(e) => console.log('Clicked at', e.latLng?.toJSON())"
/>
</ScriptGoogleMaps>
</template>
The
options prop is deeply reactive. Updating it calls rectangle.setOptions() under the hood, so you can dynamically change bounds, colors, or editability without remounting.