214 lines
29 KiB
JavaScript
214 lines
29 KiB
JavaScript
|
/**
|
||
|
|
* @license
|
||
|
|
* Copyright Google LLC All Rights Reserved.
|
||
|
|
*
|
||
|
|
* Use of this source code is governed by an MIT-style license that can be
|
||
|
|
* found in the LICENSE file at https://angular.io/license
|
||
|
|
*/
|
||
|
|
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
|
||
|
|
/// <reference types="google.maps" preserve="true" />
|
||
|
|
import { Input, Output, NgZone, Directive, inject, EventEmitter, } from '@angular/core';
|
||
|
|
import { GoogleMap } from '../google-map/google-map';
|
||
|
|
import { MapEventManager } from '../map-event-manager';
|
||
|
|
import { Observable } from 'rxjs';
|
||
|
|
import * as i0 from "@angular/core";
|
||
|
|
import * as i1 from "../google-map/google-map";
|
||
|
|
/**
|
||
|
|
* Default options for the Google Maps marker component. Displays a marker
|
||
|
|
* at the Googleplex.
|
||
|
|
*/
|
||
|
|
export const DEFAULT_MARKER_OPTIONS = {
|
||
|
|
position: { lat: 37.221995, lng: -122.184092 },
|
||
|
|
};
|
||
|
|
/**
|
||
|
|
* Angular component that renders a Google Maps marker via the Google Maps JavaScript API.
|
||
|
|
*
|
||
|
|
* See developers.google.com/maps/documentation/javascript/reference/marker
|
||
|
|
*/
|
||
|
|
export class MapAdvancedMarker {
|
||
|
|
/**
|
||
|
|
* Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the AdvancedMarkerElement with the provided value.
|
||
|
|
* See: https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions.title
|
||
|
|
*/
|
||
|
|
set title(title) {
|
||
|
|
this._title = title;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Sets the AdvancedMarkerElement's position. An AdvancedMarkerElement may be constructed without a position, but will not be displayed until its position is provided - for example, by a user's actions or choices. An AdvancedMarkerElement's position can be provided by setting AdvancedMarkerElement.position if not provided at the construction.
|
||
|
|
* Note: AdvancedMarkerElement with altitude is only supported on vector maps.
|
||
|
|
* https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions.position
|
||
|
|
*/
|
||
|
|
set position(position) {
|
||
|
|
this._position = position;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* The DOM Element backing the visual of an AdvancedMarkerElement.
|
||
|
|
* Note: AdvancedMarkerElement does not clone the passed-in DOM element. Once the DOM element is passed to an AdvancedMarkerElement, passing the same DOM element to another AdvancedMarkerElement will move the DOM element and cause the previous AdvancedMarkerElement to look empty.
|
||
|
|
* See: https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions.content
|
||
|
|
*/
|
||
|
|
set content(content) {
|
||
|
|
this._content = content;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* If true, the AdvancedMarkerElement can be dragged.
|
||
|
|
* Note: AdvancedMarkerElement with altitude is not draggable.
|
||
|
|
* https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions.gmpDraggable
|
||
|
|
*/
|
||
|
|
set gmpDraggable(draggable) {
|
||
|
|
this._draggable = draggable;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* Options for constructing an AdvancedMarkerElement.
|
||
|
|
* https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions
|
||
|
|
*/
|
||
|
|
set options(options) {
|
||
|
|
this._options = options;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* AdvancedMarkerElements on the map are prioritized by zIndex, with higher values indicating higher display.
|
||
|
|
* https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions.zIndex
|
||
|
|
*/
|
||
|
|
set zIndex(zIndex) {
|
||
|
|
this._zIndex = zIndex;
|
||
|
|
}
|
||
|
|
constructor(_googleMap, _ngZone) {
|
||
|
|
this._googleMap = _googleMap;
|
||
|
|
this._ngZone = _ngZone;
|
||
|
|
this._eventManager = new MapEventManager(inject(NgZone));
|
||
|
|
/**
|
||
|
|
* This event is fired when the AdvancedMarkerElement element is clicked.
|
||
|
|
* https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.click
|
||
|
|
*/
|
||
|
|
this.mapClick = this._eventManager.getLazyEmitter('click');
|
||
|
|
/**
|
||
|
|
* This event is repeatedly fired while the user drags the AdvancedMarkerElement.
|
||
|
|
* https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.drag
|
||
|
|
*/
|
||
|
|
this.mapDrag = this._eventManager.getLazyEmitter('drag');
|
||
|
|
/**
|
||
|
|
* This event is fired when the user stops dragging the AdvancedMarkerElement.
|
||
|
|
* https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.dragend
|
||
|
|
*/
|
||
|
|
this.mapDragend = this._eventManager.getLazyEmitter('dragend');
|
||
|
|
/**
|
||
|
|
* This event is fired when the user starts dragging the AdvancedMarkerElement.
|
||
|
|
* https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.dragstart
|
||
|
|
*/
|
||
|
|
this.mapDragstart = this._eventManager.getLazyEmitter('dragstart');
|
||
|
|
/** Event emitted when the marker is initialized. */
|
||
|
|
this.markerInitialized = new EventEmitter();
|
||
|
|
}
|
||
|
|
ngOnInit() {
|
||
|
|
if (!this._googleMap._isBrowser) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (google.maps.marker?.AdvancedMarkerElement && this._googleMap.googleMap) {
|
||
|
|
this._initialize(this._googleMap.googleMap, google.maps.marker.AdvancedMarkerElement);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this._ngZone.runOutsideAngular(() => {
|
||
|
|
Promise.all([this._googleMap._resolveMap(), google.maps.importLibrary('marker')]).then(([map, lib]) => {
|
||
|
|
this._initialize(map, lib.AdvancedMarkerElement);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
_initialize(map, advancedMarkerConstructor) {
|
||
|
|
// Create the object outside the zone so its events don't trigger change detection.
|
||
|
|
// We'll bring it back in inside the `MapEventManager` only for the events that the
|
||
|
|
// user has subscribed to.
|
||
|
|
this._ngZone.runOutsideAngular(() => {
|
||
|
|
this.advancedMarker = new advancedMarkerConstructor(this._combineOptions());
|
||
|
|
this._assertInitialized();
|
||
|
|
this.advancedMarker.map = map;
|
||
|
|
this._eventManager.setTarget(this.advancedMarker);
|
||
|
|
this.markerInitialized.next(this.advancedMarker);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
ngOnChanges(changes) {
|
||
|
|
const { advancedMarker, _content, _position, _title, _draggable, _zIndex } = this;
|
||
|
|
if (advancedMarker) {
|
||
|
|
if (changes['title']) {
|
||
|
|
advancedMarker.title = _title;
|
||
|
|
}
|
||
|
|
if (changes['gmpDraggable']) {
|
||
|
|
advancedMarker.gmpDraggable = _draggable;
|
||
|
|
}
|
||
|
|
if (changes['content']) {
|
||
|
|
advancedMarker.content = _content;
|
||
|
|
}
|
||
|
|
if (changes['position']) {
|
||
|
|
advancedMarker.position = _position;
|
||
|
|
}
|
||
|
|
if (changes['zIndex']) {
|
||
|
|
advancedMarker.zIndex = _zIndex;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ngOnDestroy() {
|
||
|
|
this.markerInitialized.complete();
|
||
|
|
this._eventManager.destroy();
|
||
|
|
if (this.advancedMarker) {
|
||
|
|
this.advancedMarker.map = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getAnchor() {
|
||
|
|
this._assertInitialized();
|
||
|
|
return this.advancedMarker;
|
||
|
|
}
|
||
|
|
/** Creates a combined options object using the passed-in options and the individual inputs. */
|
||
|
|
_combineOptions() {
|
||
|
|
const options = this._options || DEFAULT_MARKER_OPTIONS;
|
||
|
|
return {
|
||
|
|
...options,
|
||
|
|
title: this._title || options.title,
|
||
|
|
position: this._position || options.position,
|
||
|
|
content: this._content || options.content,
|
||
|
|
zIndex: this._zIndex ?? options.zIndex,
|
||
|
|
gmpDraggable: this._draggable ?? options.gmpDraggable,
|
||
|
|
map: this._googleMap.googleMap,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
/** Asserts that the map has been initialized. */
|
||
|
|
_assertInitialized() {
|
||
|
|
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
||
|
|
if (!this.advancedMarker) {
|
||
|
|
throw Error('Cannot interact with a Google Map Marker before it has been ' +
|
||
|
|
'initialized. Please wait for the Marker to load before trying to interact with it.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MapAdvancedMarker, deps: [{ token: i1.GoogleMap }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
|
||
|
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0-next.2", type: MapAdvancedMarker, isStandalone: true, selector: "map-advanced-marker", inputs: { title: "title", position: "position", content: "content", gmpDraggable: "gmpDraggable", options: "options", zIndex: "zIndex" }, outputs: { mapClick: "mapClick", mapDrag: "mapDrag", mapDragend: "mapDragend", mapDragstart: "mapDragstart", markerInitialized: "markerInitialized" }, exportAs: ["mapAdvancedMarker"], usesOnChanges: true, ngImport: i0 }); }
|
||
|
|
}
|
||
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0-next.2", ngImport: i0, type: MapAdvancedMarker, decorators: [{
|
||
|
|
type: Directive,
|
||
|
|
args: [{
|
||
|
|
selector: 'map-advanced-marker',
|
||
|
|
exportAs: 'mapAdvancedMarker',
|
||
|
|
standalone: true,
|
||
|
|
}]
|
||
|
|
}], ctorParameters: () => [{ type: i1.GoogleMap }, { type: i0.NgZone }], propDecorators: { title: [{
|
||
|
|
type: Input
|
||
|
|
}], position: [{
|
||
|
|
type: Input
|
||
|
|
}], content: [{
|
||
|
|
type: Input
|
||
|
|
}], gmpDraggable: [{
|
||
|
|
type: Input
|
||
|
|
}], options: [{
|
||
|
|
type: Input
|
||
|
|
}], zIndex: [{
|
||
|
|
type: Input
|
||
|
|
}], mapClick: [{
|
||
|
|
type: Output
|
||
|
|
}], mapDrag: [{
|
||
|
|
type: Output
|
||
|
|
}], mapDragend: [{
|
||
|
|
type: Output
|
||
|
|
}], mapDragstart: [{
|
||
|
|
type: Output
|
||
|
|
}], markerInitialized: [{
|
||
|
|
type: Output
|
||
|
|
}] } });
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFwLWFkdmFuY2VkLW1hcmtlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9nb29nbGUtbWFwcy9tYXAtYWR2YW5jZWQtbWFya2VyL21hcC1hZHZhbmNlZC1tYXJrZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7OztHQU1HO0FBRUgseUVBQXlFO0FBQ3pFLHFEQUFxRDtBQUVyRCxPQUFPLEVBQ0wsS0FBSyxFQUdMLE1BQU0sRUFDTixNQUFNLEVBQ04sU0FBUyxFQUdULE1BQU0sRUFDTixZQUFZLEdBQ2IsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLDBCQUEwQixDQUFDO0FBQ25ELE9BQU8sRUFBQyxlQUFlLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQztBQUNyRCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sTUFBTSxDQUFDOzs7QUFHaEM7OztHQUdHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sc0JBQXNCLEdBQUc7SUFDcEMsUUFBUSxFQUFFLEVBQUMsR0FBRyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsQ0FBQyxVQUFVLEVBQUM7Q0FDN0MsQ0FBQztBQUVGOzs7O0dBSUc7QUFNSCxNQUFNLE9BQU8saUJBQWlCO0lBRzVCOzs7T0FHRztJQUNILElBQ0ksS0FBSyxDQUFDLEtBQWE7UUFDckIsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7SUFDdEIsQ0FBQztJQUdEOzs7O09BSUc7SUFDSCxJQUNJLFFBQVEsQ0FDVixRQUlxQztRQUVyQyxJQUFJLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztJQUM1QixDQUFDO0lBR0Q7Ozs7T0FJRztJQUNILElBQ0ksT0FBTyxDQUFDLE9BQW9EO1FBQzlELElBQUksQ0FBQyxRQUFRLEdBQUcsT0FBTyxDQUFDO0lBQzFCLENBQUM7SUFHRDs7OztPQUlHO0lBQ0gsSUFDSSxZQUFZLENBQUMsU0FBa0I7UUFDakMsSUFBSSxD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
|