Google Map Infowindow无法从var加载内容

Question

I need help getting the infowindow to display the values from locations[i][0]

locations[i][1] is working just fine for the address value but i would like to be able to set a custom title for every marker in the infowindow from the var "locations".

I can define a var to set the content and info window works that way but its the same for every marker and not pulling from the var "locations"

Any help is appreciated!

function initialize() {


geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
setMarkers(map, locations);
}

var locations = [
['Bondi Beach', '798 9th Ave, New York, NY', 4],
['Coogee Beach', '42 E 29th St, New York, NY', 5],
['Cronulla Beach', '56 W 25th St, New York, NY', 3],

];



function setMarkers(map, locations) {

var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
 var marker, i; 

for (var i=0; i<=locations.length; i++) { 


   geocoder.geocode({'address': locations[i][1]}, function(results, status) { 

    marker = new google.maps.Marker({
    position: results[0].geometry.location,
    map: map,


    });


  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {

      infowindow.open(map, marker);
      infowindow.setContent(locations[i][0]);
    }
  })(marker, i));

bounds.extend(marker.getPosition());


map.fitBounds(bounds);

})
  }
}

Answer 1

What's happening is the click event listener is taking i = 3 (the last value of i after the loop ends) so no InfoWindow appeared because of this undefined status.

Because the geocoder was introduced, the outer for loop finishes before the click listeners get their functions assigned to them. So, another function scope wrapper, that is outside the geocoding, is needed to keep the right value of i in the listeners.

function setMarkers(map, locations) {

  var infowindow = new google.maps.InfoWindow();
  var bounds = new google.maps.LatLngBounds();
  var marker, i; 

  //CHANGED REMOVED EQUALS SIGN
  for (var i=0; i<locations.length; i++) { 

   //ADDED
   (function(i) {
   geocoder.geocode({'address': locations[i][1]}, function(results, status) { 

     marker = new google.maps.Marker({
       position: results[0].geometry.location,

      //REMOVED COMMA
       map: map
     });

     google.maps.event.addListener(marker, 'click', (function(marker, i) {
       return function() {

         //CHANGED ORDER
         infowindow.setContent(locations[i][0]);
         infowindow.open(map, marker);
       }
     })(marker, i));

     bounds.extend(marker.getPosition());
     map.fitBounds(bounds);
     });

    // ADDED
    })(i);
   }
 }