smooth-icon-marker

Animate Google Maps marker movement from it's position to a destination.

Usage no npm install needed!

<script type="module">
  import smoothIconMarker from 'https://cdn.skypack.dev/smooth-icon-marker';
</script>

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.
demo screenshot
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 is 100ms.

  • cbBeforeMove (function) - a callback that runs every time before the marker moves a step - Default is undefiend.

    • Arguments:
      • newPosition: google.maps.LatLng
  • cbAfterMove (function) - a callback that runs every time after the marker moves a step - Default is undefiend.

    • Arguments:
      • currentPosition: google.maps.LatLng
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);
}