React-google-maps: How can polilines be plotted?

[tahir-masood1]

I am trying to integrate your resource into my react app and I must say its very helpful resource. I further want to draw a poli line to two lat/long points on the map. Can you help me in this regard,

[tomchentw]

See this example. https://developers.google.com/maps/documentation/javascript/examples/polyline-simple
Just make flightPlanCoordinates with two items instead of 4. Then convert this example into react-google-maps component.

[pirate]

Not working for me, I'm getting InvalidValueError: setMap: not an instance of Map.

window.renderFlights = function() {
    var flightPlanCoordinates = [
        {lat: 37.772, lng: -122.214},
        {lat: 21.291, lng: -157.821},
        {lat: -18.142, lng: 178.431},
        {lat: -27.467, lng: 153.027}
    ]
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    })

    flightPath.setMap(window.map)
}

<GoogleMap ref={(map) => {window.map = map; window.renderFlights()}}></GoogleMap>

I have checked that window.map == GoogleMap, and have also tried calling renderFlights manually after the map is mounted and window.map is confirmed to be set.

[davidalee]

Try flightPath.setMap(window.map.props.map) instead. window.map is referring to the <GoogleMap> component, whereas the actual google maps ref is stored in props.

[tomchentw]

Close for now.

We're also looking for maintainers. Involve in #266 to help strengthen our community!