1
I have a Polyline between "Origin" and "Destination", In this Polyline I need to insert markers in a particular location "Point", I do it using the function isLocationOnEdge().
But when there are Polylines adjacent to the site "Point", would like to insert two markers, one for each leg (round trip).
I think I should create a matrix with Polyline coordinates and use a more comprehensive function for this, but I don’t know how.
Here is 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>