Home/ Questions/Q 8370257
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T13:52:20+00:00

I have been building an asp.net control to generate a google map based on

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0