Use polyline in google-maps-react?

Question

I am using google-maps-react in my react program.
Is there any way to draw polyline between the plotted markers
any in-bulid method to make line between the markers

try this https://tomchentw.github.io/react-google-maps/#directionsrenderer just a suggestion tho. — Deee, Nov 23 '17 at 08:05
The OP mentions using `google-maps-react`, yet all the answers provided are for `react-google-maps`. Two different components. All the answers should be downvoted for not adhering to what the OP asked for. — Pegues, Apr 13 '22 at 20:37

score 1 · Answer 1 · answered Mar 06 '18 at 10:57

1

Import Polyline from react-google-maps and then inside your <GoogleMap></GoogleMap> place something like:

<Polyline 
  path={pathCoordinates} 
  options={{ 
  strokeColor: '#00ffff',
  strokeOpacity: 1,
  strokeWeight: 2,
  icons: [{ 
    icon: "hello",
    offset: '0',
    repeat: '10px'
  }],
}}
/>

And then pass some locations to pathCoordinates e.g.

pathCoordinates:[ 
  {lat:50, lng:1},
  {lat:50.1, lng:1.1},
]

answered Mar 06 '18 at 10:57

Will

19
3

4

but, how to add `Polyline ` on the fly? – simo Jun 03 '18 at 11:31

score 1 · Answer 2 · answered Jun 12 '18 at 15:55

yes you can all you need to do is add the points to your path inside the options.

<Polyline   geodesic={true}
            options={{
                path: props.route,
                strokeColor: '#00ffff',
                strokeOpacity: 1,
                strokeWeight: 6,
                icons: [{
                    offset: '0',
                    repeat: '10px'
                }],
            }}
 />

where props.route looks something like this

[   
    {"lat": 3.028846373870724, "lng": 101.62019493865353},
    {"lat": 3.0293392107899226, "lng": 101.62000181960445},
    {"lat": 3.0297677644503347, "lng": 101.61980870055538},
    {"lat": 3.0301963179410842, "lng": 101.61967995452267},
    {"lat": 3.0307105819060256, "lng": 101.6194868354736},
    {"lat": 3.0319319578431805, "lng": 101.61916497039181}
]

Use polyline in google-maps-react?

2 Answers2