[SOLVED] Google maps infowindow events on open

Google maps infowindow events on open

Hi I am using google fusion tables and google maps, the thing is that my markers show up correctly, but I want to insert some images into the inforwindow. So the thing is that I do queries to find the location of those markers, and those markers can have many categories (that is why i couldnt use a merged table). And when the user clicks on the marker, the infowindow displays and shows the info on the marker. It used to include just a text of the categories, but I want to retrieve the icon from each category to display that on the infowindow. The thing is that the second query takes longer than the time it takes to display the info window. So i did a lame fix, I added

$('#infoWindowsCatDer').append(info);

at the end of the second query, so I guess you can see the problem, what happens if the windows takes a little bit longer to display than the query. This is something that should be handled by events right?

Is there an event for

lastWindow.open(map);

So when the infowindow is completly open it can append the images?

Solution

The InfoWindow object fires the event domready event when it is attached (fully loaded) to the DOM. You can see this in the API docs: https://developers.google.com/maps/documentation/javascript/reference#InfoWindow

You could then have a listener like the one below to load content into the infoWindow after it has loaded itself:

var referenceToInfoWindow = new google.maps.InfoWindow({content: 'My info' });

google.maps.event.addListener(referenceToInfoWindow, 'domready', function(){
    //code to dynamically load new content to infowindow
    //for example:
    //    var existing_content = referenceToInfoWindow.getContent();
    //    var new_content = "...";
    //    referenceToInfoWindow.setContent(existing_content + new_content);
});