diff --git a/src/core/directives/marker.ts b/src/core/directives/marker.ts index b516eb61d..4a0fecbb6 100644 --- 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 index 9815f0de6..9f7e0ca0c 100644 --- 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 index 4cdd06671..fa46abcd1 100644 --- 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> = @@ -61,6 +63,16 @@ export class MarkerManager { return this._markers.get(marker).then((m: Marker) => m.setZIndex(marker.zIndex)); } + updateAnimation(marker: AgmMarker): Promise { + 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); }