Google Maps API V3 - InfoWindow help

[Old Pedant]

Do you not have *SOME* debugger???

Just running your page on Firefox using the Firebug debugger immediately pinpoints the problem:

 infowindow.open( map, which );

"map is not defined".

And indeed it isn't.

You do

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

in your initialize() function so the variable map is *NOT* available outside that function (except when you pass it as an argument to the setMarkers() function).

So...

Simply move the *declaration* of the variable to global scope:

var map = null; 
function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(32.75542,-117.13433),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  // notice that the var keyword is removed!
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
  setMarkers(map, MarkersArray);
}

Will this be the last problem? I dunno. But if you would use Firebug you'd be better equipped to find out for yourself. Please?

[flashdave]

I got it!!

thank you soo much!

I had to make a few edits, but it is working now.

small new problem, but I guess I will deal with it.

thanks again!

[syslogic]

I once posted a detailed explanation to my blog:
Google Maps API v3 Multiple InfoWindows

This should give you a pretty good clue how it works.

[owltech]

I have had and resolved your exact problem. The issue is that in Javascript for loops, the real variables are not used, but rather only copies of them. So, if you want to change the value of an external or passed variable, you have to make a function call OUTSIDE the loop to do the job. Here's my code:

function setMarkers() {
  // Add markers to the map
  for (var i = 0; i < _offices.length; i++) {
    var office = _offices[i];
    var myLatLng = new google.maps.LatLng(office[1], office[2]);
    var contentString = 
        '<div class="infoWindow">'+
        '<h3 class="heading">'+office[0]+'</h3>'+
        '<p>'+office[4]+'</p>'+
        '</div>';
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: _map,
        title: office[0],
        zIndex: office[3],
        clickable: true
    });
    addInfoWindow(marker, contentString);
    _markers.push(marker);
  }
}
function addInfoWindow(marker, message) {
  var info = message;
  var infoWindow = new google.maps.InfoWindow({
      content: message,
      size: new google.maps.Size(200,50)
  });
  _infoWindows.push(infoWindow);
  google.maps.event.addListener(marker, 'click', function () {
      closeAllMarkers();
      infoWindow.open(_map, this);
  });
}

Note the call to addInfoWindow inside the for loop. Believe it or not, putting the code in the called function INSIDE the for loop will not work. Only the last item referenced, according to the length of the variable "offices" will be left to use. Putting the code for addInfoWindow OUTSIDE the for loop will produce the results you want. I'm definitely not an expert on this, but I have battered my brains out over it and appear to have won.

[Old Pedant]

You have described the phenomenon correctly but you don't understand the cause.

Look into JavaScript closures for the reason your solution worked.

Only the last item referenced, according to the length of the variable "offices" will be left to use.

And even it wouldn't be available if you didn't have a global variable that held a reference to it.