https://github.com/nunof07/maps-marker-animate

Animation methods for Google Maps Marker class
https://github.com/nunof07/maps-marker-animate

google-maps

Last synced: about 21 hours ago
JSON representation

Animation methods for Google Maps Marker class

• Host: GitHub
• URL: https://github.com/nunof07/maps-marker-animate
• Owner: nunof07
• License: mit
• Created: 2015-09-08T12:53:18.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-02-19T08:03:10.000Z (over 8 years ago)
• Last Synced: 2024-10-22T21:29:39.083Z (15 days ago)
• Topics: google-maps
• Language: HTML
• Size: 6.84 KB
• Stars: 3
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Google Maps Marker Animate

Custom animation methods for Google Maps Marker class.

- animateTo method based on [marker-animate](https://github.com/combatwombat/marker-animate)

- Before using include a requestAnimationFrame polyfill such as [request-frame](https://github.com/julienetie/request-frame)

## Usage

First include the necessary scripts.

```html

```

Create your map and markers and then call the methods on a marker.

```javascript

// disable bounce animation

marker.bounce(false);

// animate marker to a new position

marker.animateTo(newPosition, duration, completeCallback);

```

## Demos

- [Demo 1][demo-animateto]: click anywhere on the map to move the pin to that position

- [Demo 2][demo-bounce]: custom bounce animation

- [Demo 3][demo-bounce-icons]: custom bounce animation on Markers using [Map-Icons]

[demo-animateto]: https://cdn.rawgit.com/nunof07/maps-marker-animate/v0.1.1/demos/animateto.html

[demo-bounce]: https://cdn.rawgit.com/nunof07/maps-marker-animate/v0.1.1/demos/bounce.html

[demo-bounce-icons]: https://cdn.rawgit.com/nunof07/maps-marker-animate/v0.1.1/demos/bounce-map-icons.html

[map-icons]: https://github.com/scottdejonge/Map-Icons/

## Why?

A custom bounce animation method is useful if you are attaching anything to the marker and want it animated together.

The Google Maps API already includes a bounce animation, but it doesn't update the marker's position when bouncing, while this method does.