angular2-google-maps
Version:
Angular 2 components for Google Maps
174 lines • 6.71 kB
JavaScript
"use strict";
var core_1 = require('@angular/core');
var marker_manager_1 = require('../services/managers/marker-manager');
var google_map_info_window_1 = require('./google-map-info-window');
var markerId = 0;
/**
* SebmGoogleMapMarker renders a map marker inside a {@link SebmGoogleMap}.
*
* ### Example
* ```typescript
* import { Component } from 'angular2/core';
* import { SebmGoogleMap, SebmGoogleMapMarker } from 'angular2-google-maps/core';
*
* @Component({
* selector: 'my-map-cmp',
* directives: [SebmGoogleMap, SebmGoogleMapMarker],
* styles: [`
* .sebm-google-map-container {
* height: 300px;
* }
* `],
* template: `
* <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
* <sebm-google-map-marker [latitude]="lat" [longitude]="lng" [label]="'M'">
* </sebm-google-map-marker>
* </sebm-google-map>
* `
* })
* ```
*/
var SebmGoogleMapMarker = (function () {
function SebmGoogleMapMarker(_markerManager) {
this._markerManager = _markerManager;
/**
* If true, the marker can be dragged. Default value is false.
*/
this.draggable = false;
/**
* If true, the marker is visible
*/
this.visible = true;
/**
* Whether to automatically open the child info window when the marker is clicked.
*/
this.openInfoWindow = true;
/**
* The marker's opacity between 0.0 and 1.0.
*/
this.opacity = 1;
/**
* All markers are displayed on the map in order of their zIndex, with higher values displaying in
* front of markers with lower values. By default, markers are displayed according to their
* vertical position on screen, with lower markers appearing in front of markers further up the
* screen.
*/
this.zIndex = 1;
/**
* This event emitter gets emitted when the user clicks on the marker.
*/
this.markerClick = new core_1.EventEmitter();
/**
* This event is fired when the user stops dragging the marker.
*/
this.dragEnd = new core_1.EventEmitter();
/**
* This event is fired when the user mouses over the marker.
*/
this.mouseOver = new core_1.EventEmitter();
/**
* This event is fired when the user mouses outside the marker.
*/
this.mouseOut = new core_1.EventEmitter();
this._markerAddedToManger = false;
this._observableSubscriptions = [];
this._id = (markerId++).toString();
}
/* @internal */
SebmGoogleMapMarker.prototype.ngAfterContentInit = function () {
if (this.infoWindow != null) {
this.infoWindow.hostMarker = this;
}
};
/** @internal */
SebmGoogleMapMarker.prototype.ngOnChanges = function (changes) {
if (typeof this.latitude !== 'number' || typeof this.longitude !== 'number') {
return;
}
if (!this._markerAddedToManger) {
this._markerManager.addMarker(this);
this._markerAddedToManger = true;
this._addEventListeners();
return;
}
if (changes['latitude'] || changes['longitude']) {
this._markerManager.updateMarkerPosition(this);
}
if (changes['title']) {
this._markerManager.updateTitle(this);
}
if (changes['label']) {
this._markerManager.updateLabel(this);
}
if (changes['draggable']) {
this._markerManager.updateDraggable(this);
}
if (changes['iconUrl']) {
this._markerManager.updateIcon(this);
}
if (changes['opacity']) {
this._markerManager.updateOpacity(this);
}
if (changes['visible']) {
this._markerManager.updateVisible(this);
}
if (changes['zIndex']) {
this._markerManager.updateZIndex(this);
}
};
SebmGoogleMapMarker.prototype._addEventListeners = function () {
var _this = this;
var cs = this._markerManager.createEventObservable('click', this).subscribe(function () {
if (_this.openInfoWindow && _this.infoWindow != null) {
_this.infoWindow.open();
}
_this.markerClick.emit(null);
});
this._observableSubscriptions.push(cs);
var ds = this._markerManager.createEventObservable('dragend', this)
.subscribe(function (e) {
_this.dragEnd.emit({ coords: { lat: e.latLng.lat(), lng: e.latLng.lng() } });
});
this._observableSubscriptions.push(ds);
var mover = this._markerManager.createEventObservable('mouseover', this)
.subscribe(function (e) {
_this.mouseOver.emit({ coords: { lat: e.latLng.lat(), lng: e.latLng.lng() } });
});
this._observableSubscriptions.push(mover);
var mout = this._markerManager.createEventObservable('mouseout', this)
.subscribe(function (e) {
_this.mouseOut.emit({ coords: { lat: e.latLng.lat(), lng: e.latLng.lng() } });
});
this._observableSubscriptions.push(mout);
};
/** @internal */
SebmGoogleMapMarker.prototype.id = function () { return this._id; };
/** @internal */
SebmGoogleMapMarker.prototype.toString = function () { return 'SebmGoogleMapMarker-' + this._id.toString(); };
/** @internal */
SebmGoogleMapMarker.prototype.ngOnDestroy = function () {
this._markerManager.deleteMarker(this);
// unsubscribe all registered observable subscriptions
this._observableSubscriptions.forEach(function (s) { return s.unsubscribe(); });
};
SebmGoogleMapMarker.decorators = [
{ type: core_1.Directive, args: [{
selector: 'sebm-google-map-marker',
inputs: [
'latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable', 'iconUrl',
'openInfoWindow', 'opacity', 'visible', 'zIndex'
],
outputs: ['markerClick', 'dragEnd', 'mouseOver', 'mouseOut']
},] },
];
/** @nocollapse */
SebmGoogleMapMarker.ctorParameters = function () { return [
{ type: marker_manager_1.MarkerManager, },
]; };
SebmGoogleMapMarker.propDecorators = {
'infoWindow': [{ type: core_1.ContentChild, args: [google_map_info_window_1.SebmGoogleMapInfoWindow,] },],
};
return SebmGoogleMapMarker;
}());
exports.SebmGoogleMapMarker = SebmGoogleMapMarker;
//# sourceMappingURL=google-map-marker.js.map