Api
<ScriptGoogleMapsCircle>
Circular overlay on the map. Place inside a <ScriptGoogleMaps> component.
optionsOmit<google.maps.CircleOptions, 'map'>Configuration options for the circle overlay.
Usage
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsCircle
:options="{
center: { lat: -34.397, lng: 150.644 },
radius: 1000,
fillColor: '#FF0000',
fillOpacity: 0.35,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
}"
/>
</ScriptGoogleMaps>
</template>
Editable & Draggable
Allow users to resize or reposition the circle interactively.
<script setup lang="ts">
function onRadiusChanged() {
console.log('Radius changed')
}
function onCenterChanged() {
console.log('Center changed')
}
</script>
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsCircle
:options="{
center: { lat: -34.397, lng: 150.644 },
radius: 1000,
editable: true,
draggable: true,
fillColor: '#4285F4',
fillOpacity: 0.2,
}"
@radius_changed="onRadiusChanged"
@center_changed="onCenterChanged"
/>
</ScriptGoogleMaps>
</template>
Click Events
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsCircle
:options="{
center: { lat: -34.397, lng: 150.644 },
radius: 500,
clickable: true,
fillColor: '#34a853',
fillOpacity: 0.3,
}"
@click="(e) => console.log('Clicked at', e.latLng?.toJSON())"
/>
</ScriptGoogleMaps>
</template>
The
options prop is deeply reactive. Updating it calls circle.setOptions() under the hood, so you can dynamically change radius, color, or position without remounting the component.