Problemer med google map ployline.
HejJeg henter 2 "sæt" koordinater i databasen der viser et track, som vi har fløjet med en ballon.
Jeg placerer markører ved start og landing.
nu vil jeg "trække en polyline" mellem start og landing på de 2 track, men af en grund jeg ikke kan gennemskue, bliver også de 2 landingssteder forbundet.
Se evt her : http://minballontur.dk/all/showtracknew.php
Jeg kan ikke gennemskue hvad der sker - jeg prøver at skrive længden af mit cordinat array til 0, i hvert loop, men det hjælper ikke.
Hvem kan gennemskue mit problem ?
function load() {
var lastlat;
var lastlng;
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.44, 11.80),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow;
var flightPlanCoordinates = [];
<?php while($row = mysql_fetch_array($result)) { ?>
// Change this depending on the name of your PHP file
flightPlanCoordinates.length = 0;
downloadUrl("phpsqlajax_genxmlall.php?LogDate=<?php echo $row['Log_Date'] ?>&TimeOfDay=<?php echo $row['TimeOfDay'] ?>&Log_Name=<?php echo $row['Log_Name'] ?>", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
flightPlanCoordinates[i] = new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng"));
}
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2
});
flightPath.setMap(map);
//Show first marker
var name = markers[0].getAttribute("name");
var address = markers[0].getAttribute("address");
var type = markers[0].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/> Status : "+type;
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);
lastlat = markers[0].getAttribute("lat");
lastlng = markers[0].getAttribute("lng");
//Show last marker
var point1 = new google.maps.LatLng(
parseFloat(markers[0].getAttribute("lat")),
parseFloat(markers[0].getAttribute("lng")));
var point2 = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var distance = getDistance(point1, point2);
var distancekm = Math.round((distance/1000)*10)/10;
var name = markers[markers.length-1].getAttribute("name");
var address = markers[markers.length-1].getAttribute("address");
var type = markers[markers.length-1].getAttribute("BalloonStatus");
var point = new google.maps.LatLng(
parseFloat(markers[markers.length-1].getAttribute("lat")),
parseFloat(markers[markers.length-1].getAttribute("lng")));
var html = "<div style = 'height:75px;width:250px'><b>" + name + "</b> <br/>" + address +"<br/>Distance : "+ distancekm +" km<br/> Status : "+type;
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);
lastlat = markers[markers.length-1].getAttribute("lat");
lastlng = markers[markers.length-1].getAttribute("lng");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
bounds.extend(new google.maps.LatLng(markers[i].getAttribute("lat"), markers[i].getAttribute("lng")));
}
map.fitBounds(bounds);
}); //Downlaod URL
<?php } ?> //End DB Loop
} // Load