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

Question

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

833 views Asked by Moraru Alex At 18 November 2014 at 20:14

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); 
}

Original Q&A

There are 1 answers

**Emmanuel Delay** · Accepted Answer · 2014-11-19 11:13:00

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>

TechQA.

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

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in API

Related Questions in RENDERER

Related Questions in DIRECTIONS

Popular Questions

Popular Tags

Trending Questions