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);

Answer 3

As of now, the API allows you to only have to push the new LatLng object to the path for it to be updated on the map.

As their Complex Polyline example shows, you can do:

var path = poly.getPath()
path.push(latLng)

Where poly is your google.maps.Polyline and latLng a google.maps.LatLng.