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:
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/
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>