Polyline / PolylineF
The Polyline component draws a line consisting of an ordered sequence of coordinates on the map. Both Polyline and PolylineF are available - they are functionally identical.
Props
options
google.maps.PolylineOptions
Polyline options object.
path
google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]
The ordered sequence of coordinates of the polyline.
Whether the polyline can be dragged.
Whether the polyline is editable by users.
Whether the polyline is visible.
Event Handlers
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.
onDragEnd
(e: google.maps.MapMouseEvent) => void
Fired when dragging the polyline ends.
onDragStart
(e: google.maps.MapMouseEvent) => void
Fired when the user starts dragging the polyline.
onMouseDown
(e: google.maps.MapMouseEvent) => void
Fired when mouse button is pressed on the polyline.
onMouseMove
(e: google.maps.MapMouseEvent) => void
Fired when the mouse moves over the polyline.
onMouseOut
(e: google.maps.MapMouseEvent) => void
Fired when the mouse leaves the polyline area.
onMouseOver
(e: google.maps.MapMouseEvent) => void
Fired when the mouse enters the polyline area.
onMouseUp
(e: google.maps.MapMouseEvent) => void
Fired when mouse button is released on the polyline.
onRightClick
(e: google.maps.MapMouseEvent) => void
Fired when the polyline is right-clicked.
Lifecycle Callbacks
onLoad
(polyline: google.maps.Polyline) => void
Called when the polyline instance has loaded.
onUnmount
(polyline: google.maps.Polyline) => void
Called when the component unmounts.
Example
import { GoogleMap, Polyline } from '@react-google-maps/api';
function MyMap() {
const path: google.maps.LatLngLiteral[] = [
{ lat: 40.7128, lng: -74.0060 },
{ lat: 40.7580, lng: -73.9855 },
{ lat: 40.7489, lng: -73.9680 },
];
return (
<GoogleMap
center={path[0]}
zoom={12}
mapContainerStyle={{ width: '100%', height: '400px' }}
>
<Polyline
path={path}
options={{
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
}}
/>
</GoogleMap>
);
}
