如何在多个标记中添加侦听器，这些标记调用相同的函数以在Google Maps API v3中单击时显示方向

Question

var x1 = 0;
var startPoint = new google.maps.LatLng(0, 0);
var endPoint = new google.maps.LatLng(0, 0);
var marker;
var latlngs = new Array();
var infowindow;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var locations = [
   {
       "name": "Frankie Johnnie & Luigo Too",
       "address": "939 W El Camino Real, Mountain View, CA",
       "lat": 37.386339,
       "lng": -122.085823
}, {
       "name": "Amici's East Coast Pizzeria",
       "address": "790 Castro St, Mountain View, CA",
       "lat": 37.38714,
       "lng": -122.083235
}, {
       "name": "Kapp's Pizza Bar & Grill",
       "address": "191 Castro St, Mountain View, CA",
       "lat": 37.393885,
       "lng": -122.078916
}, {
       "name": "Round Table Pizza: Mountain View",
       "address": "570 N Shoreline Blvd, Mountain View, CA",
       "lat": 37.402653,
       "lng": -122.079354
}];

Edit: these are the global variables just to clarify ^

I want create a "click on markers to get directions" functionality. So far I have created a list in JSON that creates all the markers from the "lat" and "long" in the list without a problem:

for (var k in locations) {
       latlngs[k] = new google.maps.LatLng(locations[k].lat, locations[k].lng);
       marker = new google.maps.Marker({
           position: latlngs[k],
           animation: google.maps.Animation.DROP,
           title: locations[k].name,
           map: map
       });
   };

The JSON list ( locations[k] ) is 132 locations in total. I want to be able to click on a marker, save it as a start point for directions then wait for the secnond marker to be clicked on, which will be saved as an end point. Clicking the second marker will calculate and show directions as Iv'e tried below:

google.maps.event.addListener(marker, 'click', function () {
       if (x1 === 0) {
           startPoint = this.marker.position;
           var infowindow = new google.maps.InfoWindow({
               content: "Start",
               position: startPoint
           });
           infowindow.open(map, this.marker);
           directionsDisplay.setMap(map);
           directionsDisplay.setPanel(document.getElementById('panel'));
           x1++;
       } else {
           endPoint = this.marker.position;
           x1 = 0;
           calculateDirections(startPoint, endPoint);
       }
   });

At this point no infowindow gets displayed and I get the error saying "cannot read 'position' of undefined". I can get the directions to show when I hardcode the start and end points.

The following threads touches on the same idea but don't answer the listener for all markers problem, which I think is the main issue.

Google Maps API V3 - add event listener to all markers?

and

how do I add same event listener to many markers and then differentiate between the markers in the listeners in google maps api v3?

Answer 1

If you get the LatLang on click then saving it wont be a big deal. I have tried to achieve this on click and get the latlang. I am not sure how much this will solve your problem but definitely will give you some idea to move ahead.

Here is the working example, and I hope this will help you.

  var map; var geocoder; var mapOptions = { center: new google.maps.LatLng(37.09024, -95.712891), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; function initialize() { var myOptions = { center: new google.maps.LatLng(37.09024, -95.712891), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; geocoder = new google.maps.Geocoder(); var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng); }); var marker; function placeMarker(location) { if(marker){ //on vérifie si le marqueur existe marker.setPosition(location); //on change sa position }else{ marker = new google.maps.Marker({ //on créé le marqueur position: location, map: map }); } document.getElementById('lat').value=location.lat(); document.getElementById('lng').value=location.lng(); getAddress(location); } function getAddress(latLng) { geocoder.geocode( {'latLng': latLng}, function(results, status) { if(status == google.maps.GeocoderStatus.OK) { if(results[0]) { document.getElementById("address").value = results[0].formatted_address; } else { document.getElementById("address").value = "No results"; } } else { document.getElementById("address").value = status; } }); } } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #map_canvas { margin: 0; padding: 0; height: 100% } 

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><input type="text" id="address" size="30"><br><input type="text" id="lat" size="10"><input type="text" id="lng" size="10"> <div id="map_canvas"></div>