Skip to content

Commit

Permalink
feat(SebmGoogleMap): support map click event
Browse files Browse the repository at this point in the history
Now, you can subscribe to map click events:

```
<sebm-google-map
  [latitude]="lat"
  [longitude]="lng"
  (mapClick)="mapClicked($event)">
</sebm-google-map>
```

The $event is a `MapMouseEvent` type that contains
the coords of the click.

```
import {MapMouseEvent} from 'angular2-google-maps/core';

mapClicked(event: MapMouseEvent) {
  console.log(event.coords.lat, event.coords.lng);
}
```
  • Loading branch information
sebholstein committed Dec 25, 2015
1 parent 5ed34be commit c18640c
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 5 deletions.
15 changes: 13 additions & 2 deletions docs/api/components_directives/sebmGoogleMap.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {SebmGoogleMap} from 'angular2-google-maps/core';
```

```html
<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" (mapClick)="mapClicked($event)">
</sebm-google-map>
```

Expand All @@ -32,4 +32,15 @@ import {SebmGoogleMap} from 'angular2-google-maps/core';

### Events

None
| Event name | Arguments | Description |
|------------|---------------------------------|----------------------------------------------|
| mapClick | [MapMouseEvent](#MapMouseEvent) | Gets emitted when the user clicks on the map |

### Event Interfaces

#### MapMouseEvent <a name="mapClickEvent"></a>
```typescript
interface MapMouseEvent {
coords: LatLngLiteral // { lat: number, lng: number }
};
```
2 changes: 1 addition & 1 deletion src/directives.ts
Original file line number Diff line number Diff line change
@@ -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';
20 changes: 18 additions & 2 deletions src/directives/google-map.ts
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -28,6 +28,8 @@ export class SebmGoogleMap {
private _zoom: number = 8;
private _mapsWrapper: GoogleMapsAPIWrapper;

@Output() mapClick: EventEmitter<MapMouseEvent> = new EventEmitter<MapMouseEvent>();

constructor(elem: ElementRef, _mapsWrapper: GoogleMapsAPIWrapper, renderer: Renderer) {
this._mapsWrapper = _mapsWrapper;
renderer.setElementClass(elem, 'sebm-google-map-container', true);
Expand All @@ -39,6 +41,7 @@ export class SebmGoogleMap {
this._mapsWrapper.createMap(el, this._latitude, this._longitude);
this._handleMapCenterChange();
this._handleMapZoomChange();
this._handleMapClick();
}

@Input()
Expand Down Expand Up @@ -93,4 +96,17 @@ export class SebmGoogleMap {
this._mapsWrapper.subscribeToMapEvent<void>('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(
<MapMouseEvent>{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; }

0 comments on commit c18640c

Please sign in to comment.