Google Maps API V3 - Dynamic map from XML, custom attributes inaccessible?

Question

I have been building an asp.net control to generate a google map based on an xml file. I have the map working, as well as the popup windows (infoWindows). Unfortunately, for some reason I cannot use the custom attributes within the XML file to populate the infoWindow for each marker. A null value is being returned when I call: var name = markers[i].getAttribute("name");

I have re-written this code several different ways and I still cannot access the value. I know it exists in the xml, so I was hoping there might be someone on here with advanced knowledge of google maps api v3 and parsing xml via javascript who could help me get to the bottom of this. I have included the rendered html below, as well as the contents of the xml file partnerLocations.xml.

NOTE: I did make use of the googleUtils.js class which is provided by google and is available here: http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/util.js

testing.aspx (test page where control is implemented) rendered output:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
<script type="text/javascript" src="/includes/js/googleUtils.js"></script>
<script type="text/javascript">
    google.maps.event.addDomListener(window, 'load', function () {
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 3,
            center: new google.maps.LatLng(52.5,-117.5),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infoWindow = new google.maps.InfoWindow;
        google.maps.event.addListener(map, 'click', function () {
            infoWindow.close();
        });

        downloadUrl("/includes/xml/partnerLocations.xml", function (data) {
            var markers = data.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
                var latlng = new     google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
                var name = markers[i].getAttribute("name");
                var windowContents = "<h3>" + name + "</h3>";
                var marker = new google.maps.Marker({ position: latlng, map: map });
                bindInfoWindow(marker, map, infoWindow, windowContents);
            }
        });

        function bindInfoWindow(marker, map, infowindow, html) {
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.setContent(html);
                infowindow.open(map, marker);
            });
        }
    });
</script>
<div id="map_canvas" style="width: 700px; height: 500px">
</div>

</html>

partnerLocations.xml:

<?xml version="1.0" encoding="UTF-8"?>
<markers>
  <marker lat="37.401220" lng="-122.120604" name="PartnerB" address="StreetAddress" description="Thisisourpartner..."/>
  <marker lat="37.413320" lng="-122.125604" name="PartnerB" address="StreetAddress" description="Thisisourpartner..."/>
  <marker lat="37.433480" lng="-122.139062" name="PartnerC" address="StreetAddress" description="Thisisourpartner..."/>
  <marker lat="37.445427" lng="-122.162307" name="PartnerD" address="StreetAddress" description="Thisisourpartner..."/>
</markers>

Do you have a link to a live version of your map? My suspicion is that the xml attributes are accessible, but you are running into a problem with the lack of function closure on your markers (when you click on the marker, the "i" variable is past the end of your xml so name, address and description are not valid). — geocodezip, Aug 06 '12 at 19:32
Hi Geocodezip, I do not yet have a live version but I will try to post one tonight to my personal web space for review. Thank you for looking at this! — Lindsay Rose, Aug 06 '12 at 19:41

score 0 · Accepted Answer · answered Aug 12 '12 at 11:31

I have google maps working on my site and I've run your xml file in and see all locations

Here is the code i used where test.xml is your xml file. I've also got the xml file in the same directory as the page displaying it

function load() {
var map = new google.maps.Map(document.getElementById("gmap"), {
    center: new google.maps.LatLng(50.734850, -3.536562),
    zoom: 7,
    mapTypeId: 'roadmap'
});

var infoWindow = new google.maps.InfoWindow;
var bounds = new google.maps.LatLngBounds();

// Change this depending on the name of your PHP file
downloadUrl("test.xml", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b> <br/>" + address;
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
        });
        bindInfoWindow(marker, map, infoWindow, html);
        bounds.extend(point);
    }

    map.fitBounds(bounds);
});
}

Yu can either use or or if using jquery using $(document).ready(function(){

Hope it helps

Hi AdRock, Thank you very much for your post. It was very strange, as soon I pushed this code out to a live site it started working perfectly. I appreciate you providing this code though, there are clearly some places were I can adjust my code to increase efficiency! — Lindsay Rose, Aug 15 '12 at 13:49

score 0 · Answer 2 · answered Aug 15 '12 at 15:20

Thanks to everyone who viewed this question, especially @Geocodezip and @AdRock who commented with suggestions! This issue as it turns out was not an issue at all, this had to do with the fact that I was running this code on localhost. Once I deployed this to a live server everything worked as expected.

Google Maps API V3 - Dynamic map from XML, custom attributes inaccessible?

2 Answers2