Tutorial :Google Maps V3: Loading infowindow content via AJAX


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


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.


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

intitalize map , marker , infowindow(as no content) and on marker 's click handler make ajax request


Already the content to the infoWindow is loaded but there are possibility if you are uploading images of large size then we have to wait for the first time to load the image fully and then set the content of infowindow and then display that infowindow. The solutions to the above requirement is ok but for images it might not get loaded instantly so to do that you have to check whether the content of the infowindow is loaded or not then only you have to display the info window.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »