How to curve a Polyline in react-google-maps?

Question

I'm new to React and have been playing around with the react-google-maps package. I'm trying to curve a Polyline that joins two places. After going through the documentation, I'm trying to incorporate the curve polyline function under the 'editable' prop.

Here's the function to curve the polyline:

var map;
var curvature = 0.4; // Arc of the Polyline

function init() {
        var Map = google.maps.Map,
            LatLng = google.maps.LatLng,
            LatLngBounds = google.maps.LatLngBounds,
            Marker = google.maps.Marker,
            Point = google.maps.Point;

            // Initial location of the points
            var pos1 = new LatLng(this.state.srcMarker);
            var pos2 = new LatLng(this.state.desMarker);

            var bounds = new LatLngBounds();
            bounds.extend(pos1);
            bounds.extend(pos2);

            map = new Map(document.getElementById('map-canvas'), {
                    center: bounds.getCenter(),
                    zoom: 12
            });
            map.fitBounds(bounds);

            var markerP1 = new Marker({
                    position: pos1,
                    map: map
            });
            var markerP2 = new Marker({
                    position: pos2,
                    map: map
            });

            var curveMarker;

            function updateCurveMarker() {
                    var pos1 = markerP1.getPosition(), 
                    pos2 = markerP2.getPosition(),
                    projection = map.getProjection(),
                    p1 = projection.fromLatLngToPoint(pos1), 
                    p2 = projection.fromLatLngToPoint(pos2);

                    // Calculating the arc.
                    var e = new Point(p2.x - p1.x, p2.y - p1.y), // endpoint
                        m = new Point(e.x / 2, e.y / 2), // midpoint
                        o = new Point(e.y, -e.x), // orthogonal
                        c = new Point( m.x + curvature * o.x, m.y + curvature * o.y); //curve control point

                    var pathDef = 'M 0,0 ' + 'q ' + c.x + ',' + c.y + ' ' + e.x + ',' + e.y;

                    var zoom = map.getZoom(),
                        scale = 1 / (Math.pow(2, -zoom));

                    var symbol = {
                            path: pathDef,
                            scale: scale,
                            strokeWeight: 1,
                            fillColor: 'none'
                    };

                    if (!curveMarker) {
                            curveMarker = new Marker({
                                    position: pos1,
                                    clickable: false,
                                    icon: symbol,
                                    zIndex: 0, // behind the other markers
                                    map: map
                            });
                    } else {
                            curveMarker.setOptions({
                                    position: pos1,
                                    icon: symbol,
                            });
                    }
            }

            google.maps.event.addListener(map, 'projection_changed', updateCurveMarker);
            google.maps.event.addListener(map, 'zoom_changed', updateCurveMarker);

            google.maps.event.addListener(markerP1, 'position_changed', updateCurveMarker);
            google.maps.event.addListener(markerP2, 'position_changed', updateCurveMarker);
    }

    google.maps.event.addDomListener(window, 'load', init);

I'm not able to understand how to use this function in the Polyline component. I'm able to mark a line between any two places, but not able to use this function in order to curve the given polyline. This is the Polyline component that I'm using.

<Polyline
        path={pathCoordinates} 
        geodesic={true} 
        options={{ 
                strokeColor: '#ff2527',
                        strokeOpacity: 1.0,
                        strokeWeight: 5,
        }}
/>

I have two markers in my state (srcMarker, desMarker) that store the coordinates of the given cities once the user inputs the city name. Any help would be appreciated in incorporating this function with the Polyline component. I haven't come across any built in feature that allows curving of the polyline. Thanks in advance!

Answer 1

I took the code you provided and adapted it to work with React and react-google-maps. Check out this CodeSandbox to see a simple application that contains two markers and a curved line between them.

The curved line that connects the two markers is actually a marker as well. The only difference between it and the two red markers is that its icon prop is set to the curved line (which is computed beforehand).

Here is the code for the CurveMarker component:

const CurveMarker = ({ pos1, pos2, mapProjection, zoom }) => {
  if (!mapProjection) return <div/>;
  var curvature = 0.4

  const p1 = mapProjection.fromLatLngToPoint(pos1),
        p2 = mapProjection.fromLatLngToPoint(pos2);

  // Calculating the arc.
  const e = new google.maps.Point(p2.x - p1.x, p2.y - p1.y), // endpoint
    m = new google.maps.Point(e.x / 2, e.y / 2), // midpoint
    o = new google.maps.Point(e.y, -e.x), // orthogonal
    c = new google.maps.Point(m.x + curvature * o.x, m.y + curvature * o.y); //curve control point

  const pathDef = 'M 0,0 ' + 'q ' + c.x + ',' + c.y + ' ' + e.x + ',' + e.y;

  const scale = 1 / (Math.pow(2, -zoom));

  const symbol = {
    path: pathDef,
    scale: scale,
    strokeWeight: 2,
    fillColor: 'none'
  };

  return <Marker 
            position={pos1} 
            clickable={false} 
            icon={symbol}
            zIndex={0}
          />;
};

Let me know if you have any questions.