How do i update Google Maps polyline in real time?

Question

what i have tried to get done here is to get gps cordinates from thingspeak and display them on a google map. I have been able to draw the polyline and the marker only once on the map. when i try to update the polyline path it disappears.

here is my code.

<script type="text/javascript">
    var map;
    var geocoder;
    var flightPath;
    var marker;

    function locate() {
        initMap();
        firstDraw();
    }

    //Initaite map
    function initMap() {
        var mapProp = {
            zoom: 12,
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
        geocoder = new google.maps.Geocoder;
    }

    //draw for the first time
    function firstDraw() {
        $.getJSON("https://api.thingspeak.com/channels/284335/fields/1.json?api_key=D76FD3BOO9GNZBEY&results=10&location=true", function (result) {
            var i;
            var cordinates = [];
            var lastTime=result.feeds[result.feeds.length-1];
            for (i = 0; i < result.feeds.length; i++) {
                cordinates[i] = { lat: Number(result.feeds[i].latitude), lng: Number(result.feeds[i].longitude) };

            }

            flightPath = new google.maps.Polyline({
                path: cordinates,
                strokeColor: "#0000FF",
                strokeOpacity: 0.8,
                strokeWeight: 2
            });
            flightPath.setMap(map);
            map.setCenter(cordinates[cordinates.length - 1]);
            var marker = new google.maps.Marker({
                position: cordinates[cordinates.length - 1],
                map: map,
                title: "Last Seen",
            });
        });
    }

    function updateMap()
    {
        $.getJSON("https://api.thingspeak.com/channels/284335/fields/1.json?api_key=D76FD3BOO9GNZBEY&results=1&location=true", function (result) {
            var path = flightPath.getPath();
            var newCord = { lat: Number(result.feeds[0].latitude), lng: Number(result.feeds[0].longitude) };
            path.push(newCord);
            flightPath.setPath(path);
        });

    }
 </script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfi_CDQTUC9waYxMwyJuED8DwoDJyl3F0&callback=myMap"></script>

What am i doing wrong here? Thanks in advance.

Answer 1

Your issue is that newCord is not a google.maps.LatLng object.

var newCord = { lat: Number(result.feeds[0].latitude), lng: Number(result.feeds[0].longitude) };
path.push(newCord);

getPath() retrieves a MVCArray of google.maps.LatLng objects.

from the documentation:

getPath()
Return Value: MVCArray
Retrieves the path.

While many operations that take google.maps.LatLng objects have been enhanced to take google.maps.LatLngLiteral objects, it doesn't work here. Use a google.maps.LatLng object instead:

var path = flightPath.getPath();
var newCord = new google.maps.LatLng(Number(result.feeds[0].latitude), Number(result.feeds[0].longitude));

path.push(newCord);
flightPath.setPath(path);

proof of concept fiddle

code snippet:

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map-canvas"></div>
<script type="text/javascript">
  var map;
  var geocoder;
  var flightPath;
  var marker;

  function locate() {
    initMap();
    firstDraw();
    setInterval(updateMap, 5000);
  }

  //Initiate map
  function initMap() {
    var mapProp = {
      zoom: 12,
      center: {
        lat: 0,
        lng: 0
      }
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
    geocoder = new google.maps.Geocoder;
  }

  //draw for the first time
  function firstDraw() {
    $.getJSON("https://api.thingspeak.com/channels/284335/fields/1.json?api_key=D76FD3BOO9GNZBEY&results=10&location=true", function(result) {
      var i;
      var cordinates = [];
      var lastTime = result.feeds[result.feeds.length - 1];
      for (i = 0; i < result.feeds.length; i++) {
        cordinates[i] = {
          lat: Number(result.feeds[i].latitude),
          lng: Number(result.feeds[i].longitude)
        };
      }
      flightPath = new google.maps.Polyline({
        path: cordinates,
        strokeColor: "#0000FF",
        strokeOpacity: 0.8,
        strokeWeight: 2
      });
      flightPath.setMap(map);
      map.setCenter(cordinates[cordinates.length - 1]);
      var marker = new google.maps.Marker({
        position: cordinates[cordinates.length - 1],
        map: map,
        title: "Last Seen",
      });
    });
  }

  function updateMap() {
    $.getJSON("https://api.thingspeak.com/channels/284335/fields/1.json?api_key=D76FD3BOO9GNZBEY&results=1&location=true", function(result) {
      var path = flightPath.getPath();
      var newCord = new google.maps.LatLng(Number(result.feeds[0].latitude), Number(result.feeds[0].longitude));
      path.push(newCord);
      flightPath.setPath(path);
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=locate"></script>