CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-polyline
Rachnog
Rachnog

Reputation: 353

Google maps: Live drawing and updating a Polyline

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/

Upvotes: 10

Views: 22268

Answers (3)

geocodezip
geocodezip

Reputation: 161334

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>

Upvotes: 12

Preview
Preview

Reputation: 35806

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.

Upvotes: 1

Leonardo Balzaretti
Leonardo Balzaretti

Reputation: 21

Try the code below:

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

Upvotes: 2

Related Questions