Google map, polyline draws "extra" line -can't see what's going on

Question

I query 2 "sets" of coordinates from a database, showing a track that we have flown a balloon. I place the markers during takeoff and landing. Now I want to draw a polyline between takeoff and landing in the 2 tracks, but for some reason also the 2 landing sites linked with the polyline. Example: http://minballontur.dk/all/showtracknew.php

I cannot figure out what happens - I try to write the length of my coordinate array to 0, in each loop, but it does not help.

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

[Your code (from your map) works for me](http://jsfiddle.net/bhp611st/1/) (I see two separate lines). My version doesn't have the asynchronous downloadUrl call, so it might have to do with variables being shared between those two asynchronous requests. Probably should use a new instance of the `flightCoordinates` array (either use a different name or declare it with `var` inside the callback function) — geocodezip, Aug 12 '15 at 19:57

geocodezip · Accepted Answer · 2015-08-12T20:15:28.710

You are using the same array of coordinates in both asynchronous callback functions. It is being reset to 0 length outside of the callback functions, before either of them runs, so you are ending up with all the coordinates from both polylines in the second one.

Something like this should work:

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;

<?php while($row = mysql_fetch_array($result)) { ?>
      downloadUrl("phpsqlajax_genxmlall.php?LogDate=<?php echo $row['Log_Date'] ?>&TimeOfDay=<?php echo $row['TimeOfDay'] ?>&Log_Name=<?php echo $row['Log_Name'] ?>", function(data) {
        // declare a new array of coordinates in each callback function.
        var flightPlanCoordinates = [];
        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);

      }); //Download URL 
  <?php } ?>  //End DB Loop
} // Load

hmnn....I have tried the change without success. You only added this line var flightPlanCoordinates = []; correct ? — Ulrik Hvidtfeldt, Aug 12 '15 at 21:16
I removed the other instances that referenced that as well (BTW, I don't see that change in the ["live" version](http://minballontur.dk/all/showtracknew.php)). You might need to add a `var` before the `flightPath` declaration as well, but I wouldn't think that would be necessary. — geocodezip, Aug 12 '15 at 21:41
Work perfect now - I placed it outside the callback again - doh.....! Thanks a million :-D — Ulrik Hvidtfeldt, Aug 12 '15 at 21:56

Google map, polyline draws "extra" line -can't see what's going on

1 Answers1