feat: Add placeId to map click events

* feat: allow disabling a "point of interest" default info window * feat: Add placeId to map click events when clicking on a point of interest on a map the emiting event will include the `placeId` of the location clicked. allow disabling a "point of interest" default info window. Use it by passing a boolean value to the new property isToShowDefaultInfoWindowForIcons when initializing the map. Default value is `true`. closes issue #691. closes issue #1539.
sebholstein · Jun 3, 2019 · 34f651b · 34f651b
1 parent 49890c5
commit 34f651b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 34 deletions.
diff --git a/packages/core/directives/map.ts b/packages/core/directives/map.ts
@@ -1,22 +1,21 @@
 import { Component, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges, Input, Output, NgZone } from '@angular/core';
-import {Subscription} from 'rxjs';
+import { Subscription } from 'rxjs';
 
-import {MouseEvent} from '../map-types';
-import {GoogleMapsAPIWrapper} from '../services/google-maps-api-wrapper';
+import { MouseEvent } from '../map-types';
+import { GoogleMapsAPIWrapper } from '../services/google-maps-api-wrapper';
 import {
   FullscreenControlOptions, LatLng, LatLngLiteral, MapTypeControlOptions, MapTypeId, PanControlOptions, MapRestriction,
-  RotateControlOptions, ScaleControlOptions, StreetViewControlOptions, ZoomControlOptions
-} from '../services/google-maps-types';
-import {LatLngBounds, LatLngBoundsLiteral, MapTypeStyle} from '../services/google-maps-types';
-import {CircleManager} from '../services/managers/circle-manager';
-import {RectangleManager} from '../services/managers/rectangle-manager';
-import {InfoWindowManager} from '../services/managers/info-window-manager';
-import {MarkerManager} from '../services/managers/marker-manager';
-import {PolygonManager} from '../services/managers/polygon-manager';
-import {PolylineManager} from '../services/managers/polyline-manager';
-import {KmlLayerManager} from './../services/managers/kml-layer-manager';
-import {DataLayerManager} from './../services/managers/data-layer-manager';
-import {FitBoundsService} from '../services/fit-bounds';
+  RotateControlOptions, ScaleControlOptions, StreetViewControlOptions, ZoomControlOptions} from '../services/google-maps-types';
+import { LatLngBounds, LatLngBoundsLiteral, MapTypeStyle } from '../services/google-maps-types';
+import { CircleManager } from '../services/managers/circle-manager';
+import { RectangleManager } from '../services/managers/rectangle-manager';
+import { InfoWindowManager } from '../services/managers/info-window-manager';
+import { MarkerManager } from '../services/managers/marker-manager';
+import { PolygonManager } from '../services/managers/polygon-manager';
+import { PolylineManager } from '../services/managers/polyline-manager';
+import { KmlLayerManager } from './../services/managers/kml-layer-manager';
+import { DataLayerManager } from './../services/managers/data-layer-manager';
+import { FitBoundsService } from '../services/fit-bounds';
 
 declare var google: any;
 
@@ -64,10 +63,10 @@ declare var google: any;
     }
   `],
   template: `
-    <div class='agm-map-container-inner sebm-google-map-container-inner'></div>
-    <div class='agm-map-content'>
-      <ng-content></ng-content>
-    </div>
+              <div class='agm-map-container-inner sebm-google-map-container-inner'></div>
+              <div class='agm-map-content'>
+                <ng-content></ng-content>
+              </div>
   `
 })
 export class AgmMap implements OnChanges, OnInit, OnDestroy {
@@ -250,6 +249,14 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
    */
   @Input() clickableIcons: boolean = true;
 
+  /**
+   * A map icon represents a point of interest, also known as a POI.
+   * When map icons are clickable by default, an info window is displayed.
+   * When this property is set to false, the info window will not be shown but the click event
+   * will still fire
+   */
+  @Input() showDefaultInfoWindow: boolean = true;
+
   /**
    * This setting controls how gestures on the map are handled.
    * Allowed values:
@@ -345,7 +352,8 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
    */
   @Output() mapReady: EventEmitter<any> = new EventEmitter<any>();
 
-  constructor(private _elem: ElementRef, private _mapsWrapper: GoogleMapsAPIWrapper, protected _fitBoundsService: FitBoundsService, private _zone: NgZone) {}
+  constructor(private _elem: ElementRef, private _mapsWrapper: GoogleMapsAPIWrapper, protected _fitBoundsService: FitBoundsService, private _zone: NgZone) {
+  }
 
   /** @internal */
   ngOnInit() {
@@ -422,7 +430,7 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
   private _updateMapOptionsChanges(changes: SimpleChanges) {
     let options: {[propName: string]: any} = {};
     let optionKeys =
-        Object.keys(changes).filter(k => AgmMap._mapOptionsAttributes.indexOf(k) !== -1);
+      Object.keys(changes).filter(k => AgmMap._mapOptionsAttributes.indexOf(k) !== -1);
     optionKeys.forEach((k) => { options[k] = changes[k].currentValue; });
     this._mapsWrapper.setMapOptions(options);
   }
@@ -483,14 +491,14 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
     switch (this.fitBounds) {
       case true:
         this._subscribeToFitBoundsUpdates();
-      break;
+        break;
       case false:
         if (this._fitBoundsSubscription) {
           this._fitBoundsSubscription.unsubscribe();
         }
-       break;
-       default:
-       this._updateBounds(this.fitBounds);
+        break;
+      default:
+        this._updateBounds(this.fitBounds);
     }
   }
 
@@ -533,15 +541,15 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
   private _handleBoundsChange() {
     const s = this._mapsWrapper.subscribeToMapEvent<void>('bounds_changed').subscribe(() => {
       this._mapsWrapper.getBounds().then(
-          (bounds: LatLngBounds) => { this.boundsChange.emit(bounds); });
+        (bounds: LatLngBounds) => { this.boundsChange.emit(bounds); });
     });
     this._observableSubscriptions.push(s);
   }
 
   private _handleMapTypeIdChange() {
     const s = this._mapsWrapper.subscribeToMapEvent<void>('maptypeid_changed').subscribe(() => {
       this._mapsWrapper.getMapTypeId().then(
-          (mapTypeId: MapTypeId) => { this.mapTypeIdChange.emit(mapTypeId); });
+        (mapTypeId: MapTypeId) => { this.mapTypeIdChange.emit(mapTypeId); });
     });
     this._observableSubscriptions.push(s);
   }
@@ -558,15 +566,16 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
 
   private _handleIdleEvent() {
     const s = this._mapsWrapper.subscribeToMapEvent<void>('idle').subscribe(
-        () => { this.idle.emit(void 0); });
+      () => { this.idle.emit(void 0); });
     this._observableSubscriptions.push(s);
   }
 
   private _handleMapMouseEvents() {
     interface Emitter {
       emit(value: any): void;
     }
-    type Event = {name: string, emitter: Emitter};
+
+    type Event = { name: string, emitter: Emitter };
 
     const events: Event[] = [
       {name: 'click', emitter: this.mapClick},
@@ -576,10 +585,20 @@ export class AgmMap implements OnChanges, OnInit, OnDestroy {
 
     events.forEach((e: Event) => {
       const s = this._mapsWrapper.subscribeToMapEvent<{latLng: LatLng}>(e.name).subscribe(
-          (event: {latLng: LatLng}) => {
-            const value = <MouseEvent>{coords: {lat: event.latLng.lat(), lng: event.latLng.lng()}};
-            e.emitter.emit(value);
-          });
+        (event: {latLng: LatLng}) => {
+          let value: MouseEvent = {
+            coords: {
+              lat: event.latLng.lat(),
+              lng: event.latLng.lng()
+            },
+            placeId: (<{latLng: LatLng, placeId: string}>event).placeId
+          };
+          // the placeId will be undefined in case the event was not an IconMouseEvent (google types)
+          if (value.placeId && !this.showDefaultInfoWindow) {
+            (<any>event).stop();
+          }
+          e.emitter.emit(value);
+        });
       this._observableSubscriptions.push(s);
     });
   }

diff --git a/packages/core/map-types.ts b/packages/core/map-types.ts
@@ -14,4 +14,7 @@ export {
 /**
  * MouseEvent gets emitted when the user triggers mouse events on the map.
  */
-export interface MouseEvent { coords: LatLngLiteral; }
+export interface MouseEvent {
+  coords: LatLngLiteral;
+  placeId?: string;
+}