v3-gmaps Docs

Circle (gmaps-circle)

In addition to polylines, polygons, and rectangles you can also create circles on a map.

Simple Use (demo) 

<template>
  <div style="height: 500px">
    <gmaps-map>
      <gmaps-circle :center="{ lat: -28, lng: 125 }" :radius="500000" />
    </gmaps-map>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { gmapsMap, gmapsCircle } from 'v3-gmaps';

export default defineComponent({
  components: { gmapsMap, gmapsCircle },
});
</script>

Props

PropsTypeDefaultDescription
options*GmapsCircleOptions-Object used to define the properties of a gmaps-circle.
centerGmapsPosition-The center of the Circle.
draggablebooleanfalseWhether this Circle can be dragged over the map.
editablebooleanfalseWhether this Circle can be edited by dragging the control points shown at the center and around the circumference.
radiusnumber-The radius in meters on the Earth's surface.
visiblebooleantrueWhether this Circle is visible on the map.

* To see all of the possible options, have a look at the Google Maps MarkerOptions interface.

Events

EventTypeDescription
center_changedGmapsPositionThis event is fired when the circle's center is changed.
clickGmapsPositionThis event is fired when the DOM click event is fired on the Circle.
dblclickGmapsPositionThis event is fired when the DOM dblclick event is fired on the Circle.
dragGmapsPositionThis event is repeatedly fired while the user drags the Circle.
dragendGmapsPositionThis event is fired when the user stops dragging the Circle.
dragstartGmapsPositionThis event is fired when the user starts dragging the Circle.
mountedgoogle.maps.CircleOn mounted the component will emit the Google Maps object it represents.
mousedownGmapsPositionThis event is fired for a mousedown on the Circle.
mousemoveGmapsPositionThis event is fired for a mousemove on the Circle.
mouseoutGmapsPositionThis event is fired when the mouse leaves the area of the Circle.
mouseoverGmapsPositionThis event is fired when the mouse enters the area of the Circle.
mouseupGmapsPositionThis event is fired for a mouseup on the Circle.
radius_changednumberThis event is fired when the circle's radius is changed.
rightclickGmapsPositionThis event is fired for a rightclick on the Circle.
unmountedgoogle.maps.CircleOn unmounted the component will emit the Google Maps object it represents.

Notes

  • gmaps-circle has most of the properties and events Google Maps' Circle has.
  • There is no contextmenu event for the circle 😢
  • The circle is geodesic which means it projects itself on the map as if it is on a globe. You can see these effects by dragging a circle far North or South.