Api
<ScriptGoogleMapsPolyline>
Line path overlay on the map. Place inside a <ScriptGoogleMaps> component.
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 render lines that follow the curvature of the Earth. Important for long distance routes where a straight pixel line would misrepresent the actual path.
<template>
<ScriptGoogleMaps api-key="your-api-key" :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.