v3-gmaps Docs

Rectangle (gmaps-rectangle)

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

Simple Use (demo) 

<template>
  <div style="height: 500px">
    <gmaps-map>
      <gmaps-rectangle :bounds="{ east: 145, north: -20, west: 132, south: -27 }" />
    </gmaps-map>
  </div>
</template>

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

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

Props

PropsTypeDefaultDescription
options*GmapsRectangleOptions-Object used to define the properties of a gmaps-rectangle.
boundsGmapsBounds-The bounds.
draggablebooleanfalseWhether this Rectangle can be dragged over the map.
editablebooleanfalseWhether this Rectangle can be edited by dragging the control points shown at the corners and on each edge.
visiblebooleantrueWhether this rectangle is visible on the map.

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

Events

EventTypeDescription
bounds_changedGmapsBoundsThis event is fired when the rectangle's bounds are changed.
clickGmapsPositionThis event is fired when the DOM click event is fired on the rectangle.
contextmenuGmapsPositionThis event is fired when the DOM contextmenu event is fired on the rectangle.
dblclickGmapsPositionThis event is fired when the DOM dblclick event is fired on the rectangle.
dragGmapsPositionThis event is repeatedly fired while the user drags the Rectangle.
dragendGmapsPositionThis event is fired when the user stops dragging the Rectangle.
dragstartGmapsPositionThis event is fired when the user starts dragging the Rectangle.
mountedgoogle.maps.RectangleOn mounted the component will emit the Google Maps object it represents.
mousedownGmapsPositionThis event is fired for a mousedown on the Rectangle.
mousemoveGmapsPositionThis event is fired for a mousemove on the Rectangle.
mouseoutGmapsPositionThis event is fired when the mouse leaves the area of the Rectangle.
mouseoverGmapsPositionThis event is fired when the mouse enters the area of the Rectangle.
mouseupGmapsPositionThis event is fired for a mouseup on the Rectangle.
rightclickGmapsPositionThis event is fired for a rightclick on the Rectangle.
unmountedgoogle.maps.RectangleOn unmounted the component will emit the Google Maps object it represents.

Notes