feat(MarkerManager): set a visible option to marker.

Closes #524

src/core/directives/google-map-marker.ts

@@ -38,7 +38,7 @@ let markerId = 0;
  selector: 'sebm-google-map-marker',
  inputs: [
  'latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable', 'iconUrl',
- 'openInfoWindow', 'fitBounds', 'opacity'
+ 'openInfoWindow', 'fitBounds', 'opacity', 'visible'
  ],
  outputs: ['markerClick', 'dragEnd']
 })
@@ -73,6 +73,11 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn
  */
  iconUrl: string;
 
+ /**
+ * If true, the marker is visible
+ */
+ visible: boolean = true;
+
  /**
  * Whether to automatically open the child info window when the marker is clicked.
  */
@@ -137,6 +142,9 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn
  if (changes['opacity']) {
  this._markerManager.updateOpacity(this);
  }
+ if (changes['visible']) {
+ this._markerManager.updateVisible(this);
+ }
  }
 
  private _addEventListeners() {

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

@@ -28,6 +28,7 @@ export interface Marker extends MVCObject {
  setDraggable(draggable: boolean): void;
  setIcon(icon: string): void;
  setOpacity(opacity: number): void;
+ setVisible(visible: boolean): void;
  getLabel(): MarkerLabel;
 }
 
@@ -39,6 +40,7 @@ export interface MarkerOptions {
  draggable?: boolean;
  icon?: string;
  opacity?: number;
+ visible?: boolean;
 }
 
 export interface MarkerLabel {

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

@@ -53,13 +53,18 @@ export class MarkerManager {
  return this._markers.get(marker).then((m: Marker) => m.setOpacity(marker.opacity));
  }
 
+ updateVisible(marker: SebmGoogleMapMarker): Promise<void> {
+ return this._markers.get(marker).then((m: Marker) => m.setVisible(marker.visible));
+ }
+
  addMarker(marker: SebmGoogleMapMarker) {
  const markerPromise = this._mapsWrapper.createMarker({
  position: {lat: marker.latitude, lng: marker.longitude},
  label: marker.label,
  draggable: marker.draggable,
  icon: marker.iconUrl,
- opacity: marker.opacity
+ opacity: marker.opacity,
+ visible: marker.visible
  });
  this._markers.set(marker, markerPromise);
  }

test/services/managers/marker-manager.spec.ts

@@ -34,7 +34,8 @@ export function main() {
  label: 'A',
  draggable: false,
  icon: undefined,
- opacity: 1
+ opacity: 1,
+ visible: true
  });
  }));
  });
@@ -77,7 +78,8 @@ export function main() {
  label: 'A',
  draggable: false,
  icon: undefined,
- opacity: 1
+ opacity: 1,
+ visible: true
  });
  const iconUrl = 'http://angular-maps.com/icon.png';
  newMarker.iconUrl = iconUrl;
@@ -106,6 +108,7 @@ export function main() {
  label: 'A',
  draggable: false,
  icon: undefined,
+ visible: true,
  opacity: 1
  });
  const opacity = 0.4;
@@ -114,5 +117,35 @@ export function main() {
  () => { expect(markerInstance.setOpacity).toHaveBeenCalledWith(opacity); });
  })));
  });
+
+ describe('set visible option', () => {
+ it('should update that marker via setVisible method when the visible changes',
+ async(inject(
+ [MarkerManager, GoogleMapsAPIWrapper],
+ (markerManager: MarkerManager, apiWrapper: GoogleMapsAPIWrapper) => {
+ const newMarker = new SebmGoogleMapMarker(markerManager);
+ newMarker.latitude = 34.4;
+ newMarker.longitude = 22.3;
+ newMarker.label = 'A';
+ newMarker.visible = false;
+
+ const markerInstance: Marker =
+ jasmine.createSpyObj('Marker', ['setMap', 'setVisible']);
+ (<any>apiWrapper.createMarker).and.returnValue(Promise.resolve(markerInstance));
+
+ markerManager.addMarker(newMarker);
+ expect(apiWrapper.createMarker).toHaveBeenCalledWith({
+ position: {lat: 34.4, lng: 22.3},
+ label: 'A',
+ draggable: false,
+ icon: undefined,
+ visible: false,
+ opacity: 1
+ });
+ newMarker.visible = true;
+ return markerManager.updateVisible(newMarker).then(
+ () => { expect(markerInstance.setVisible).toHaveBeenCalledWith(true); });
+ })));
+ });
  });
 }