v3-gmaps Docs

Polyline (gmaps-polyline)

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

Simple Use (demo) 

<template>
  <div style="height: 500px">
    <gmaps-map>
      <gmaps-polyline :path="[{ lat: -28, lng: 125 }, { lat: -25, lng: 130 }, { lat: -32, lng: 120 }]" />
    </gmaps-map>
  </div>
</template>

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

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

Props

PropsTypeDefaultDescription
options*GmapsPolylineOptions-Object used to define the properties of a gmaps-polyline.
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.
pathGmapsPosition[]-The ordered sequence of coordinates of the Polyline.
visiblebooleantrueWhether this Circle is visible on the map.

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

Events

EventTypeDescription
clickGmapsPositionThis event is fired when the DOM click event is fired on the Polyline.
contextmenuGmapsPositionThis event is fired when the DOM contextmenu event is fired on the Polyline.
dblclickGmapsPositionThis event is fired when the DOM dblclick event is fired on the Polyline.
dragGmapsPositionThis event is repeatedly fired while the user drags the Polyline.
dragendGmapsPositionThis event is fired when the user stops dragging the Polyline.
dragstartGmapsPositionThis event is fired when the user starts dragging the Polyline.
mountedgoogle.maps.PolylineOn mounted the component will emit the Google Maps object it represents.
mousedownGmapsPositionThis event is fired for a mousedown on the Polyline.
mousemoveGmapsPositionThis event is fired for a mousemove on the Polyline.
mouseoutGmapsPositionThis event is fired for a mouseout on the Polylinee.
mouseoverGmapsPositionThis event is fired for a mouseover on the Polyline.
mouseupGmapsPositionThis event is fired for a mouseup on the Polyline.
path_changedGmapsPosition[]This event is fired when the Polyline's path is changed.
rightclickGmapsPositionThis event is fired for a rightclick on the Polyline.
unmountedgoogle.maps.PolylineOn unmounted the component will emit the Google Maps object it represents.

Notes