Skip to content

Commit

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

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

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

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

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

### Events

| Event name | Arguments | Description |
|------------|---------------------------------|----------------------------------------------|
| mapClick | [MapMouseEvent](#MapMouseEvent) | Gets emitted when the user clicks on the map |
| Event name | Arguments | Description |
|---------------|---------------------------------|----------------------------------------------------------|
| mapClick | [MapMouseEvent](#MapMouseEvent) | Gets emitted when the user clicks on the map |
| mapRightClick | [MapMouseEvent](#MapMouseEvent) | Get emitted when the user uses a right click on the map. |

### Event Interfaces

Expand Down
28 changes: 21 additions & 7 deletions src/directives/google-map.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export class SebmGoogleMap {
private _mapsWrapper: GoogleMapsAPIWrapper;

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

constructor(elem: ElementRef, _mapsWrapper: GoogleMapsAPIWrapper, renderer: Renderer) {
this._mapsWrapper = _mapsWrapper;
Expand All @@ -41,7 +42,7 @@ export class SebmGoogleMap {
this._mapsWrapper.createMap(el, this._latitude, this._longitude);
this._handleMapCenterChange();
this._handleMapZoomChange();
this._handleMapClick();
this._handleMapMouseEvents();
}

@Input()
Expand Down Expand Up @@ -97,12 +98,25 @@ export class SebmGoogleMap {
.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()}});
});
private _handleMapMouseEvents() {
interface Emitter {
emit(value: any): void;
}
type Event = {name: string, emitter: Emitter};

const events: Event[] = [
{name: 'click', emitter: this.mapClick},
{name: 'rightclick', emitter: this.mapRightClick}
];

events.forEach((e: Event) => {
this._mapsWrapper.subscribeToMapEvent<{latLng: LatLng}>(e.name)
.subscribe((event: {latLng: LatLng}) => {
const value =
<MapMouseEvent>{coords: {lat: event.latLng.lat(), lng: event.latLng.lng()}};
e.emitter.emit(value);
});
});
}
}

Expand Down

0 comments on commit eab715e

Please sign in to comment.