feat(MarkerManager): Set a zIndex option to marker.

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', 'visible'
+    'openInfoWindow', 'fitBounds', 'opacity', 'visible', 'zIndex'
   ],
   outputs: ['markerClick', 'dragEnd']
 })
@@ -88,6 +88,14 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn
    */
   opacity: number = 1;
 
+  /**
+   * All markers are displayed on the map in order of their zIndex, with higher values displaying in
+   * front of markers with lower values. By default, markers are displayed according to their
+   * vertical position on screen, with lower markers appearing in front of markers further up the
+   * screen.
+   */
+  zIndex: number = 1;
+
   /**
    * This event emitter gets emitted when the user clicks on the marker.
    */
@@ -145,6 +153,9 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges, AfterContentIn
     if (changes['visible']) {
       this._markerManager.updateVisible(this);
     }
+    if (changes['zIndex']) {
+      this._markerManager.updateZIndex(this);
+    }
   }
 
   private _addEventListeners() {

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

@@ -29,6 +29,7 @@ export interface Marker extends MVCObject {
   setIcon(icon: string): void;
   setOpacity(opacity: number): void;
   setVisible(visible: boolean): void;
+  setZIndex(zIndex: number): void;
   getLabel(): MarkerLabel;
 }
 
@@ -41,6 +42,7 @@ export interface MarkerOptions {
   icon?: string;
   opacity?: number;
   visible?: boolean;
+  zIndex?: number;
 }
 
 export interface MarkerLabel {

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

@@ -57,14 +57,19 @@ export class MarkerManager {
     return this._markers.get(marker).then((m: Marker) => m.setVisible(marker.visible));
   }
 
+  updateZIndex(marker: SebmGoogleMapMarker): Promise<void> {
+    return this._markers.get(marker).then((m: Marker) => m.setZIndex(marker.zIndex));
+  }
+
   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,
-      visible: marker.visible
+      visible: marker.visible,
+      zIndex: marker.zIndex
     });
     this._markers.set(marker, markerPromise);
   }

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

@@ -35,7 +35,8 @@ export function main() {
                  draggable: false,
                  icon: undefined,
                  opacity: 1,
-                 visible: true
+                 visible: true,
+                 zIndex: 1
                });
              }));
     });
@@ -79,7 +80,8 @@ export function main() {
                  draggable: false,
                  icon: undefined,
                  opacity: 1,
-                 visible: true
+                 visible: true,
+                 zIndex: 1
                });
                const iconUrl = 'http://angular-maps.com/icon.png';
                newMarker.iconUrl = iconUrl;
@@ -109,7 +111,8 @@ export function main() {
                  draggable: false,
                  icon: undefined,
                  visible: true,
-                 opacity: 1
+                 opacity: 1,
+                 zIndex: 1
                });
                const opacity = 0.4;
                newMarker.opacity = opacity;
@@ -140,12 +143,45 @@ export function main() {
                  draggable: false,
                  icon: undefined,
                  visible: false,
-                 opacity: 1
+                 opacity: 1,
+                 zIndex: 1
                });
                newMarker.visible = true;
                return markerManager.updateVisible(newMarker).then(
                    () => { expect(markerInstance.setVisible).toHaveBeenCalledWith(true); });
              })));
     });
+
+    describe('set zIndex option', () => {
+      it('should update that marker via setZIndex method when the zIndex 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', 'setZIndex']);
+               (<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,
+                 zIndex: 1
+               });
+               const zIndex = 10;
+               newMarker.zIndex = zIndex;
+               return markerManager.updateZIndex(newMarker).then(
+                   () => { expect(markerInstance.setZIndex).toHaveBeenCalledWith(zIndex); });
+             })));
+    });
   });
 }