0

I am building a map that displays multiple polylines from an xml source and am having some trouble getting at the elements and attributes.

All of the polylines are displayed and plotted appropriately, however each polyline infowindow contains the same attribute data (only captures last element in the xml doc).

I have tried multiple cases for looping over the data but still can't seem to get it grab the set for each polyline.

The XML document is structured as follows:

<!-- language: lang-xml -->
<markers>
<line attributeA="" attributeB="" attributeC="">
<point lat="" lng="">
<point lat="" lng="">
</line>
</markers>

And the offending JS script:

<!-- language: javascript -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="downloadxml.js"></script>
<script type="text/javascript">

function initialize() {
  var myLatlng = new google.maps.LatLng(30.695895, -97.354080);
  var mapOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
 }

 var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
 var infowindow = new google.maps.InfoWindow({map: map});

  downloadUrl("objectdata.xml",   function(data) {
    var xml = xmlParse(data); 

    var lines = xml.documentElement.getElementsByTagName("markers");
    var markers = xml.documentElement.getElementsByTagName("line");

    // loop through polyline data
    for (var i = 0; i < markers.length; i++) {

      var path = [];
      var points = markers[i].getElementsByTagName("point");
      var name = markers[i].getAttribute("name");

      for (var j = 0; j < points.length; j++) {
        var lat = parseFloat(points[j].getAttribute("lat"));
        var lng = parseFloat(points[j].getAttribute("lng"));
        var point = new google.maps.LatLng(lat,lng);
        path.push(point);

      } //end od point loop

      var polyline = new google.maps.Polyline({
        path: path,
        geodesic: true,
        strokeColor: "#800080",
        strokeOpacity: .80,
        strokeWeight: 2
      });

      polyline.setMap(map);

        // define infoWindow content
        var toolTip = '<div class="infobox" style="width:280px;">'+
           '<div id="siteNotice">'+
           '</div>'+
           '<h2>'+ name +'</h2>'+
           '<div>'+
           '<p>'+ notworking +'</p>'+
           '</div>'+
           '</div>';

        google.maps.event.addListener(polyline, 'click', function(event) {         
            infowindow.setContent(toolTip);
            infowindow.setPosition(event.latLng);
            infowindow.open(map);
        });

    } //end polyline loop

  }); //end download url
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Seems like I'm missing something simple here - appreciate the help!

akaimo
  • 146
  • 2
  • 12
  • Appreciate the suggestion but I am not having trouble plotting markers or showing the infowindows on Google Maps, this is more directly related to looping over xml elements. Should not be categorized as dupe. Thx – akaimo Sep 18 '14 at 23:01
  • Of course you have problems with your infoWindow(they don't print the desired data). Take a look at the accepted answer and see how the click-listener will be added/the infoWindow-content will be set. – Dr.Molle Sep 19 '14 at 00:30

0 Answers0