diff --git a/docs/api/components_directives/sebmGoogleMap.md b/docs/api/components_directives/sebmGoogleMap.md index 9dc68f36c..e6b2497b0 100644 --- a/docs/api/components_directives/sebmGoogleMap.md +++ b/docs/api/components_directives/sebmGoogleMap.md @@ -18,7 +18,7 @@ import {SebmGoogleMap} from 'angular2-google-maps/core'; ``` ```html - + ``` @@ -32,4 +32,15 @@ import {SebmGoogleMap} from 'angular2-google-maps/core'; ### Events -None \ No newline at end of file +| Event name | Arguments | Description | +|------------|---------------------------------|----------------------------------------------| +| mapClick | [MapMouseEvent](#MapMouseEvent) | Gets emitted when the user clicks on the map | + +### Event Interfaces + +#### MapMouseEvent +```typescript +interface MapMouseEvent { + coords: LatLngLiteral // { lat: number, lng: number } +}; +``` diff --git a/src/directives.ts b/src/directives.ts index ce0a8e158..e2e089a04 100644 --- a/src/directives.ts +++ b/src/directives.ts @@ -1,3 +1,3 @@ -export {SebmGoogleMap} from './directives/google-map'; +export {SebmGoogleMap, MapMouseEvent} from './directives/google-map'; export {SebmGoogleMapMarker} from './directives/google-map-marker'; export {ANGULAR2_GOOGLE_MAPS_DIRECTIVES} from './directives-const'; diff --git a/src/directives/google-map.ts b/src/directives/google-map.ts index 2f8495742..496fa440b 100644 --- a/src/directives/google-map.ts +++ b/src/directives/google-map.ts @@ -1,7 +1,7 @@ -import {Component, Input, Renderer, ElementRef} from 'angular2/core'; +import {Component, Input, Output, Renderer, ElementRef, EventEmitter} from 'angular2/core'; import {GoogleMapsAPIWrapper} from '../services/google-maps-api-wrapper'; import {MarkerManager} from '../services/marker-manager'; -import {LatLng} from '../services/google-maps-types'; +import {LatLng, LatLngLiteral} from '../services/google-maps-types'; /** * Todo: add docs @@ -28,6 +28,8 @@ export class SebmGoogleMap { private _zoom: number = 8; private _mapsWrapper: GoogleMapsAPIWrapper; + @Output() mapClick: EventEmitter = new EventEmitter(); + constructor(elem: ElementRef, _mapsWrapper: GoogleMapsAPIWrapper, renderer: Renderer) { this._mapsWrapper = _mapsWrapper; renderer.setElementClass(elem, 'sebm-google-map-container', true); @@ -39,6 +41,7 @@ export class SebmGoogleMap { this._mapsWrapper.createMap(el, this._latitude, this._longitude); this._handleMapCenterChange(); this._handleMapZoomChange(); + this._handleMapClick(); } @Input() @@ -93,4 +96,17 @@ export class SebmGoogleMap { this._mapsWrapper.subscribeToMapEvent('zoom_changed') .subscribe(() => { this._mapsWrapper.getZoom().then((z: number) => this._zoom = z); }); } + + private _handleMapClick() { + this._mapsWrapper.subscribeToMapEvent<{latLng: LatLng}>('click') + .subscribe((event: {latLng: LatLng}) => { + this.mapClick.emit( + {coords: {lat: event.latLng.lat(), lng: event.latLng.lng()}}); + }); + } } + +/** + * MapMouseEvent gets emitted when the user triggers mouse events on the map. + */ +export interface MapMouseEvent { coords: LatLngLiteral; }