Question

I’m trying to load several cities’ id, name, and positions from a MySQL table and then populate it into an HTML table. There’s also a Google Maps with markers pointing to those cities.

I want an info window to pop up on the city marker when user click one of the HTML row (tr tag). I’m using PHP, Javascript, and XML without any jQuery.

My HTML:

<?php
   $query = "SELECT id, name, lat, lng FROM city ORDER BY id";
   $arrCities = mysql_query ($query);
?>

<div id="gmap" style="width: 550px; height: 450px"></div>

<table id="tblData">
   <tr>
       <th>ID</th>
       <th>City</th>
   </tr>

   <?php while ($row = mysql_fetch_assoc($arrCities)) { ?>

       <tr id="<?php echo $row['id']; ?>">

           <td><?php echo $row['id']; ?></td>
           <td><?php echo $row['name']; ?></td>

       </tr>
   <?php } ?>
</table>

My PHP for creating an XML to populate the markers (my-xml-generator.php):

<?php
    $query = "SELECT id, name, lat, lng FROM city ORDER BY id";
    $arrCities = mysql_query ($query);

    $dom = new DOMDocument('1.0', 'utf-8');
    $node = $dom->createElement ('markers');
    $parNode = $dom->appendChild ($node);

    header('Content-type: text/xml');

    while ($row = mysql_fetch_assoc($arrCities))
    {
            $node = $dom->createElement ('marker');
            $newNode = $parNode->appendChild ($node);
            $newNode->setAttribute ('id', $row['id']);
            $newNode->setAttribute ('name', $row['name']);
            $newNode->setAttribute ('lat', $row['lat']);
            $newNode->setAttribute ('lng', $row['lng']);
    }

    echo $dom->saveXML();
?>

My Javascript:

    var gmap = new google.maps.Map (mapDiv, options);

    var arrMarkers = []; 
    var infoWindow = new google.maps.InfoWindow;

    // add markers to the map
    DownloadUrl ("my-xml-generator.php", function(data)
    {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName ("marker");

        for (var i = 0; i < markers.length; i++)
        {
            var id = markers[i].getAttribute("id");

            var lat = parseFloat (markers[i].getAttribute("lat"));
            var lng = parseFloat (markers[i].getAttribute("lng"));
            var pos = new google.maps.LatLng (lat, lng);


            var markerOptions =
            {
                position    : pos,
                map         : gmap,
                draggable   : false
            };

            // add the marker
            var marker = new google.maps.Marker (markerOptions);
            arrMarkers.push(marker);

            // this part of code is not working
            var tr = document.getElementById(id);
            google.maps.event.addDomListener (tr, "click",  function() { RowClick(i); });


            // add info window
            var html = '<div>' + id + '</div>';

            BindInfoWindow (marker, gmap, infoWindow, html);
        }
    });


    function BindInfoWindow (marker, map, infoWindow, html)
    {
        google.maps.event.addListener (marker, "click", function()
        {
            infoWindow.setContent (html);
            infoWindow.open (map, marker);
        });
    }


    function RowClick (i)
    {
        google.maps.event.trigger (arrMarkers[i], "click");
    }


    function DownloadUrl (url, callback)
    {
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function()
        {
            if (xhr.readyState == 4)
            {
                xhr.onreadystatechange = DoNothing;
                callback(xhr, xhr.status);
            }
        };

        xhr.open ('GET', url, true);
        xhr.send (null);
    }

    function DoNothing() {}

The part that isn’t working is this part in the javascript above:

var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click", function() { RowClick(i); });

What is the right way to do this?

Additional info:
If I changed my javascript to be like this:

var tr = document.getElementById(id);
google.maps.event.addDomListener (tr, "click", function() { alert(tr.id); });

Then the alert boxes will pop up when I click the row, but the ID shown will always be the last row’s ID no matter which row I clicked.
Thanks

Answer 1

the function takes a callback, but to save your variable state you’re going to have to make it a closure.:

I think this should work.

google.maps.event.addDomListener (tr, "click", 
(function(i){
    var row = i;
    return function(){
    RowClick(row);
    }
 })(i)
);