Question

I’m having a really hard time trying to get the infowindows in Google Maps V3 to work as I want it to work.

– Scenario:- I am creating a mashup between the San Francisco’s subway system and Google Maps. In one functionality, when the user selects a route, Markers(representing the stations) are overlayed onto the map. The markers when clicked, opens up an infoWindow which will display the Station’s Name, the Route Name(with that Route’s color as background) and a borderless table that will have the ETD times for the train movements on that particular station(basically, just “minutes” until trains heading towards a particular destination leaves). Obviously, as the user clicks on different markers, the appropriate data for that station is reflected on the infowindow.

The server side script that returns JSON format ETD data all work perfectly, and I am receiving the data as I wanted to.

– Problem:- I have been unable to properly “inject” the ETD data into my infowindow, I want to show it in a nice tabular format, but for some reason, all the ETD data just doesn’t get injected into the table, rather it overflows outside the table.

I would really appreciate any suggestions, help etc.

Thanks,

-Soumya Roy

CODE:-

function drawinfo(mark,abbr,name) {
var infowindow=new google.maps.InfoWindow();
var strContent="<div style=\"width:400px;height:240px;\">
        <div style=\"font-weight:bold;padding:0.5em;\"><p>Station:"+name+"</p></div><br/>
        <div style=\"margin-top:0.3em;background-color:"+Clr+";float:left;font-size:0.8em;
        font-weight:bold;\"><p>Route:"+Rt+"</p></div><div style=\"float:right;\">
        <table style=\"border:0;color:#666;\"><tr><td>Departures</td></tr>"; //Until here the infowindow shows properly.

$.getJSON("getetd.php",{abbr:abbr},function(result) {
    $.each(result,function(key,value) {
        $.each(this,function(k,v) {
            strContent+="<tr><td>|"+k+"</td>";  //The actual JSON data is being received properly.
            $.each(this,function(k2,v2) {
                $.each(this,function(k3,v3) {
                    strContent+="<td>"+v3+"</td>";  //Neither "k" nor "v3" get injected.
                });
            });
            strContent+="</tr>";
        });
    });
}); //getJSON() ends

strContent+="</table></div></div>";
google.maps.event.addListener(mark,'click',function(){
    infowindow.close();  // So as to close any other infowindow.
    infowindow.setContent(strContent);
    infowindow.open(map,mark);
}); //addListener() ends.

} //drawinfo() ends.

Answer 1

Your JSON fetch is asynchronous, you need to use the data returned in the call back routine, right now your closing </table></div></div> is outside of the callback function (I think).

I suspect what you want is to fetch the data for that particular infowindow when the click listener is called (the marker is clicked), rather than pre-populating the data, so call the getJSON function in the click listener, then open the infowindow with the data when it returns from the server (in the getJSON call back).