Question

105

Google maps: Live drawing and updating a Polyline

rated 0 times [ 111] [ 6] / answers: 1 / hits: 21480 / 11 Years ago, tue, october 29, 2013, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harveys

Add To Favorites

Follow

Total Points: 113

Total Questions: 88

Total Answers: 79

Location: Oman

Member since Fri, Dec 23, 2022

1 Year ago

answered 11 Years ago kaia · Accepted Answer

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>