0

Image Polyline

Image Polyline

Legs Polyline

I have a Polyline between "Origin" and "Destination", in this Polyline I need to insert markers in a certain place ("Point"), I do this using the isLocationOnEdge () function.

But when there are Polylines adjacent to the point, I would like you to insert two markers, one for each leg.

I think I should use the isLocationOnEdge function on each Polyline leg, but I do not know how.

Here's my code:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(51.278617, 1.085603),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map,
    preserveViewport: true
  });
  directionsService.route({
    origin: new google.maps.LatLng(51.278895, 1.086608),
    destination: new google.maps.LatLng(51.279965, 1.086070),
    waypoints: [{
      stopover: false,
      location: new google.maps.LatLng(51.276895, 1.083861)
    }],
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      // directionsDisplay.setDirections(response);
      var polyline = new google.maps.Polyline({
        path: [],
        strokeColor: '#0000FF',
        strokeWeight: 3
      });
      var bounds = new google.maps.LatLngBounds();


      var legs = response.routes[0].legs;
      for (i = 0; i < legs.length; i++) {
        var steps = legs[i].steps;
        for (j = 0; j < steps.length; j++) {
          var nextSegment = steps[j].path;
          for (k = 0; k < nextSegment.length; k++) {
            polyline.getPath().push(nextSegment[k]);
            bounds.extend(nextSegment[k]);
          }
        }
      }

      polyline.setMap(map);
   
   var cordinatesPoint = { "lat" : "51.278045" , "lng" : "1.084899" };
   
   point = new google.maps.LatLng(cordinatesPoint.lat, cordinatesPoint.lng);
   
   if (google.maps.geometry.poly.isLocationOnEdge(point, polyline, 0.0001)) {
  var marker = new google.maps.Marker({
   position: new google.maps.LatLng(cordinatesPoint.lat, cordinatesPoint.lng),
   map: map,
   title: "Point",
   icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png",
  });
  alert("passed here");
   }else{
  alert("not passed");
   }
   
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>
Roteirize
  • 9
  • 2
  • related question: [snap a marker to a specific road](https://stackoverflow.com/questions/24515201/snap-a-marker-to-a-specific-road) – geocodezip Jan 10 '18 at 00:32
  • related question: [Google Maps API v3 - Draggable Marker Along a Polyline](https://stackoverflow.com/questions/31816185/google-maps-api-v3-draggable-marker-along-a-polyline) – geocodezip Jan 10 '18 at 00:38
  • Thanks for the reply @geocodezip. Maybe I did not explain myself right, sorry for my English. According to the update (image "Legs Polyline"), I need the marker to be calculated twice: one for one "Leg1" and one for "Leg2", because the route goes through the marker twice. – Roteirize Jan 10 '18 at 16:04
  • `isLocationOnEdge` won't do that. You need a more general function which will allow you to find more than one result. – geocodezip Jan 10 '18 at 16:20
  • Thank you. I'll research this, do you know of any such function? – Roteirize Jan 10 '18 at 20:47
  • I believe the two "related questions" in my comments would help. – geocodezip Jan 10 '18 at 21:29

0 Answers0