Javascript, multiple google maps on same page(Directions Renderer is not working as excepted)

Question

In a web page I have multiple google maps generated in a loop. And I am using the google directions api to display directions on each of the maps. The problem is that this code is displaying all the directions on the last map. Have any ideas?:

var currentPosition = new google.maps.LatLng(44.462691,26.1215866);
var directionsService = new google.maps.DirectionsService();

function DisplayLocations(){
  $("#mapsContainer").empty();
  for(var i=0;i<locationsDisplayed;i++){
    var location=locationsArray[i];
      $("#mapsContainer"+i).append('<div id="ImageMap'+i+'" style="width=250px;height:200px;"></div>');   

    var myOptions = {
      zoom: 14,
      center: currentPosition,
      draggable: false, 
      zoomControl: false, 
      scrollwheel: false, 
      disableDoubleClickZoom: false,
      disableDefaultUI: true
    };

    var map = new google.maps.Map(document.getElementById('ImageMap'+i),myOptions);

    var request = {
      origin: currentPosition,
      destination: location.position,
      travelMode: google.maps.TravelMode.WALKING
    };

    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        RenderDirection(map,response);
      }
    });
  }
}

function RenderDirection(map,result) { 
        var directionsRenderer = new google.maps.DirectionsRenderer(); 
        directionsRenderer.setMap(map); 
        directionsRenderer.setDirections(result); 
}

Answer 1

Yes, your directionsService gets overwritten in the loop. What you can do, is chain the requests. So, whenever a response returns, you trigger the next request.

<html>
<head>
  <title>Javascript, multiple google maps on same page(Directions Renderer is not working as excepted)</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script>
  var maps = [];      // we will copy (the reference to) every map to this array, so we can always access them at will
  var locationsArray = [
    {position: new google.maps.LatLng(44.460, 26.120) },
    {position: new google.maps.LatLng(44.461, 26.121) },
    {position: new google.maps.LatLng(44.462, 26.122) },
    {position: new google.maps.LatLng(44.463, 26.123) }
  ]
  var currentPosition = new google.maps.LatLng(44.462691, 26.1215866);
  function DisplayLocations() {
    $("#mapsContainer").empty();
    nextLocation(0);  // we don't use a for-loop; we wait for a response to trigger the next request 
    function nextLocation(i) {
      var directionsService = new google.maps.DirectionsService();
      var directionsDisplay = new google.maps.DirectionsRenderer();
      var location=locationsArray[i];
      $("#mapsContainer"+i).append('<div id="ImageMap'+i+'" style="width=250px;height:200px;"></div>');   
      var myOptions = {
        zoom: 14,
        center: currentPosition,
        draggable: false, 
        zoomControl: false, 
        scrollwheel: false, 
        disableDoubleClickZoom: false,
        disableDefaultUI: true
      };
      var map = new google.maps.Map(document.getElementById('ImageMap'+i), myOptions);
      maps.push(map);
      var request = {
        origin: currentPosition,
        destination: location.position,
        travelMode: google.maps.TravelMode.WALKING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          RenderDirection(maps[i++], response, directionsDisplay);
          // if there is a next location, we will fire a new request
          if (locationsArray[i]) {
            nextLocation(i);
          }
        }
      });
    }
  }
  function RenderDirection(map, response, directionsDisplay) {
    directionsDisplay.setMap(map);
    directionsDisplay.setDirections(response);
  }
  google.maps.event.addDomListener(window, 'load', DisplayLocations);
  </script>
  <style>
    .map {
      height: 210px;
      width: 260px;
      float: left;
      margin: 2px;
    }
  </style>
</head>
<body>
  <div class="map" id="mapsContainer0"></div>
  <div class="map" id="mapsContainer1"></div>
  <div class="map" id="mapsContainer2"></div>
  <div class="map" id="mapsContainer3"></div>
</body>

Javascript, multiple google maps on same page(Directions Renderer is not working as excepted)

Question

1 answers

solution1
0 ACCPTED 2014-11-19 11:13:00

Javascript, multiple google maps on same page(Directions Renderer is not working as excepted)

Question

1 answers

solution1 0 ACCPTED 2014-11-19 11:13:00

solution1
0 ACCPTED 2014-11-19 11:13:00