Google Maps V3: cargando contenido de infowindow a través de AJAX

Question

¿Cuál es la mejor manera de cargar contenido en mi ventana de información usando ajax? Ahora mismo estoy obteniendo un efecto similar usando iframes, pero no estoy tan feliz con eso. Pensé que esto sería sencillo pero me confunde por alguna razón. Esto es como su funcionamiento en este momento:

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); 
    }); 

Sería fácil de agarrar el contenido a través de AJAX justo antes de la llamada infowindow.setContent, pero quiero hacer la llamada ajax sólo cuando la ventana de información se abre. ¿Alguna idea?

BTW: Estoy usando jQuery.

Como se sugirió en la respuesta, decidí mover las llamadas a setContent y abrir una función separada. Para los interesados ​​el código que resuelve esto era:

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

a continuación, cambiar el oyente:

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

Answer 1

Puede llamar infowindow.setContent en cualquier momento después de la ventana de información se ha demostrado. Por lo tanto, inicialmente puede configurar el contenido de su ventana de información con un control giratorio, realizar la llamada AJAX (desde el controlador de eventos) y luego llamar al infowindow.setContent nuevamente desde la respuesta AJAX con los datos apropiados.

Answer 2

for (var i = 0; i < markersClient.length; i++) { 
      var location = new google.maps.LatLng(lats[i], longs[i]); 
      var marker = new google.maps.Marker({ 
       position: location, 
       map: map, 
       lid: markersClient[i].t 
      }); 
      var infowindow = new google.maps.InfoWindow({ 
       content: "" 
      }); 
      //debugger; 
      marker.setTitle(" - "); 
      markers.push(marker); 
      google.maps.event.addListener(marker, 'click', function (target, elem) { 
       infowindow.open(map, marker); 
       $.ajax({ 
         success:function() { 
         infowindow.setContent(contentString); 
        } 
       }); 

mapa intitalize, marcador, ventana de información (como sin contenido) y el controlador de clic marcador 's hacer una petición ajax

Answer 3

Ya el contenido al infoWindow se carga pero hay posibilidad si va a cargar imágenes de de gran tamaño, entonces tenemos que esperar la primera vez para cargar la imagen completamente y luego establecer el contenido de infowindow y luego mostrar esa ventana de información. Las soluciones para el requisito anterior están bien, pero para las imágenes puede que no se carguen de forma instantánea, para ello debe comprobar si el contenido de la ventana de información está cargado o no, entonces solo tiene que mostrar la ventana de información.