Skip to main content
The Polyline component draws a series of connected line segments on the map. Both Polyline and PolylineF variants are available and functionally identical.

​
Import

import { Polyline } from '@react-google-maps/api'
// or
import { PolylineF } from '@react-google-maps/api'

​
Basic Usage

import { GoogleMap, Polyline } from '@react-google-maps/api'

function MyMap() {
  const path = [
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7580, lng: -73.9855 },
    { lat: 40.7489, lng: -73.9680 }
  ]

  return (
    <GoogleMap
      center={{ lat: 40.7489, lng: -73.9680 }}
      zoom={12}
    >
      <Polyline path={path} />
    </GoogleMap>
  )
}

​
Props

​
path
google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]
The ordered sequence of coordinates of the polyline.Example: [{ lat: 40.7128, lng: -74.0060 }, { lat: 40.7580, lng: -73.9855 }]
​
options
google.maps.PolylineOptions
Additional polyline options including stroke color, weight, opacity, etc.
​
draggable
boolean
Whether the polyline can be dragged by the user.Default: false
​
editable
boolean
Whether the polyline can be edited by dragging control points.Default: false
​
visible
boolean
Whether the polyline is visible.Default: true

​
Events

​
onClick
(e: google.maps.MapMouseEvent) => void
Fired when the polyline is clicked.
​
onDblClick
(e: google.maps.MapMouseEvent) => void
Fired when the polyline is double-clicked.
​
onDrag
(e: google.maps.MapMouseEvent) => void
Fired repeatedly while the polyline is being dragged.
​
onDragStart
(e: google.maps.MapMouseEvent) => void
Fired when dragging starts.
​
onDragEnd
(e: google.maps.MapMouseEvent) => void
Fired when dragging ends.
​
onMouseMove
(e: google.maps.MapMouseEvent) => void
Fired when the mouse moves over the polyline.
​
onMouseOver
(e: google.maps.MapMouseEvent) => void
Fired when the mouse enters the polyline.
​
onMouseOut
(e: google.maps.MapMouseEvent) => void
Fired when the mouse leaves the polyline.
​
onMouseDown
(e: google.maps.MapMouseEvent) => void
Fired when the mouse button is pressed on the polyline.
​
onMouseUp
(e: google.maps.MapMouseEvent) => void
Fired when the mouse button is released on the polyline.
​
onRightClick
(e: google.maps.MapMouseEvent) => void
Fired when the polyline is right-clicked.
​
onLoad
(polyline: google.maps.Polyline) => void
Callback invoked when the polyline instance has loaded.
​
onUnmount
(polyline: google.maps.Polyline) => void
Callback invoked when the polyline is unmounted.

​
Examples

​
Styled Polyline

import { Polyline } from '@react-google-maps/api'

function StyledPolyline() {
  const path = [
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7580, lng: -73.9855 },
    { lat: 40.7489, lng: -73.9680 }
  ]

  const options = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 4,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
  }

  return <Polyline path={path} options={options} />
}

​
Editable Polyline

import { useState } from 'react'
import { Polyline } from '@react-google-maps/api'

function EditablePolyline() {
  const [path, setPath] = useState([
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7580, lng: -73.9855 },
    { lat: 40.7489, lng: -73.9680 }
  ])

  return (
    <Polyline
      path={path}
      editable={true}
      draggable={true}
      onLoad={(polyline) => {
        console.log('Polyline loaded:', polyline)
      }}
    />
  )
}

​
Dashed Polyline

<Polyline
  path={[
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7580, lng: -73.9855 }
  ]}
  options={{
    strokeColor: '#0000FF',
    strokeOpacity: 0,
    strokeWeight: 2,
    icons: [{
      icon: {
        path: 'M 0,-1 0,1',
        strokeOpacity: 1,
        scale: 4
      },
      offset: '0',
      repeat: '20px'
    }]
  }}
/>

​
Interactive Route

import { useState } from 'react'
import { GoogleMap, Polyline } from '@react-google-maps/api'

function InteractiveRoute() {
  const [hovering, setHovering] = useState(false)
  
  const route = [
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7580, lng: -73.9855 },
    { lat: 40.7489, lng: -73.9680 }
  ]

  return (
    <GoogleMap center={route[1]} zoom={12}>
      <Polyline
        path={route}
        options={{
          strokeColor: hovering ? '#00FF00' : '#FF0000',
          strokeWeight: hovering ? 6 : 4,
          strokeOpacity: 0.8
        }}
        onMouseOver={() => setHovering(true)}
        onMouseOut={() => setHovering(false)}
        onClick={(e) => {
          console.log('Clicked at:', e.latLng?.toJSON())
        }}
      />
    </GoogleMap>
  )
}

​
Gradient Polyline

<Polyline
  path={[
    { lat: 40.7128, lng: -74.0060 },
    { lat: 40.7580, lng: -73.9855 },
    { lat: 40.7489, lng: -73.9680 }
  ]}
  options={{
    strokeColor: 'transparent',
    strokeOpacity: 1,
    strokeWeight: 6,
    icons: [{
      icon: {
        path: 'M 0,-1 0,1',
        strokeOpacity: 1,
        strokeColor: '#667eea',
        scale: 4
      },
      offset: '0',
      repeat: '10px'
    }]
  }}
/>

​
Flight Path with Arrow

<Polyline
  path={[
    { lat: 40.7128, lng: -74.0060 },
    { lat: 51.5074, lng: -0.1278 }
  ]}
  options={{
    geodesic: true,
    strokeColor: '#0066FF',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    icons: [{
      icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        scale: 3,
        strokeColor: '#0066FF'
      },
      offset: '100%'
    }]
  }}
/>

​
Dynamic Path Update

import { useState, useEffect } from 'react'
import { Polyline } from '@react-google-maps/api'

function DynamicPath() {
  const [path, setPath] = useState([
    { lat: 40.7128, lng: -74.0060 }
  ])

  useEffect(() => {
    const interval = setInterval(() => {
      setPath((current) => [
        ...current,
        {
          lat: current[current.length - 1].lat + 0.01,
          lng: current[current.length - 1].lng + 0.01
        }
      ])
    }, 1000)

    return () => clearInterval(interval)
  }, [])

  return (
    <Polyline
      path={path}
      options={{
        strokeColor: '#FF0000',
        strokeWeight: 3
      }}
    />
  )
}

​
Common Options

The options prop accepts a google.maps.PolylineOptions object with properties including:
  • strokeColor - Line color (hex string)
  • strokeWeight - Line width in pixels
  • strokeOpacity - Line opacity (0.0 - 1.0)
  • geodesic - Whether the line follows the curvature of the Earth
  • icons - Array of icon definitions for custom line styles
  • zIndex - Stack order of the polyline

​
Component Variants

Both Polyline and PolylineF are available and functionally identical:
  • Polyline - Default export
  • PolylineF - Functional component variant (same implementation)
import { Polyline } from '@react-google-maps/api'
// or
import { PolylineF } from '@react-google-maps/api'

Build docs developers (and LLMs) love

Get started for freeTalk to us