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

Closes #524

Author: TSHiYK

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); });
+             })));
+    });
   });
 }