Jiwoong Lee Jiwoong Lee - 1 month ago 17
Javascript Question

Marker on all of polyline from Google maps directions V3

Hello I have a question.

I draw a polyline and set markers on every point of the polyline. But my code doesn't set markers every point. Like the picture below, markers are just on some parts of polyline.

How can I set markers on every polyline?

enter image description here

function initMap() {
var markerArray = [];
// Instantiate a directions service.
var directionsService = new google.maps.DirectionsService;
// Create a map and center it on Manhattan.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 32.224759, lng: 60.298827},
});
// Create a renderer for directions and bind it to the map.
var directionsDisplay = new google.maps.DirectionsRenderer({map: map});
// Instantiate an info window to hold step text.
var stepDisplay = new google.maps.InfoWindow;
// Display the route between the initial start and end selections.
calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map);
// Listen to change events from the start and end lists.
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map);
};

document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
directionsDisplay.addListener('directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
});
}

function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map) {
// First, remove any existing markers from the map.
for (var i = 0; i < markerArray.length; i++) {
markerArray[i].setMap(null);
}
// Retrieve the start and end locations and create a DirectionsRequest using
// DRIVING directions.
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
// Route the directions and pass the response to a function to create
// markers for each step.
if (status === google.maps.DirectionsStatus.OK) {
var polyline = new google.maps.Polyline({
path: [],
strokeColor: '#0000FF',
strokeWeight: 3
});
var bounds = new google.maps.LatLngBounds();
var legs = response.routes[0].legs;
for (var i = 0; i < legs.length; i++) {
var steps = legs[i].steps;
for (var j = 0; j < steps.length; j++) {
var nextSegment = steps[j].path;
for (var k = 0; k < nextSegment.length; k++) {
polyline.getPath().push(nextSegment[k]);
var marker = markerArray[k] = markerArray[k] || new google.maps.Marker;
marker.setPosition(nextSegment[k]);
bounds.extend(nextSegment[k]);
marker.setMap(map);
}
}
}
polyline.setMap(map);
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}

function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
document.getElementById('total').innerHTML = total + ' km';
}

Answer

I think that I found your mistake which is in this piece of code:

for (var i = 0; i < legs.length; i++) {
  ...
  for (var j = 0; j < steps.length; j++) {
    ...
    for (var k = 0; k < nextSegment.length; k++) {
      ...
      // Here you add the marker to the array if there is no marker set yet
      var marker = markerArray[k] = markerArray[k] || new google.maps.Marker;
      ...
    }
  }
}

The mistake you did is, that you just look at the array's index k. However, the value of k is reset to 0 every time the for-loop starts again. Therefore, you have to add the array's length to the index:

for (var i = 0; i < legs.length; i++) {
  ...
  for (var j = 0; j < steps.length; j++) {
    ...
    for (var k = 0; k < nextSegment.length; k++) {
      ...
      // This is the real index you want to look at
      var marker = markerArray[markerArray.length + k] = markerArray[markerArray.length + k] || new google.maps.Marker;
      ...
    }
  }
}

However, I think that actually this reaches out and makes your code also lighter and more readable:

for (var i = 0; i < legs.length; i++) {
  ...
  for (var j = 0; j < steps.length; j++) {
    ...
    for (var k = 0; k < nextSegment.length; k++) {
      ...
      // This looks much easier IMHO
      var marker = new google.maps.Marker;
      ...
      markerArray.push(marker);
    }
  }
}
Comments