I am currently facing an issue with my code that retrieves data from Google Maps in XML format. The problem I'm encountering is that it only displays the last set of data. How can I resolve this issue?
You can find my code on jsFiddle
function getline() {
downloadUrl("line.php", function(doc) {
var g = google.maps;
var xmlDoc = xmlParse(doc);
bounds = new google.maps.LatLngBounds();
// ========= Now process the polylines ===========
var lines = xmlDoc.documentElement.getElementsByTagName("line");
// read each line
for (var a = 0; a < lines.length; a++) {
// get any line attributes
var colour = lines[a].getAttribute("colour");
var width = parseFloat(lines[a].getAttribute("width"));
var diameter = lines[a].getAttribute("diameter");
var project = lines[a].getAttribute("projectid");
var contract = lines[a].getAttribute("contract");
var comp = lines[a].getAttribute("complated");
var id = lines[a].getAttribute("id_line");
// read each point on that line
var points = lines[a].getElementsByTagName("point");
var pts = [];
var length = 0;
var point = null;
for (var i = 0; i < points.length; i++) {
pts[i] = new g.LatLng(parseFloat(points[i].getAttribute("lng")),
parseFloat(points[i].getAttribute("lat")));
if (i > 0) {
length += pts[i-1].distanceFrom(pts[i]);
if (isNaN(length)) { alert("["+i+"] length="+length+" segment="+pts[i-1].distanceFrom(pts[i])) };
}
bounds.extend(pts[i]);
point = pts[parseInt(i/2)];
var info = "<b> Contract: </b>" + contract + " <br/> <b>Project: </b>" + project +"<br/> <b>Diameter: </b>" + diameter + " <br/> <b>Complated: </b>" + comp + " <hr><br/><a class=\"inline-link-1\" href=\"#\">Change Data</a> <a class=\"inline-link-1\" href=\"#\">Edit</a> >" + id +"" ;
}
// length *= 0.000621371192; // miles/meter
if (comp < 1) {
colorr = '#FA0505' }
if (comp > 0 && comp < 25 ) {
colorr = '#FFA640' }
if (comp > 24 && comp < 50) {
colorr = '#FFFD91' }
if (comp > 49 && comp < 75) {
colorr = '#E8E400' }
if (comp > 74 && comp < 100) {
colorr = '#BFFFAD' }
if (comp == 100) {
colorr = '#0F8500' }
var polyline = new g.Polyline({
map:map,
path:pts,
strokeColor:colorr,
strokeWeight:width,
clickable: true
});
//createClickablePolyline(polyloine, html, label, point, length);
// map.addOverlay(polyline);
google.maps.event.addListener(polyline,'mouseover', function() {
this.setOptions({strokeColor: '#690469' });
this.setOptions({strokeOpacity: 1.0 });
this.setOptions({strokeWeight: 4 });
});
google.maps.event.addListener(polyline,'mouseout', function() {
this.setOptions({strokeColor: colorr });
this.setOptions({strokeOpacity: 1.0 });
this.setOptions({strokeWeight: 4 });
});
var mpenc = new google.maps.InfoWindow();
google.maps.event.addListener(polyline,'click', function(event) {
mpenc.setContent(info, this);
mpenc.setPosition(event.latLng, this);
mpenc.open(map);
});
}
map.fitBounds(bounds);
});
}