feat(AgmMarker): add clickable support

Setting marker clickable property Closes #994
sebholstein · Jun 18, 2017 · fec8b01 · fec8b01
1 parent 128c8f3
commit fec8b01
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/src/core/directives/marker.ts b/src/core/directives/marker.ts
@@ -92,6 +92,12 @@ export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit {
    */
   @Input() zIndex: number = 1;
 
+  /**
+   * If true, the marker can be clicked. Default value is true.
+   */
+  // tslint:disable-next-line:no-input-rename
+  @Input('markerClickable') clickable: boolean = true;
+
   /**
    * This event emitter gets emitted when the user clicks on the marker.
    */
@@ -173,6 +179,9 @@ export class AgmMarker implements OnDestroy, OnChanges, AfterContentInit {
     if (changes['zIndex']) {
       this._markerManager.updateZIndex(this);
     }
+    if (changes['clickable']) {
+      this._markerManager.updateClickable(this);
+    }
   }
 
   private _addEventListeners() {

diff --git a/src/core/services/google-maps-types.ts b/src/core/services/google-maps-types.ts
@@ -33,6 +33,7 @@ export interface Marker extends MVCObject {
   setVisible(visible: boolean): void;
   setZIndex(zIndex: number): void;
   getLabel(): MarkerLabel;
+  setClickable(clickable: boolean): void;
 }
 
 export interface MarkerOptions {
@@ -45,6 +46,7 @@ export interface MarkerOptions {
   opacity?: number;
   visible?: boolean;
   zIndex?: number;
+  clickable: boolean;
 }
 
 export interface MarkerLabel {

diff --git a/src/core/services/managers/marker-manager.spec.ts b/src/core/services/managers/marker-manager.spec.ts
@@ -38,7 +38,8 @@ describe('MarkerManager', () => {
                opacity: 1,
                visible: true,
                zIndex: 1,
-               title: undefined
+               title: undefined,
+               clickable: true
              });
            }));
   });
@@ -84,7 +85,8 @@ describe('MarkerManager', () => {
                opacity: 1,
                visible: true,
                zIndex: 1,
-               title: undefined
+               title: undefined,
+               clickable: true
              });
              const iconUrl = 'http://angular-maps.com/icon.png';
              newMarker.iconUrl = iconUrl;
@@ -116,7 +118,8 @@ describe('MarkerManager', () => {
                visible: true,
                opacity: 1,
                zIndex: 1,
-               title: undefined
+               title: undefined,
+               clickable: true
              });
              const opacity = 0.4;
              newMarker.opacity = opacity;
@@ -149,7 +152,8 @@ describe('MarkerManager', () => {
                visible: false,
                opacity: 1,
                zIndex: 1,
-               title: undefined
+               title: undefined,
+               clickable: true
              });
              newMarker.visible = true;
              return markerManager.updateVisible(newMarker).then(
@@ -180,7 +184,8 @@ describe('MarkerManager', () => {
                visible: false,
                opacity: 1,
                zIndex: 1,
-               title: undefined
+               title: undefined,
+               clickable: true
              });
              const zIndex = 10;
              newMarker.zIndex = zIndex;

diff --git a/src/core/services/managers/marker-manager.ts b/src/core/services/managers/marker-manager.ts
@@ -61,6 +61,10 @@ export class MarkerManager {
     return this._markers.get(marker).then((m: Marker) => m.setZIndex(marker.zIndex));
   }
 
+  updateClickable(marker: AgmMarker): Promise<void> {
+    return this._markers.get(marker).then((m: Marker) => m.setClickable(marker.clickable));
+  }
+
   addMarker(marker: AgmMarker) {
     const markerPromise = this._mapsWrapper.createMarker({
       position: {lat: marker.latitude, lng: marker.longitude},
@@ -70,7 +74,8 @@ export class MarkerManager {
       opacity: marker.opacity,
       visible: marker.visible,
       zIndex: marker.zIndex,
-      title: marker.title
+      title: marker.title,
+      clickable: marker.clickable
     });
     this._markers.set(marker, markerPromise);
   }