README
smooth-icon-marker
Animate Google Maps marker movement from it's position to a destination.
Demo
Click on the image to see a live demo.
Run demo locally
git clone git@github.com:A-Maged/smooth-icon-marker.git
cd smooth-icon-marker/src/demo
yarn && yarn start
Install
npm install smooth-icon-marker
# or using yarn
yarn add smooth-icon-marker
Add google maps SDK and Geometry library before your script
<script src="https://maps.googleapis.com/maps/api/js?&libraries=geometry"></script>
<script src="your-app.js"></script>
Usage
Import
import SmoothMarker from 'smooth-icon-marker';
animatedSetPosition(destination: google.maps.LatLng)
Use this instead of the default SetPosition
method to get the animation effect.
const startPosition = new google.maps.LatLng(
35.9588769088931,
-115.12207388877869
);
const endPosition = new google.maps.LatLng(
35.95950326404771,
-115.12020304799081
);
let marker = new SmoothMarker({
map,
position: startPosition,
});
marker.animatedSetPosition(endPosition);
Options
This library extends google maps marker. It inherits all of it's options and methods and it adds to them:
durationMs
(number) - Animation duration in milliseconds - Default is100ms
.cbBeforeMove
(function) - a callback that runs every time before the marker moves a step - Default isundefiend
.- Arguments:
- newPosition:
google.maps.LatLng
- newPosition:
- Arguments:
cbAfterMove
(function) - a callback that runs every time after the marker moves a step - Default isundefiend
.- Arguments:
- currentPosition:
google.maps.LatLng
- currentPosition:
- Arguments:
var marker = new SmoothMarker({
durationMs: 80, // Tweak for your own use case
cbAfterMove: drawMarkerPath,
map,
position: startPosition,
});
var trailLine = new google.maps.Polyline({
path: [],
map,
});
function drawMarkerPath(newPosition: google.maps.LatLng) {
trailLine.getPath().push(newPosition);
}