Api
<ScriptGoogleMapsPolyline>
Line path overlay on the map. Place it inside a <ScriptGoogleMaps> component. Its options map to google.maps.PolylineOptions.
optionsOmit<google.maps.PolylineOptions, 'map'>Configuration options for the polyline overlay.
Usage
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsPolyline
:options="{
path: [
{ lat: -34.397, lng: 150.644 },
{ lat: -34.407, lng: 150.654 },
{ lat: -34.417, lng: 150.634 },
],
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
}"
/>
</ScriptGoogleMaps>
</template>
Geodesic Line
Set geodesic: true to follow the curvature of the Earth. On a long route, this avoids drawing a straight screen-space line between the endpoints.
<template>
<ScriptGoogleMaps
api-key="your-api-key"
:map-options="{
center: { lat: 0, lng: 130 },
zoom: 3,
}"
>
<ScriptGoogleMapsPolyline
:options="{
path: [
{ lat: -33.8688, lng: 151.2093 },
{ lat: 34.0522, lng: -118.2437 },
],
geodesic: true,
strokeColor: '#4285F4',
strokeWeight: 3,
}"
/>
</ScriptGoogleMaps>
</template>
Dashed Line
Use icons with symbol paths to create dashed or dotted lines.
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsPolyline
:options="{
path: [
{ lat: -34.397, lng: 150.644 },
{ lat: -34.417, lng: 150.664 },
],
strokeOpacity: 0,
icons: [{
icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 },
offset: '0',
repeat: '20px',
}],
}"
/>
</ScriptGoogleMaps>
</template>
Editable Polyline
<template>
<ScriptGoogleMaps api-key="your-api-key">
<ScriptGoogleMapsPolyline
:options="{
path: [
{ lat: -34.397, lng: 150.644 },
{ lat: -34.407, lng: 150.654 },
{ lat: -34.417, lng: 150.634 },
],
editable: true,
strokeColor: '#34a853',
strokeWeight: 3,
}"
@click="(e) => console.log('Clicked at vertex', e.vertex)"
/>
</ScriptGoogleMaps>
</template>
Mouse events emit google.maps.PolyMouseEvent which includes the vertex and edge indices for the clicked segment. The options prop is deeply reactive.