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

Commit 13ec2a1

Browse files
committed
feat(SebmGoogleMapMarker): add custom icon support
You can define a custom via a custom URL like this: ``` <sebm-google-map-marker [iconUrl]="http://example.com/icon.png"> </sebm-google-map-marker> ``` Closes #123 Closes #224
1 parent 0df5da8 commit 13ec2a1

File tree

4 files changed

+45
-5
lines changed

4 files changed

+45
-5
lines changed

src/directives/google-map-marker.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ let markerId = 0;
3232
*/
3333
@Directive({
3434
selector: 'sebm-google-map-marker',
35-
inputs: ['latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable'],
35+
inputs: ['latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable', 'iconUrl'],
3636
outputs: ['markerClick', 'dragEnd']
3737
})
3838
export class SebmGoogleMapMarker implements OnDestroy,
@@ -62,6 +62,11 @@ export class SebmGoogleMapMarker implements OnDestroy,
6262
*/
6363
draggable: boolean = false;
6464

65+
/**
66+
* Icon (the URL of the image) for the foreground.
67+
*/
68+
iconUrl: string;
69+
6570
/**
6671
* This event emitter gets emitted when the user clicks on the marker.
6772
*/
@@ -100,6 +105,9 @@ export class SebmGoogleMapMarker implements OnDestroy,
100105
if (changes['draggable']) {
101106
this._markerManager.updateDraggable(this);
102107
}
108+
if (changes['iconUrl']) {
109+
this._markerManager.updateIcon(this);
110+
}
103111
}
104112

105113
private _addEventListeners() {

src/services/google-maps-types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export interface Marker {
2424
setTitle(title: string): void;
2525
setLabel(label: string | MarkerLabel): void;
2626
setDraggable(draggable: boolean): void;
27+
setIcon(icon: string): void;
2728
getLabel(): MarkerLabel;
2829
addListener(eventType: string, fn: Function): void;
2930
}
@@ -34,6 +35,7 @@ export interface MarkerOptions {
3435
map?: GoogleMap;
3536
label?: string | MarkerLabel;
3637
draggable?: boolean;
38+
icon?: string;
3739
}
3840

3941
export interface MarkerLabel {

src/services/marker-manager.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,16 @@ export class MarkerManager {
4343
return this._markers.get(marker).then((m: Marker) => m.setDraggable(marker.draggable));
4444
}
4545

46+
updateIcon(marker: SebmGoogleMapMarker): Promise<void> {
47+
return this._markers.get(marker).then((m: Marker) => m.setIcon(marker.iconUrl));
48+
}
49+
4650
addMarker(marker: SebmGoogleMapMarker) {
4751
const markerPromise = this._mapsWrapper.createMarker({
4852
position: {lat: marker.latitude, lng: marker.longitude},
4953
label: marker.label,
50-
draggable: marker.draggable
54+
draggable: marker.draggable,
55+
icon: marker.iconUrl
5156
});
5257
this._markers.set(marker, markerPromise);
5358
}

test/services/marker-manager.spec.ts

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import {describe, it, expect, beforeEachProviders, inject} from 'angular2/testing';
1+
import {describe, it, expect, beforeEachProviders, inject, injectAsync} from 'angular2/testing';
22
import {provide, NgZone} from 'angular2/core';
33

44
import {MarkerManager} from '../../src/services/marker-manager';
5+
import {Marker} from '../../src/services/google-maps-types';
56
import {GoogleMapsAPIWrapper} from '../../src/services/google-maps-api-wrapper';
67
import {SebmGoogleMapMarker} from '../../src/directives/google-map-marker';
78

@@ -28,7 +29,7 @@ export function main() {
2829
markerManager.addMarker(newMarker);
2930

3031
expect(apiWrapper.createMarker)
31-
.toHaveBeenCalledWith({position: {lat: 34.4, lng: 22.3}, label: 'A', draggable: false});
32+
.toHaveBeenCalledWith({position: {lat: 34.4, lng: 22.3}, label: 'A', draggable: false, icon: undefined});
3233
}));
3334
});
3435

@@ -42,13 +43,37 @@ export function main() {
4243
newMarker.longitude = 22.3;
4344
newMarker.label = 'A';
4445

45-
const markerInstance = jasmine.createSpyObj('Marker', ['setMap']);
46+
const markerInstance: Marker = jasmine.createSpyObj('Marker', ['setMap']);
4647
(<any>apiWrapper.createMarker).and.returnValue(Promise.resolve(markerInstance));
4748

4849
markerManager.addMarker(newMarker);
4950
markerManager.deleteMarker(newMarker)
5051
.then(() => { expect(markerInstance.setMap).toHaveBeenCalledWith(null); });
5152
}));
5253
});
54+
55+
describe('set marker icon', () => {
56+
it('should update that marker via setIcon method when the markerUrl changes',
57+
injectAsync(
58+
[MarkerManager, GoogleMapsAPIWrapper],
59+
(markerManager: MarkerManager, apiWrapper: GoogleMapsAPIWrapper) => {
60+
const newMarker = new SebmGoogleMapMarker(markerManager);
61+
newMarker.latitude = 34.4;
62+
newMarker.longitude = 22.3;
63+
newMarker.label = 'A';
64+
65+
const markerInstance: Marker = jasmine.createSpyObj('Marker', ['setMap', 'setIcon']);
66+
(<any>apiWrapper.createMarker).and.returnValue(Promise.resolve(markerInstance));
67+
68+
markerManager.addMarker(newMarker);
69+
expect(apiWrapper.createMarker)
70+
.toHaveBeenCalledWith({position: {lat: 34.4, lng: 22.3}, label: 'A', draggable: false, icon: undefined});
71+
const iconUrl = 'http://angular-maps.com/icon.png';
72+
newMarker.iconUrl = iconUrl;
73+
return markerManager.updateIcon(newMarker).then(() => {
74+
expect(markerInstance.setIcon).toHaveBeenCalledWith(iconUrl);
75+
});
76+
}));
77+
});
5378
});
5479
}

0 commit comments

Comments
 (0)