Google Maps: Live Drawing and Polyline Update

Question

I'm really new to JS, sorry I don't have my code, because all I have done are helloworld examples from Google Map Docs.

So what's the problem: I want to draw a polyline depending on the current position of the user. So, every google.maps.LatLng () should have coordinates at the moment. The entire update path should appear on the map, for example, once in 5 seconds. Finally, it’s just like visualizing a morning walk on a map, something like that.

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

• How to add current position to var flightPlanCoordinates []
• How to do all this update in live mode

Thanks for any help :)

UPD:

trying to do something like this but not working

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 a cool example of how it should be http://kasheftin.imtqy.com/gmaps/

Answer 1

You need to update the polyline in a new way (the path that was 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 the 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"></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

At the moment, the API only allows you to click the new LatLng object on path so that it is updated on the map.

As the 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 .