title: Google Maps V3: Loading infowindow content via AJAX
body: <p>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:</p>
  
  <pre><code>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("&lt;div class='infowindow_content'&gt;&lt;iframe src='aulas/show/" + a.aula.id + "'&gt;&lt;/iframe&lt;/div&gt;");
  
        infowindow.open(map, marker);
      });
      markers.push(marker);
    });
  </code></pre>
  
  <p>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?</p>
  
  <p>BTW: I am using jQuery.</p>
  
  <p>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:</p>
  
  <pre><code>function load_content(marker, id){
    $.ajax({
      url: 'aulas/show/' + id,
      success: function(data){
        infowindow.setContent(data);
        infowindow.open(map, marker);
      }
    });
  }
  </code></pre>
  
  <p>Then change the listener:</p>
  
  <pre><code>    google.maps.event.addListener(marker, 'click', function() {
        infowindow.close();
        load_content(marker, a.aula.id);
      });
      markers.push(marker);
    });
  </code></pre>