Google maps: Live drawing and updating a Polyline

Question

I'm really newbie in JS, so sorry, that I have no my code attached, 'cause all what I did - "helloworld" examples from Google Map Docs.

So, what's a problem: I want to draw a polyline depending on user's current position. So, each one google.maps.LatLng() should have coordinates at the moment. On the map should emerge the whole way updating, for example, once per 5 seconds. At last point it's just like visualization of a morning walking on a map, something like that.

I know, how to "draw" a map and add points in var flightPlanCoordinates[], and I ask for some examples or links, where I can find:

• How add a current position into var flightPlanCoordinates[]
• How make all this stuff updating in "live" mode

Thanks for any help :)

UPD:

trying to do stuff like this, but doesn't work

var path = poly.getPath();

var latitude  = position.coords.latitude;
var longitude = position.coords.longitude;

path.push(new google.maps.LatLng(latitude, longitude));

UPD2: here's cool example, how it should be http://kasheftin.github.io/gmaps/

Answer 1

You need to update the polyline with the new path (the path that has been updated with the new point):

// get existing path
var path = poly.getPath();
// add new point
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
// update the polyline with the updated path
poly.setPath(path);

code snippet: (click on map to add points to the polyline)

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var poly = new google.maps.Polyline({
    map: map,
    path: []
  })
  google.maps.event.addListener(map, 'click', function(evt) {
    // get existing path
    var path = poly.getPath();
    // add new point (use the position from the click event)
    path.push(new google.maps.LatLng(evt.latLng.lat(), evt.latLng.lng()));
    // update the polyline with the updated path
    poly.setPath(path);
  })
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Answer 2

Try the code below:

var path = poly.getPath().getArray();
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
poly.setPath(path);