feat(AgmMarker): add animation field to markers

Feature to set animation for map markers issue: Add animation field to markers sebholstein#580
xdimension · Feb 11, 2017 · f7f483c · f7f483c
1 parent 500dce0
commit f7f483c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/src/core/directives/marker.ts b/src/core/directives/marker.ts
@@ -37,7 +37,7 @@ let markerId = 0;
   selector: 'agm-marker',
   inputs: [
     'latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable', 'iconUrl',
-    'openInfoWindow', 'opacity', 'visible', 'zIndex'
+    'openInfoWindow', 'opacity', 'visible', 'zIndex', 'animation'
   ],
   outputs: ['markerClick', 'dragEnd', 'mouseOver', 'mouseOut']
 })
@@ -95,6 +95,12 @@ export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit {
    */
   zIndex: number = 1;
 
+  /**
+   * Which animation to play when marker is added to a map.
+   * This can be 'BOUNCE' or 'DROP'
+   */
+  animation: 'BOUNCE' | 'DROP' | null;
+
   /**
    * This event emitter gets emitted when the user clicks on the marker.
    */
@@ -176,6 +182,9 @@ export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit {
     if (changes['zIndex']) {
       this._markerManager.updateZIndex(this);
     }
+    if (changes['animation']) {
+      this._markerManager.updateAnimation(this);
+    }
   }
 
   private _addEventListeners() {

diff --git a/src/core/services/google-maps-types.ts b/src/core/services/google-maps-types.ts
@@ -31,6 +31,7 @@ export interface Marker extends MVCObject {
   setOpacity(opacity: number): void;
   setVisible(visible: boolean): void;
   setZIndex(zIndex: number): void;
+  setAnimation(animation: any): void;
   getLabel(): MarkerLabel;
 }
 
@@ -44,6 +45,7 @@ export interface MarkerOptions {
   opacity?: number;
   visible?: boolean;
   zIndex?: number;
+  animation?: any;
 }
 
 export interface MarkerLabel {

diff --git a/src/core/services/managers/marker-manager.ts b/src/core/services/managers/marker-manager.ts
@@ -7,6 +7,8 @@ import {AgmMarker} from './../../directives/marker';
 import {GoogleMapsAPIWrapper} from './../google-maps-api-wrapper';
 import {Marker} from './../google-maps-types';
 
+declare var google: any;
+
 @Injectable()
 export class MarkerManager {
   private _markers: Map<AgmMarker, Promise<Marker>> =
@@ -61,6 +63,16 @@ export class MarkerManager {
     return this._markers.get(marker).then((m: Marker) => m.setZIndex(marker.zIndex));
   }
 
+  updateAnimation(marker: AgmMarker): Promise<void> {
+    return this._markers.get(marker).then((m: Marker) => {
+      if (typeof marker.animation === 'string') {
+        m.setAnimation(google.maps.Animation[marker.animation]);
+      } else {
+        m.setAnimation(marker.animation);
+      }
+    });
+  }
+
   addMarker(marker: AgmMarker) {
     const markerPromise = this._mapsWrapper.createMarker({
       position: {lat: marker.latitude, lng: marker.longitude},
@@ -70,8 +82,10 @@ export class MarkerManager {
       opacity: marker.opacity,
       visible: marker.visible,
       zIndex: marker.zIndex,
-      title: marker.title
+      title: marker.title,
+      animation: (typeof marker.animation === 'string') ? google.maps.Animation[marker.animation] : marker.animation
     });
+
     this._markers.set(marker, markerPromise);
   }