Hello everybody,

I have some trouble with the google maps api.

I want to add markers from a xml file to my map but it seems that the function is not parsing my xml file and I am clueless.

Any ideas here is my code:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0" />
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
            #map_canvas { height: 100% }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="util.js"></script>
        <script type="text/javascript">
            var map = null;

            function load()
            {
                var latlng = new google.maps.LatLng(-34.397, 150.644);
                var option = {
                    zoom: 8,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), option);
                createMarker(-34.397, 150.644, 'lol');

                downloadUrl("airport.xml", function(data) {
                    var xml = xmlParse(data);
                    var markers = xml.documentElement.getElementsByTagName("marker");
                    document.getElementById("test").innerHTML = markers.length;
                    for (var i = 0; i < markers.length; i++) {
                        var info = markers[i].getAttribute("info");
                        var lat = parseFloat(markers[i].getAttribute("lat"));
                        var lon = parseFloat(markers[i].getAttribute("lng"));
                        
                        createMarker(lat, lon, info);
                        bindInfoWindow(marker, map, infoWindow, html);
                    }
                });
            }

            function createMarker(lat, lon, info){
                var myLatlng = new google.maps.LatLng(lat, lon);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title:"info",
                    icon: "http://google-maps-icons.googlecode.com/files/airport.png"
                });
            }


        </script>
    </head>
    <body onload="load()">
        <div id="map_canvas" style="width:50%; height:50%"></div>
        <div id="test" style="width:50%; height:50%">lo</div>
    </body>
</html>

Life in action: http://e-bro.org/google
It seems that the length = 0 this is strange

greetz

Works fine in Chrome, Safari(pc), Opera and IE8 (at least a map appears with an airport icon overlay).

Firefox complains that downloadUrl() is not defined.

That appears to be the result of a problem with bindInfoWindow(marker, map, infoWindow, html); (since after commenting that out the display appears).

Further testing would require being able to read 'airport.xml'.

Is bindInfoWindow() a method? If so, I don't see its object.
If its first parameter is an input, where is marker defined?

Check your XML document.

You have apostrophes in some of the city names. The XML is reading that as code and is causing syntax errors.

Replace the apostrophe with - or you might be able to use &apos; instead of the apostrophe.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.