Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
165 views
in Technique[技术] by (71.8m points)

Infowindow works only for 1 route, it is not working for other 3 routes in google map

I have total 5 locations in google map, i have set marker for that and added route path between markers, between this path i have added infowindow, but it is working for only 1 route, not working for other 3 route, can anyone please help me why it is not working for other 3 routes, also after closing that infowindow i am not able to open that infowindow, can we set somepoint between route, and on click open infowindow, can anyone please help me to resolve this issue ?

var geocoder;
            var map;
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            var locations = [
                ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
                ['Bondi Beach', -33.890542, 151.274856, 4],
                ['Coogee Beach', -33.923036, 151.259052, 5],
                ['Maroubra Beach', -33.950198, 151.259302, 1],
                ['Cronulla Beach', -34.028249, 151.157507, 3]
            ];
	    var infowindow;

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();


                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 10,
                    center: new google.maps.LatLng(-33.92, 151.25),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                directionsDisplay.setMap(map);
                var infowindow = new google.maps.InfoWindow();

                var marker, i;
                var request = {
                    travelMode: google.maps.TravelMode.DRIVING
                };
                for (i = 0; i < locations.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    });

                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {
                            infowindow.setContent(locations[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));

                    if (i == 0)
                        request.origin = marker.getPosition();
                    else if (i == locations.length - 1)
                        request.destination = marker.getPosition();
                    else {
                        if (!request.waypoints)
                            request.waypoints = [];
                        request.waypoints.push({
                            location: marker.getPosition(),
                            stopover: true
                        });
                    }

                }
                directionsService.route(request, function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                        var route = response.routes[0];
                        var summaryPanel = document.getElementById("directions_panel");
                        summaryPanel.innerHTML = "";
                        // For each route, display summary information.
                        for (var i = 0; i < route.legs.length; i++) {
                            var routeSegment = i + 1;
                            summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
                            summaryPanel.innerHTML += route.legs[i].start_address + " to ";
                            summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
                            summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
			    /*********** INFOWINDOW *****************/
			    var center = response.routes[0].overview_path[Math.floor(response.routes[0].overview_path.length / 2)];
			    infowindow.setPosition(center);
			    infowindow.setContent(response.routes[0].legs[i].duration.text + "<br>" + response.routes[0].legs[i].distance.text);
			    infowindow.open(directionsDisplay.map);
                        }
			
                        computeTotalDistance(response);
                    } else {
                        alert("directions response " + status);
                    }
                });
            }
	    function computeTotalDistance(result) {
                var totalDist = 0;
                var totalTime = 0;
                var myroute = result.routes[0];
                for (i = 0; i < myroute.legs.length; i++) {
                    totalDist += myroute.legs[i].distance.value;
                    totalTime += myroute.legs[i].duration.value;
                }
                totalDist = totalDist / 1000.
                document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(2) + " minutes";
            }
            google.maps.event.addDomListener(window, "load", initialize);
<head> 
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
	<title>Google Maps Multiple Markers</title> 
	<script src="http://maps.google.com/maps/api/js?key=AIzaSyDYeDBDl-8Wx98Az55EbVnpvRfSIBbwxyE&libraries=places"></script>
    </head> 
    
    
    <div id="map" style="float:left;width: 500px; height: 400px;"></div>
	<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
	    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
	    <div id="total"></div>
	</div>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Issues:

  1. you need to create an InfoWindow for each leg of the route to display that leg's distance and duration.
  2. you need to calculate the "center" of each leg to set the location for that infowindow.
  for (var i = 0; i < route.legs.length; i++) {
    var routeSegment = i + 1;
    summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
    summaryPanel.innerHTML += route.legs[i].start_address + " to ";
    summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
    summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
    /*********** INFOWINDOW *****************/
    var legs = route.legs;
    var steps = legs[i].steps;
    var stepPath = [];
    for (j = 0; j < steps.length; j++) {
      var nextSegment = steps[j].path;
      for (k = 0; k < nextSegment.length; k++) {
        stepPath.push(nextSegment[k]);
      }
    }
    var center = stepPath[Math.floor(stepPath.length / 2)];
    var stepIW = new google.maps.InfoWindow();
    stepIW.setPosition(center);
    stepIW.setContent(response.routes[0].legs[i].duration.text + "<br>" + response.routes[0].legs[i].distance.text);
    stepIW.open(directionsDisplay.map);
  }

proof of concept fiddle

screenshot of resulting map

code snippet:

var geocoder;
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var locations = [
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Maroubra Beach', -33.950198, 151.259302, 1],
  ['Cronulla Beach', -34.028249, 151.157507, 3]
];
var infowindow;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();


  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.92, 151.25),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  directionsDisplay.setMap(map);
  var infowindow = new google.maps.InfoWindow();

  var marker, i;
  var request = {
    travelMode: google.maps.TravelMode.DRIVING
  };
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));

    if (i == 0)
      request.origin = marker.getPosition();
    else if (i == locations.length - 1)
      request.destination = marker.getPosition();
    else {
      if (!request.waypoints)
        request.waypoints = [];
      request.waypoints.push({
        location: marker.getPosition(),
        stopover: true
      });
    }

  }
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById("directions_panel");
      summaryPanel.innerHTML = "";
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
        summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
        /*********** INFOWINDOW *****************/
        var legs = route.legs;
        var steps = legs[i].steps;
        var stepPath = [];
        for (j = 0; j < steps.length; j++) {
          var nextSegment = steps[j].path;
          for (k = 0; k < nextSegment.length; k++) {
            stepPath.push(nextSegment[k]);
          }
        }
        var center = stepPath[Math.floor(stepPath.length / 2)];
        var stepIW = new google.maps.InfoWindow();
        stepIW.setPosition(center);
        stepIW.setContent(response.routes[0].legs[i].duration.text + "<br>" + response.routes[0].legs[i].distance.text);
        stepIW.open(directionsDisplay.map);
      }
        computeTotalDistance(response);
    } else {
      alert("directions response " + status);
    }
  });
}

function computeTotalDistance(result) {
  var totalDist = 0;
  var totalTime = 0;
  var myroute = result.routes[0];
  for (i = 0; i < myroute.legs.length; i++) {
    totalDist += myroute.legs[i].distance.value;
    totalTime += myroute.legs[i].duration.value;
  }
  totalDist = totalDist / 1000.
  document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime / 60).toFixed(2) + " minutes";
}
google.maps.event.addDomListener(window, "load", initialize);
  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;
      var stepPolyline = new google.maps.Polyline(polylineOptions);
      for (k = 0; k < nextSegment.length; k++) {
        stepPolyline.getPath().push(nextSegment[k]);
      }
      polylines.push(stepPolyline);
      stepPolyline.setMap(map);
      // route click listeners, different one on each step
      google.maps.event.addListener(stepPolyline, 'click', function(evt) {
        infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6));
        infowindow.setPosition(evt.latLng);
        infowindow.open(map);
      })
    }
  }
html, body, #map {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
  <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
  <div id="total"></div>
</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...