Google Maps V3: Loading infowindow content via AJAX

Question

What is the best way to load content into my infowindow using ajax? Right now I am getting a similar effect using iframes but I am not that that happy with it. I thought this would be straight forward but its confusing me for some reason. This is how its working right now:

var markers = [];
  var infowindow = new google.maps.InfoWindow();
  $.each(JSON.parse(aulas), function(i, a){

    var latlng = new google.maps.LatLng(a.aula.lat, a.aula.lng);
    var marker = new google.maps.Marker({
      position : latlng,
      title: a.aula.title
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.close();
      infowindow.setContent("<div class='infowindow_content'><iframe src='aulas/show/" + a.aula.id + "'></iframe</div>");

      infowindow.open(map, marker);
    });
    markers.push(marker);
  });

It would be easy to grab the content via ajax just before the infowindow.setContent call, but I want to make the ajax call only when the infowindow opens. Any thoughts?

BTW: I am using jQuery.

As was suggested in the answer I decided to move the calls to setContent and open to a separate function. For those interested the code that solved this was:

function load_content(marker, id){
  $.ajax({
    url: 'aulas/show/' + id,
    success: function(data){
      infowindow.setContent(data);
      infowindow.open(map, marker);
    }
  });
}

Then change the listener:

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.close();
      load_content(marker, a.aula.id);
    });
    markers.push(marker);
  });

Answer 1

You can call infowindow.setContent at any point after the info window has been shown. So you could initially set your info window content with a spinner, make the AJAX call (from the event handler) and then call infowindow.setContent again from the AJAX response with the appropriate data.