web-dev-qa-db-fra.com

Google Maps V3: Chargement du contenu d'Infowindow via AJAX

Quelle est la meilleure façon de charger du contenu dans ma sous-fenêtre en utilisant ajax? En ce moment, j'obtiens un effet similaire en utilisant des iframes, mais je n'en suis pas très content. Je pensais que ce serait simple, mais cela me déroute pour une raison quelconque. Voici comment cela fonctionne en ce moment:

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

Il serait facile de saisir le contenu via ajax juste avant l'appel infowindow.setContent, mais je souhaite effectuer l'appel ajax uniquement lorsque l'infowindow s'ouvre. Des pensées?

BTW: J'utilise jQuery.

Comme cela a été suggéré dans la réponse, j'ai décidé de déplacer les appels vers setContent et d'ouvrir une fonction distincte. Pour ceux intéressés, le code qui a résolu ce problème était:

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

Ensuite, changez l'auditeur:

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.close();
      load_content(marker, a.aula.id);
    });
    markers.Push(marker);
  });
jquerygoogle-mapsgoogle-maps-api-3
38
mikewilliamson

Vous pouvez appeler infowindow.setContent à tout moment après l'affichage de la fenêtre d'informations. Ainsi, vous pouvez initialement définir le contenu de votre fenêtre d'informations avec une double flèche, effectuer l'appel AJAX (à partir du gestionnaire d'événements) puis appeler infowindow.setContent à nouveau à partir de AJAX réponse avec les données appropriées.

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

intitaliser la carte, le marqueur, la fenêtre d'information (comme aucun contenu) et sur le gestionnaire de clic du marqueur, faire une demande ajax

1
Vishal Sharma

Le contenu de l'infoWindow est déjà chargé, mais il est possible que si vous téléchargez des images de grande taille, nous devons attendre la première fois pour charger complètement l'image, puis définir le contenu de infowindow, puis afficher cette infowindow. Les solutions à l'exigence ci-dessus sont correctes, mais pour les images, il se peut qu'elles ne soient pas chargées instantanément.Pour ce faire, vous devez vérifier si le contenu de la fenêtre d'information est chargé ou non, alors seulement vous devez afficher la fenêtre d'informations.

0
bikashphp