Google Map Highlight the Path on Drag in the Route

Question

I'm using react js for implementing this map. By default, I will have one route in Google maps that will be colored red. In the same route, I need to highlight some specific path that will be highlighted in black, like this:

On the right side of the image, there will be one pen icon. When I click on the icon, I need to highlight the specific path on the red line only. The highlight path will be in black as per image is shown. Then I need to calculate the distance of highlighted path based on the default path.

Note: The default route path starts and ends at the same point, and the start point is indicated with a flag icon. The start and end point will not be the same at a time. They will change base on user response.

class MappedRoutes extends React.Component {
  constructor(props) {
    super(props);

    this.drawFreeHand = this.drawFreeHand.bind(this);
  }
  componentDidMount() {
    const routeCoordinatesArr = [];
    map(routeMapped.route.routeCoordinates, el => {
      routeCoordinatesArr.push({
        lat: parseFloat(el.lat),
        lng: parseFloat(el.lng)
      });
    });
    this.mapLocation(routeCoordinatesArr);
  }

  mapLocation(routecoordinates) {
    let currentMarker;
let snapToRoute;
this.map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: routecoordinates[0].lat, lng: routecoordinates[0].lng },
  minZoom: 3,
  zoom: 14,
  disableDoubleClickZoom: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
});

// Google map direction service for draw routes
const flightPath = new google.maps.Polyline({
  path: routecoordinates,
  geodisc: true,
  avoidTolls: true,
  strokeColor: '#db3eb1',
  strokeOpacity: 1,
  strokeWeight: 3,
});

flightPath.setMap(this.map);

google.maps.event.addDomListener(flightPath, 'click', evt => {
  currentMarker = new google.maps.Marker({
    position: evt.latLng,
    map: this.map,
    draggable: true,
    icon: iconPencile,
  });
  const snapToRoute = new SnapToRoute(this.map, currentMarker, flightPath);
  this.drawFreeHand(currentMarker);
});
  }


    drawFreeHand(marker) {
    const { highlightValue } = this.props;
    const path = new google.maps.MVCArray();
    const service = new google.maps.DirectionsService();
    const polyline = new google.maps.Polyline({
      map: this.map,
      fillColor: '#ffd83c',
      fillOpacity: 0.8,
      strokeColor: '#ffd83c',
      strokeOpacity: 0.8,
      strokeWeight: 5,
      clickable: false,
      editable: false,
    });
    google.maps.event.addListener(marker, 'drag', event => {
      if (path.getLength() === 0) {
        path.push(event.latLng);
        polyline.setPath(path);
      } else {
        service.route(
          {
            origin: path.getAt(path.getLength() - 1),
            destination: event.latLng,
            travelMode: google.maps.DirectionsTravelMode.WALKING,
          },
          (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
              for (let i = 0, len = result.routes[0].overview_path.length; i < len; i += 1) {
                path.push(result.routes[0].overview_path[i]);
              }
            }
          }
        );
      }
    });
  }
  render() {
    return (
      <div>
        <div onClick={this.drawFreeHand}>click to highlight</div>
        <div id="map" style={{ height: "500px" }} />
      </div>
    );
  }
}
export default MappedRoutes;

My sample response:

export const routeMapped = {
  route: {
    routeId: "5a278bbfc9e77c0001cdf76d",
    athleteId: "59d62dc0c9e77c0001ee60f5",
    name: "Sathya new route",
    city:
      "105, Pasumpon Muthuramalinga Thevar Rd, RA Puram, Austin Nagar, Alwarpet, Chennai, Tamil Nadu 600028, India",
    postalCode: "600028",
    footPath: "FOLLOW",
    routeType: "MAP",
    routeCoordinates: [
      {
        lat: "13.02757",
        lng: "80.25241000000001",
        dis: 0,
        ele: 11.04315
      },
      {
        lat: "13.027460000000001",
        lng: "80.25280000000001",
        dis: 0.03,
        ele: 11.61113
      },
      {
        lat: "13.02724",
        lng: "80.25385",
        dis: 0.1,
        ele: 13
      },
      {
        lat: "13.027190000000001",
        lng: "80.25404",
        dis: 0.11,
        ele: 13
      },
      {
        lat: "13.02715",
        lng: "80.25410000000001",
        dis: 0.12,
        ele: 13
      },
      {
        lat: "13.02715",
        lng: "80.25423",
        dis: 0.13,
        ele: 13
      },
      {
        lat: "13.0271",
        lng: "80.25593",
        dis: 0.24,
        ele: 10.75041
      },
      {
        lat: "13.027090000000001",
        lng: "80.25710000000001",
        dis: 0.32,
        ele: 10.75639
      },
      {
        lat: "13.027070000000002",
        lng: "80.25792000000001",
        dis: 0.37,
        ele: 11.9969
      },
      {
        lat: "13.027080000000002",
        lng: "80.25885000000001",
        dis: 0.44,
        ele: 11.54305
      },
      {
        lat: "13.0271",
        lng: "80.25989000000001",
        dis: 0.51,
        ele: 7.42083
      },
      {
        lat: "13.02706",
        lng: "80.26016000000001",
        dis: 0.53,
        ele: 7.69134
      },
      {
        lat: "13.02697",
        lng: "80.26058",
        dis: 0.56,
        ele: 8.78328
      },
      {
        lat: "13.02683",
        lng: "80.26158000000001",
        dis: 0.62,
        ele: 10.39793
      },
      {
        lat: "13.02677",
        lng: "80.26199000000001",
        dis: 0.65,
        ele: 10.99504
      },
      {
        lat: "13.02663",
        lng: "80.26337000000001",
        dis: 0.75,
        ele: 10.00481
      },
      {
        lat: "13.02649",
        lng: "80.26448",
        dis: 0.82,
        ele: 9.75728
      },
      {
        lat: "13.02626",
        lng: "80.26591",
        dis: 0.92,
        ele: 7.33569
      },
      {
        lat: "13.025620000000002",
        lng: "80.26547000000001",
        dis: 0.97,
        ele: 8.88202
      },
      {
        lat: "13.025440000000001",
        lng: "80.26535000000001",
        dis: 0.99,
        ele: 9.03837
      },
      {
        lat: "13.02491",
        lng: "80.26495000000001",
        dis: 1.03,
        ele: 8.40581
      },
      {
        lat: "13.02424",
        lng: "80.26446",
        dis: 1.09,
        ele: 9
      },
      {
        lat: "13.024090000000001",
        lng: "80.26441000000001",
        dis: 1.1,
        ele: 9
      },
      {
        lat: "13.024030000000002",
        lng: "80.26439",
        dis: 1.1,
        ele: 9
      },
      {
        lat: "13.023560000000002",
        lng: "80.26417000000001",
        dis: 1.14,
        ele: 8.94518
      },
      {
        lat: "13.022110000000001",
        lng: "80.26336",
        dis: 1.25,
        ele: 7.18578
      },
      {
        lat: "13.02162",
        lng: "80.26315000000001",
        dis: 1.29,
        ele: 7.92565
      },
      {
        lat: "13.02148",
        lng: "80.26303",
        dis: 1.3,
        ele: 7.95145
      },
      {
        lat: "13.02078",
        lng: "80.26280000000001",
        dis: 1.35,
        ele: 7.69057
      },
      {
        lat: "13.020320000000002",
        lng: "80.26270000000001",
        dis: 1.39,
        ele: 7.16353
      },
      {
        lat: "13.02012",
        lng: "80.26257000000001",
        dis: 1.4,
        ele: 7.14811
      },
      {
        lat: "13.01997",
        lng: "80.26243000000001",
        dis: 1.42,
        ele: 7.25697
      },
      {
        lat: "13.01965",
        lng: "80.2621",
        dis: 1.45,
        ele: 7.20241
      },
      {
        lat: "13.01913",
        lng: "80.26159000000001",
        dis: 1.5,
        ele: 7.5177
      },
      {
        lat: "13.019020000000001",
        lng: "80.26153000000001",
        dis: 1.51,
        ele: 7.6779
      },
      {
        lat: "13.018910000000002",
        lng: "80.26142",
        dis: 1.52,
        ele: 7.83809
      },
      {
        lat: "13.0187",
        lng: "80.26121",
        dis: 1.54,
        ele: 8.12365
      },
      {
        lat: "13.0187",
        lng: "80.26088",
        dis: 1.56,
        ele: 8.05447
      },
      {
        lat: "13.01866",
        lng: "80.25992000000001",
        dis: 1.62,
        ele: 8.20218
      },
      {
        lat: "13.018630000000002",
        lng: "80.25916000000001",
        dis: 1.68,
        ele: 8.21478
      },
      {
        lat: "13.018640000000001",
        lng: "80.25892",
        dis: 1.69,
        ele: 8.12121
      },
      {
        lat: "13.01862",
        lng: "80.25861",
        dis: 1.71,
        ele: 8.0189
      },
      {
        lat: "13.01861",
        lng: "80.25818000000001",
        dis: 1.74,
        ele: 7.84774
      },
      {
        lat: "13.018650000000001",
        lng: "80.25779",
        dis: 1.77,
        ele: 7.78325
      },
      {
        lat: "13.018680000000002",
        lng: "80.25767",
        dis: 1.78,
        ele: 7.82694
      },
      {
        lat: "13.018730000000001",
        lng: "80.25754",
        dis: 1.79,
        ele: 7.89976
      },
      {
        lat: "13.01895",
        lng: "80.25705",
        dis: 1.82,
        ele: 8.44032
      },
      {
        lat: "13.019480000000001",
        lng: "80.25598000000001",
        dis: 1.9,
        ele: 9.23848
      },
      {
        lat: "13.019870000000001",
        lng: "80.25523000000001",
        dis: 1.96,
        ele: 9.76589
      },
      {
        lat: "13.02006",
        lng: "80.25477000000001",
        dis: 1.99,
        ele: 9.48015
      },
      {
        lat: "13.020320000000002",
        lng: "80.25369",
        dis: 2.07,
        ele: 8.90729
      },
      {
        lat: "13.020430000000001",
        lng: "80.25333",
        dis: 2.1,
        ele: 8.383
      },
      {
        lat: "13.02053",
        lng: "80.25319",
        dis: 2.11,
        ele: 8.17911
      },
      {
        lat: "13.020690000000002",
        lng: "80.2531",
        dis: 2.12,
        ele: 8.04804
      },
      {
        lat: "13.02091",
        lng: "80.25304000000001",
        dis: 2.14,
        ele: 7.95772
      },
      {
        lat: "13.02153",
        lng: "80.25297",
        dis: 2.18,
        ele: 7.72059
      },
      {
        lat: "13.021700000000001",
        lng: "80.25295000000001",
        dis: 2.19,
        ele: 7.7359
      },
      {
        lat: "13.02213",
        lng: "80.25287",
        dis: 2.22,
        ele: 7.91471
      },
      {
        lat: "13.024360000000001",
        lng: "80.25274",
        dis: 2.37,
        ele: 10
      },
      {
        lat: "13.02448",
        lng: "80.25274",
        dis: 2.38,
        ele: 10
      },
      {
        lat: "13.024630000000002",
        lng: "80.25276000000001",
        dis: 2.39,
        ele: 10
      },
      {
        lat: "13.025210000000001",
        lng: "80.25299000000001",
        dis: 2.44,
        ele: 10.37474
      },
      {
        lat: "13.02682",
        lng: "80.25375000000001",
        dis: 2.56,
        ele: 12.67804
      },
      {
        lat: "13.02715",
        lng: "80.25383000000001",
        dis: 2.58,
        ele: 13
      },
      {
        lat: "13.02724",
        lng: "80.25385",
        dis: 2.59,
        ele: 13
      },
      {
        lat: "13.027320000000001",
        lng: "80.25341",
        dis: 2.62,
        ele: 12.49951
      },
      {
        lat: "13.02753",
        lng: "80.25256",
        dis: 2.68,
        ele: 11.2616
      },
      {
        lat: "13.02757",
        lng: "80.25241000000001",
        dis: 2.69,
        ele: 11.04315
      }
    ],
    distance: 2.69,
    maxElevation: 0,
    minElevation: 0,
    startingLocation: {
      type: "ENTRY",
      coordinates: ["13.02757", "80.25241000000001"]
    },
    endingLocation: {
      type: "EXIT",
      coordinates: ["13.02757", "80.25241000000001"]
    },
    split: [
      {
        id: 1,
        splitNo: 1,
        splitDistance: 2.69,
        splitMarkers: {
          markerType: "ENTRY",
          markerId: "1",
          startPosLat: "13.02757",
          startPosLang: "80.25241000000001",
          endPosLat: "13.02757",
          endPosLang: "80.25241000000001"
        }
      }
    ],
    laps: 1,
    createdDatetime: null,
    updatedDatetime: null
  }
};

Instead of creating the new path from the coordinates of the cursor you should create it from the coordinates of the original path. — Titus, Jan 07 '18 at 08:25
What is the `drawFreeHand` function for? Every question/answer I have seen that in was drawing a "free hand" polyline ( or polygon). Seems to me you are looking to "snap" the mouse position to your "route polyline", then overlay the route polyline with another one (from it's start to the snapped point). — geocodezip, Jan 08 '18 at 04:14
@geocodezip `drawFreeHand` is a click function, when i trigger only i can able to highlight the route, i can highlight the route where ever i want — , Jan 08 '18 at 04:40
That image was in your question. Are you indicating the red line was from the `drawFreehand` function? You question indicated that was the "Icon click event". Perhaps you could describe your issue better, it is hard to tell what your question is and what your use case/problem is from the question as currently written. — geocodezip, Jan 08 '18 at 05:01
@geocodezip red line indicates the highlighted distance tooltip, `drawFreehand` is a click function when I click on it only I can able to draw the yellow line on the default polyline route. — , Jan 08 '18 at 05:09
@geocodezip sorry, Let me explain the scenario as per image. By default, a polyline is printed in the route. In the image right side, there will be two icons, when u click on the second one I can able to highlight the default route, highlighted route will be yellow color polyline. this what I need to do on my map — , Jan 08 '18 at 05:21
Yes, a solution is possible, what does your code to do that look like? — geocodezip, Jan 08 '18 at 13:48
My earlier reply stands: Seems to me you are looking to "snap" the mouse position to your "route polyline", then overlay the route polyline with another one (from it's start to the snapped point). — geocodezip, Jan 09 '18 at 05:24
Yes (as I said before), it is possible to do that. Currently your question is too broad for SO, which part are you having trouble with? (drawing the route polyline, snapping the "pencil" to the route, drawing the polyline up to the vertex before the snapped point, adding the snapped point to that)? Please provide a [mcve] that demonstrates that issue. — geocodezip, Jan 09 '18 at 13:35
@geocodezip thanks for your reply right now I having problem with this ( snapping the "pencil" to the route, drawing the polyline up to the vertex before the snapped point, adding the snapped point) — , Jan 09 '18 at 15:32
@geocodezip is it possible to add another overlay polyline on click event with this https://stackoverflow.com/questions/31816185/google-maps-api-v3-draggable-marker-along-a-polyline — , Jan 11 '18 at 05:49
@geocodezip i had updated my code I got the solution but I having one problem, snapToRoute is not working properly. "overly polyline" not coming on "route polyline" and it too hard to draw line — , Jan 11 '18 at 10:53
That sounds like you should post your answer to this question and ask a new question (I don't understand the issue from your comment).. — geocodezip, Jan 14 '18 at 16:34

score 2 · Answer 1 · answered Jun 05 '18 at 21:15

Will this help you?

There were some abilities to Drawing on the Map https://developers.google.com/maps/documentation/javascript/overlays

Maybe this action will help you

There is a section Custom Overlays

https://developers.google.com/maps/documentation/javascript/customoverlays

Which is using OverlayView

The examples you can find here https://developers.google.com/maps/documentation/javascript/customoverlays

Also, there is the second way you can try Simple Polylines https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

Here is the part of example

<script>

      // This example creates a 2-pixel-wide red polyline showing the path of
      // the first trans-Pacific flight between Oakland, CA, and Brisbane,
      // Australia which was made by Charles Kingsford Smith.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 0, lng: -180},
          mapTypeId: 'terrain'
        });

        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(map);
      }
    </script>

score 0 · Answer 2 · answered Mar 20 '19 at 08:56

    // You need to have a polyline, 

    var poly = new google.maps.Polyline({
      map: _map,
      strokeColor: '#000',
      strokeWeight: 2,
      strokeOpacity: 0.8,
      clickable: false
    });

    // Then you have to add a listener, This will add points to polyline as you drag cursor

    var move = google.maps.event.addListener(_map, 'mousemove', function (e) {
      poly.getPath().push(e.latLng);
    });

    // on mouseup add this,
    google.maps.event.addListenerOnce(_map, 'mouseup', function (e) {
      google.maps.event.removeListener(move);
      var path = poly.getPath();
      poly.setMap(null);
      var polygon = new google.maps.Polygon({
        map: _map,
        path: path,
        strokeColor: '#000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#000',
        fillOpacity: 0
      });
    });              



  /* 
    Note:
    During dragging, you must temporarily make the map non draggable. This can be done 
    by setting draggable as false 
  */

Google Map Highlight the Path on Drag in the Route

2 Answers2