How to populate a Google Maps Infowindow with AJAX content?

Question

I want to populate the infowindow of my google maps markers with dynamic content. When the user clicks on a marker, an AJAX call should be triggered that fetches the corresponding content from the server.

Meanwhile the infowindow should be opened and display a preloading message. Once the AJAX response arrives, it should replace the preloading message.

How can I accomplish this with the Google Maps 2 API?

(extinfowindow offers such a functionality, but is an external and deprecated add-on. I prefer a "pure" Google Maps API approach).

Answer 1

Maybe something like the following. I'm not sure how the event listener is attached - but if it works as in Google Maps v3, it's attached to the marker itself and you can use the 'this'-reference to get to the clicked marker.

Updated answer. Untested code - but it should work. Set an ID to the content of the infowindow and update it using the DOM-model.

function ajax_me() {
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    this.openInfoWindow('<div id="current-info-window">Loading...</div>');
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('current-info-window').innerHTML = xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET", "backend.php", true);
    xmlhttp.send();
}

...

marker = new GMarker(...);

GEvent.addListener(marker, 'click', ajax_me);

Answer 2

I finally solved the problem by refining Björn's answer a bit. His approach was to use a content div inside the infowindow and update it with document.getElementById() once the AJAX response arrives. This works, but doesn't resize the infowindow to fit the AJAX content ==> the "bubble" is overflowed.

My final solution solves this by calculating the dimensions of the content div once the AJAX content was stuffed in. Then I use the infoWindow.reset()-Method to specifiy the new dimensions.

This was a bit quirky in the beginning, but finally it turned out that .reset() also needs the marker position to render the resized infowindow correctly. Note that I'm using jQuery for the DOM stuff.

marker = new GMarker (...);
GEvent.addListener(marker,'click', loadPOIDescription);

function loadPOIDescription (){
    var marker = this;
    marker.openInfoWindow('<div id="marker-info">Loading POI Description...</div>');
    $.get("backend.php", function(data){
        var $contentDiv = $("#marker-info");
        $contentDiv.html(data);
        //the magic happens here
        var position = marker.getLatLng();
        var infoWindow = map.getInfoWindow(); //map is my global GMaps2 object
        // set the infowindow size to the dimensions of the content div
        var infoWindowSize = new GSize($contentDiv.width(), $contentDiv.height());
        //apply the modifications 
        infoWindow.reset(position, null, infoWindowSize, null, null); //reset the infowindow
   });
}