---
title: "<ScriptGoogleMapsPolyline>"
description: "Draw reactive paths and routes on a Google map."
canonical_url: "https://scripts.nuxt.com/scripts/google-maps/api/polyline"
last_updated: "2026-10-11T11:20:20.468Z"
---

Line path overlay on the map. Place it inside a [`<ScriptGoogleMaps>`{lang="html"}](/scripts/google-maps/api/script-google-maps) component. Its options map to [`google.maps.PolylineOptions`](https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions).

::script-types{script-key="google-maps" filter="ScriptGoogleMapsPolyline"}
::

## Usage

```vue
<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.

```vue
<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](https://developers.google.com/maps/documentation/javascript/symbols#add_a_symbol_to_a_polyline) to create dashed or dotted lines.

```vue
<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

```vue
<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>
```

::callout
Mouse events emit `google.maps.PolyMouseEvent` which includes the `vertex` and `edge` indices for the clicked segment. The `options` prop is deeply reactive.
::

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.