-1

How can I rotate marker with animation in Google Map Like Uber or OLA Cab app? I have done movement of marker from source to destination LatLng. But need to rotate it with animation before moving like OLA app.

duncan
  • 31,401
  • 13
  • 78
  • 99
Goutam Kumar
  • 9
  • 1
  • 2

1 Answers1

0

Google map marker icon has a property rotation which can be set accordingly.

Example:

var marker = new google.maps.Marker({
    position : new google.maps.LatLng(35.678494,139.744205),
    map: myMap,
    icon: {
        url: '../images/car.png',
    // This marker is 20 pixels wide by 32 pixels high.
        scaledSize: new google.maps.Size(50, 50),
        rotation: 45
    }
  });

This will rotate your marker. You can also set this property on some event like button click of value changed etc.

But if you want rotation with animation then you can try adding this in your css file:

img[src^='../images/car.png']{
   -webkit-transition: -webkit-transform .8s ease-in-out;
   transition: transform .8s ease-in-out;
}

img[src^='../images/car.png']:hover{
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

Reference : https://jsfiddle.net/doktormolle/nBsh4/

I found another great example of custom animation http://dylanvann.com/custom-animated-google-maps-markers/

Avantika Saini
  • 792
  • 4
  • 9