Using the Google Maps API v3 I've been able to update multiple positions of markers via an AJAX call. However, it lacks any transition. Code below:
if ( !latlong.equals( point.latlong ) ) { point.latlong = latlong; point.marker.setPosition(latlong); }
The drawback is that setPosition
has no native animation method. Does anyone know any methods for extending setPosition
so the marker can fluently "move" from it's old to new position? Or any methods available? I have not been able to find any documentation. Thanks!
The transition() and moveMarker() are used to move marker smoothly on click on the Google map.
There is a method makeMarker() you just need to call from onMapReady() method . There is two method rotateMarker() and moveVechile() to rotate and move marker. Hope this will help you.
I did not find any native way to create this animation. You can create your own animation by stepping the position from the current point to the final point using the setPosition. Here is a code snippet to give you an idea:
var map = undefined; var marker = undefined; var position = [43, -89]; function initialize() { var latlng = new google.maps.LatLng(position[0], position[1]); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); marker = new google.maps.Marker({ position: latlng, map: map, title: "Your current location!" }); google.maps.event.addListener(map, 'click', function(me) { var result = [me.latLng.lat(), me.latLng.lng()]; transition(result); }); } var numDeltas = 100; var delay = 10; //milliseconds var i = 0; var deltaLat; var deltaLng; function transition(result){ i = 0; deltaLat = (result[0] - position[0])/numDeltas; deltaLng = (result[1] - position[1])/numDeltas; moveMarker(); } function moveMarker(){ position[0] += deltaLat; position[1] += deltaLng; var latlng = new google.maps.LatLng(position[0], position[1]); marker.setPosition(latlng); if(i!=numDeltas){ i++; setTimeout(moveMarker, delay); } }
This can probably be cleaned up a bit, but will give you a good start. I am using JavaScript's setTimeout method to create the animation. The initial call to 'transition' gets the animation started. The parameter to 'transition' is a two element array [lat, lng]. The 'transition' function calculates the step sizes for lat and lng based upon a couple of animation parametes (numDeltas, delay). It then calls 'moveMarker'. The function 'moveMarker' keeps a simple counter to indicate when the marker has reached the final destination. If not there, it calls itself again.
Here is a jsFiddle of the code working: https://jsfiddle.net/rcravens/RFHKd/2363/
Hope this helps.
Bob
In case you want smooth animations (with easing), these libraries should help:
https://github.com/terikon/marker-animate-unobtrusive
http://terikon.github.io/marker-animate-unobtrusive/demo/unobtrusive/markermove-sliding.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With