Skip to content
This repository was archived by the owner on Jun 23, 2025. It is now read-only.

Commit c57ab39

Browse files
iWebTouchsebholstein
authored andcommitted
feat(AgmMarker): add animation field to markers
Feature to set animation for map markers Closes #580 Closes #852
1 parent 422e63b commit c57ab39

File tree

4 files changed

+42
-7
lines changed

4 files changed

+42
-7
lines changed

packages/core/directives/marker.ts

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,12 @@ let markerId = 0;
3535
* ```
3636
*/
3737
@Directive({
38-
selector: 'agm-marker'
38+
selector: 'agm-marker',
39+
inputs: [
40+
'latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable', 'iconUrl',
41+
'openInfoWindow', 'opacity', 'visible', 'zIndex', 'animation'
42+
],
43+
outputs: ['markerClick', 'dragEnd', 'mouseOver', 'mouseOut']
3944
})
4045
export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit {
4146
/**
@@ -98,6 +103,12 @@ export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit {
98103
// tslint:disable-next-line:no-input-rename
99104
@Input('markerClickable') clickable: boolean = true;
100105

106+
/**
107+
* Which animation to play when marker is added to a map.
108+
* This can be 'BOUNCE' or 'DROP'
109+
*/
110+
animation: 'BOUNCE' | 'DROP' | null;
111+
101112
/**
102113
* This event emitter gets emitted when the user clicks on the marker.
103114
*/
@@ -182,6 +193,9 @@ export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit {
182193
if (changes['clickable']) {
183194
this._markerManager.updateClickable(this);
184195
}
196+
if (changes['animation']) {
197+
this._markerManager.updateAnimation(this);
198+
}
185199
}
186200

187201
private _addEventListeners() {

packages/core/services/google-maps-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export interface Marker extends MVCObject {
3333
setOpacity(opacity: number): void;
3434
setVisible(visible: boolean): void;
3535
setZIndex(zIndex: number): void;
36+
setAnimation(animation: any): void;
3637
getLabel(): MarkerLabel;
3738
setClickable(clickable: boolean): void;
3839
}
@@ -48,6 +49,7 @@ export interface MarkerOptions {
4849
visible?: boolean;
4950
zIndex?: number;
5051
clickable: boolean;
52+
animation?: any;
5153
}
5254

5355
export interface MarkerLabel {

packages/core/services/managers/marker-manager.spec.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ describe('MarkerManager', () => {
3939
visible: true,
4040
zIndex: 1,
4141
title: undefined,
42-
clickable: true
42+
clickable: true,
43+
animation: undefined
4344
});
4445
}));
4546
});
@@ -86,7 +87,8 @@ describe('MarkerManager', () => {
8687
visible: true,
8788
zIndex: 1,
8889
title: undefined,
89-
clickable: true
90+
clickable: true,
91+
animation: undefined
9092
});
9193
const iconUrl = 'http://angular-maps.com/icon.png';
9294
newMarker.iconUrl = iconUrl;
@@ -119,7 +121,8 @@ describe('MarkerManager', () => {
119121
opacity: 1,
120122
zIndex: 1,
121123
title: undefined,
122-
clickable: true
124+
clickable: true,
125+
animation: undefined
123126
});
124127
const opacity = 0.4;
125128
newMarker.opacity = opacity;
@@ -153,7 +156,8 @@ describe('MarkerManager', () => {
153156
opacity: 1,
154157
zIndex: 1,
155158
title: undefined,
156-
clickable: true
159+
clickable: true,
160+
animation: undefined
157161
});
158162
newMarker.visible = true;
159163
return markerManager.updateVisible(newMarker).then(
@@ -185,7 +189,8 @@ describe('MarkerManager', () => {
185189
opacity: 1,
186190
zIndex: 1,
187191
title: undefined,
188-
clickable: true
192+
clickable: true,
193+
animation: undefined
189194
});
190195
const zIndex = 10;
191196
newMarker.zIndex = zIndex;

packages/core/services/managers/marker-manager.ts

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {AgmMarker} from './../../directives/marker';
77
import {GoogleMapsAPIWrapper} from './../google-maps-api-wrapper';
88
import {Marker} from './../google-maps-types';
99

10+
declare var google: any;
11+
1012
@Injectable()
1113
export class MarkerManager {
1214
protected _markers: Map<AgmMarker, Promise<Marker>> =
@@ -65,6 +67,16 @@ export class MarkerManager {
6567
return this._markers.get(marker).then((m: Marker) => m.setClickable(marker.clickable));
6668
}
6769

70+
updateAnimation(marker: AgmMarker): Promise<void> {
71+
return this._markers.get(marker).then((m: Marker) => {
72+
if (typeof marker.animation === 'string') {
73+
m.setAnimation(google.maps.Animation[marker.animation]);
74+
} else {
75+
m.setAnimation(marker.animation);
76+
}
77+
});
78+
}
79+
6880
addMarker(marker: AgmMarker) {
6981
const markerPromise = this._mapsWrapper.createMarker({
7082
position: {lat: marker.latitude, lng: marker.longitude},
@@ -75,8 +87,10 @@ export class MarkerManager {
7587
visible: marker.visible,
7688
zIndex: marker.zIndex,
7789
title: marker.title,
78-
clickable: marker.clickable
90+
clickable: marker.clickable,
91+
animation: (typeof marker.animation === 'string') ? google.maps.Animation[marker.animation] : marker.animation
7992
});
93+
8094
this._markers.set(marker, markerPromise);
8195
}
8296

0 commit comments

Comments
 (0)