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!