Google Maps API JavaScript API v3 Marker Animation Based on a Known Route

Question

I was looking for a good solution for marker animation using the Google Maps JavaScript V3 API. The marker will animate along a predefined path defined using latitude and longitude coordinates.

For all the research I have done, I still cannot find a solution compatible with version 3 of the Google Maps API API. Looking at this earlier StackOverflow post, apparently, it was possible to animate using version 2 of the API using GRoute and setting the marker to points along the route using a timer.

Here is the code that was previously offered. I understand how this works logically, but I have no idea how this can be ported to work with version 3 of the Google Maps API:

 function moveToStep(yourmarker,yourroute,c) { if {yourroute.getNumSteps() > c) { yourmarker.setLatLng(yourroute.getStep(c).getLatLng()); window.setTimeout(function(){ moveToStep(yourmarker,yourroute,c+1); },500); } } moveToStep(marker,route,0); 

There is no mention of GRoute , getNumSteps (which, I believe, returns the number of coordinates defined on this route, setLatLng (I believe that it receives the latitude and longitude coordinates of the marker) or moveToStep (which actually moves the marker) in version 3 full documentation and link .

It seems that Google has completely rewritten the API from version 2 to version 3, as these functions (which seem pretty basic) have all been either removed or renamed (I'm not sure which one).

The only mention of animations I've ever seen in version 3 of the JavaScript API was for animating markers when they first appeared on the map, making them either BOUNCE or DROP . However, they actually do not move the latitude / longitude coordinates of the marker, but simply the way they are located on the map. These two marker animations are mentioned in the API link here .

See the same StackOverflow column above for a link here .)

Ultimately, I think I have two questions:

1: is it possible to animate markers along a given path using the Google Maps V3 API?

and if not, then

2: Will I be forced to use an outdated library to achieve this or are there other well-known solutions?

Thanks so much for any input that can help solve this problem!

Answer 1

Yes. You can animate a marker along a route from DirectionsService in version 3.

This example uses a version of the Mike Williams era library ported to v3.

proof of conceptual scripts

code snippet:

  var map; var directionDisplay; var directionsService; var stepDisplay; var markerArray = []; var position; var marker = null; var polyline = null; var poly2 = null; var speed = 0.000005, wait = 1; var infowindow = null; var myPano; var panoClient; var nextPanoId; var timerHandle = null; function createMarker(latlng, label, html) { // alert("createMarker("+latlng+","+label+","+html+","+color+")"); var contentString = '<b>' + label + '</b><br>' + html; var marker = new google.maps.Marker({ position: latlng, map: map, title: label, zIndex: Math.round(latlng.lat() * -100000) << 5 }); marker.myname = label; // gmarkers.push(marker); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(contentString); infowindow.open(map, marker); }); return marker; } function initialize() { infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150, 50) }); // Instantiate a directions service. directionsService = new google.maps.DirectionsService(); // Create a map and center it on Manhattan. var myOptions = { zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); address = 'new york' geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': address }, function(results, status) { map.setCenter(results[0].geometry.location); }); // Create a renderer for directions and bind it to the map. var rendererOptions = { map: map } directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); // Instantiate an info window to hold step text. stepDisplay = new google.maps.InfoWindow(); polyline = new google.maps.Polyline({ path: [], strokeColor: '#FF0000', strokeWeight: 3 }); poly2 = new google.maps.Polyline({ path: [], strokeColor: '#FF0000', strokeWeight: 3 }); } var steps = [] function calcRoute() { if (timerHandle) { clearTimeout(timerHandle); } if (marker) { marker.setMap(null); } polyline.setMap(null); poly2.setMap(null); directionsDisplay.setMap(null); polyline = new google.maps.Polyline({ path: [], strokeColor: '#FF0000', strokeWeight: 3 }); poly2 = new google.maps.Polyline({ path: [], strokeColor: '#FF0000', strokeWeight: 3 }); // Create a renderer for directions and bind it to the map. var rendererOptions = { map: map } directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); var start = document.getElementById("start").value; var end = document.getElementById("end").value; var travelMode = google.maps.DirectionsTravelMode.DRIVING var request = { origin: start, destination: end, travelMode: travelMode }; // Route the directions and pass the response to a // function to create markers for each step. directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); var bounds = new google.maps.LatLngBounds(); var route = response.routes[0]; startLocation = new Object(); endLocation = new Object(); // For each route, display summary information. var path = response.routes[0].overview_path; var legs = response.routes[0].legs; for (i = 0; i < legs.length; i++) { if (i == 0) { startLocation.latlng = legs[i].start_location; startLocation.address = legs[i].start_address; // marker = google.maps.Marker({map:map,position: startLocation.latlng}); marker = createMarker(legs[i].start_location, "start", legs[i].start_address, "green"); } endLocation.latlng = legs[i].end_location; endLocation.address = legs[i].end_address; var steps = legs[i].steps; for (j = 0; j < steps.length; j++) { var nextSegment = steps[j].path; for (k = 0; k < nextSegment.length; k++) { polyline.getPath().push(nextSegment[k]); bounds.extend(nextSegment[k]); } } } polyline.setMap(map); map.fitBounds(bounds); // createMarker(endLocation.latlng,"end",endLocation.address,"red"); map.setZoom(18); startAnimation(); } }); } var step = 50; // 5; // metres var tick = 100; // milliseconds var eol; var k = 0; var stepnum = 0; var speed = ""; var lastVertex = 1; //=============== animation functions ====================== function updatePoly(d) { // Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow if (poly2.getPath().getLength() > 20) { poly2 = new google.maps.Polyline([polyline.getPath().getAt(lastVertex - 1)]); // map.addOverlay(poly2) } if (polyline.GetIndexAtDistance(d) < lastVertex + 2) { if (poly2.getPath().getLength() > 1) { poly2.getPath().removeAt(poly2.getPath().getLength() - 1) } poly2.getPath().insertAt(poly2.getPath().getLength(), polyline.GetPointAtDistance(d)); } else { poly2.getPath().insertAt(poly2.getPath().getLength(), endLocation.latlng); } } function animate(d) { // alert("animate("+d+")"); if (d > eol) { map.panTo(endLocation.latlng); marker.setPosition(endLocation.latlng); return; } var p = polyline.GetPointAtDistance(d); map.panTo(p); marker.setPosition(p); updatePoly(d); timerHandle = setTimeout("animate(" + (d + step) + ")", tick); } function startAnimation() { eol = google.maps.geometry.spherical.computeLength(polyline.getPath()); map.setCenter(polyline.getPath().getAt(0)); // map.addOverlay(new google.maps.Marker(polyline.getAt(0),G_START_ICON)); // map.addOverlay(new GMarker(polyline.getVertex(polyline.getVertexCount()-1),G_END_ICON)); // marker = new google.maps.Marker({location:polyline.getPath().getAt(0)} /* ,{icon:car} */); // map.addOverlay(marker); poly2 = new google.maps.Polyline({ path: [polyline.getPath().getAt(0)], strokeColor: "#0000FF", strokeWeight: 10 }); // map.addOverlay(poly2); setTimeout("animate(50)", 2000); // Allow time for the initial map display } //=============== ~animation funcitons ===================== google.maps.event.addDomListener(window, "load", initialize); /*********************************************************************\ * * * epolys.js by Mike Williams * * updated to API v3 by Larry Ross * * * * A Google Maps API Extension * * * * Adds various Methods to google.maps.Polygon and google.maps.Polyline * * * * .Contains(latlng) returns true is the poly contains the specified * * GLatLng * * * * .Area() returns the approximate area of a poly that is * * not self-intersecting * * * * .Distance() returns the length of the poly path * * * * .Bounds() returns a GLatLngBounds that bounds the poly * * * * .GetPointAtDistance() returns a GLatLng at the specified distance * * along the path. * * The distance is specified in metres * * Reurns null if the path is shorter than that * * * * .GetPointsAtDistance() returns an array of GLatLngs at the * * specified interval along the path. * * The distance is specified in metres * * * * .GetIndexAtDistance() returns the vertex number at the specified * * distance along the path. * * The distance is specified in metres * * Returns null if the path is shorter than that * * * * .Bearing(v1?,v2?) returns the bearing between two vertices * * if v1 is null, returns bearing from first to last * * if v2 is null, returns bearing from v1 to next * * * * * *********************************************************************** * * * This Javascript is provided by Mike Williams * * Blackpool Community Church Javascript Team * * http://www.blackpoolchurch.org/ * * http://econym.org.uk/gmap/ * * * * This work is licenced under a Creative Commons Licence * * http://creativecommons.org/licenses/by/2.0/uk/ * * * *********************************************************************** * * * Version 1.1 6-Jun-2007 * * Version 1.2 1-Jul-2007 - fix: Bounds was omitting vertex zero * * add: Bearing * * Version 1.3 28-Nov-2008 add: GetPointsAtDistance() * * Version 1.4 12-Jan-2009 fix: GetPointsAtDistance() * * Version 3.0 11-Aug-2010 update to v3 * * * \*********************************************************************/ google.maps.LatLng.prototype.latRadians = function() { return this.lat() * Math.PI / 180; } google.maps.LatLng.prototype.lngRadians = function() { return this.lng() * Math.PI / 180; } // === A method which returns a GLatLng of a point a given distance along the path === // === Returns null if the path is shorter than the specified distance === google.maps.Polyline.prototype.GetPointAtDistance = function(metres) { // some awkward special cases if (metres == 0) return this.getPath().getAt(0); if (metres < 0) return null; if (this.getPath().getLength() < 2) return null; var dist = 0; var olddist = 0; for (var i = 1; (i < this.getPath().getLength() && dist < metres); i++) { olddist = dist; dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1)); } if (dist < metres) { return null; } var p1 = this.getPath().getAt(i - 2); var p2 = this.getPath().getAt(i - 1); var m = (metres - olddist) / (dist - olddist); return new google.maps.LatLng(p1.lat() + (p2.lat() - p1.lat()) * m, p1.lng() + (p2.lng() - p1.lng()) * m); } // === A method which returns the Vertex number at a given distance along the path === // === Returns null if the path is shorter than the specified distance === google.maps.Polyline.prototype.GetIndexAtDistance = function(metres) { // some awkward special cases if (metres == 0) return this.getPath().getAt(0); if (metres < 0) return null; var dist = 0; var olddist = 0; for (var i = 1; (i < this.getPath().getLength() && dist < metres); i++) { olddist = dist; dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1)); } if (dist < metres) { return null; } return i; } 

 html { height: 100%; } body { height: 100%; margin: 0px; font-family: Helvetica, Arial; } 

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> <div id="tools"> start: <input type="text" name="start" id="start" value="union square, NY" />end: <input type="text" name="end" id="end" value="times square, NY" /> <input type="submit" onclick="calcRoute();" /> </div> <div id="map_canvas" style="width:100%;height:100%;"></div> 

Answer 2

One approach is to create a series of locations along the route (for example, 500 different locations), and then call marker.setPosition(nextLocation) every X milliseconds using, for example, setTimeout.

Alternatively, you can use the symbol on your polyline by setting the percentage along the path, again in the setTimeout approach. This has the advantage that you do not need to calculate locations, you can just slowly move it a few kilograms for every X milliseconds.