Add double click event for AGM Marker directive

We have required double click event for AGM marker directive for my project.

I have added double click event in node_modules/@agm/core/directives/marker.js file. These below changes is working in my local machine. But when I deploy to somewhere npm install command will be overwritten.

What is the permanent solution to implement in project.

Is it possible to commit this file to main source?

So kindly add the event into agm-marker directive.

Changed File Marker.js

import { ContentChildren, Directive, EventEmitter, forwardRef, Input, Output, QueryList, } from ‘@angular/core’ import { ReplaySubject } from ‘rxjs’ import { FitBoundsAccessor } from ‘…/services/fit-bounds’ import { MarkerManager } from ‘…/services/managers/marker-manager’ import { AgmInfoWindow } from ‘./info-window’ var markerId = 0 /**

• AgmMarker renders a map marker inside a {@link AgmMap}.

• Example

• import { Component } from ‘@angular/core’;
• @Component({
• selector: ‘my-map-cmp’,
• styles: [`
• .agm-map-container {

•  height: 300px;
  

• }
• `],
• template: `
• <agm-map [latitude]=“lat” [longitude]=“lng” [zoom]=“zoom”>

•  <agm-marker [latitude]="lat" [longitude]="lng" [label]="'M'">
  

•  </agm-marker>
  

• </agm-map>
• `
• })

/ var AgmMarker = /* @class / (function() { function AgmMarker(_markerManager) { this._markerManager = _markerManager /* * If true, the marker can be dragged. Default value is false. / // tslint:disable-next-line:no-input-rename 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 /* * If true, the marker can be clicked. Default value is true. / // tslint:disable-next-line:no-input-rename this.clickable = true /* * This event emitter gets emitted when the user clicks on the marker. / this.markerClick = new EventEmitter() this.markerDblClick = new EventEmitter() /* * This event is fired when the user rightclicks on the marker. / this.markerRightClick = new EventEmitter() /* * This event is fired when the user stops dragging the marker. / this.dragEnd = new EventEmitter() /* * This event is fired when the user mouses over the marker. / this.mouseOver = new EventEmitter() /* * This event is fired when the user mouses outside the marker. / this.mouseOut = new EventEmitter() /* * @internal / this.infoWindow = new QueryList() this._markerAddedToManger = false this._observableSubscriptions = [] this._fitBoundsDetails$ = new ReplaySubject(1) this._id = (markerId++).toString() } / @internal / / @internal / AgmMarker.prototype.ngAfterContentInit / @internal / = function() { var _this = this this.handleInfoWindowUpdate() this.infoWindow.changes.subscribe(function() { return _this.handleInfoWindowUpdate() }) } AgmMarker.prototype.handleInfoWindowUpdate = function() { var _this = this if (this.infoWindow.length > 1) { throw new Error(‘Expected no more than one info window.’) } this.infoWindow.forEach(function(marker) { marker.hostMarker = _this }) } /* @internal / /* @internal / AgmMarker.prototype.ngOnChanges /* @internal / = function(changes) { if (typeof this.latitude === ‘string’) { this.latitude = Number(this.latitude) } if (typeof this.longitude === ‘string’) { this.longitude = Number(this.longitude) } if (typeof this.latitude !== ‘number’ || typeof this.longitude !== ‘number’) { return } if (!this._markerAddedToManger) { this._markerManager.addMarker(this) this._updateFitBoundsDetails() this._markerAddedToManger = true this._addEventListeners() return } if (changes[‘latitude’] || changes[‘longitude’]) { this._markerManager.updateMarkerPosition(this) this._updateFitBoundsDetails() } 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) } if (changes[‘clickable’]) { this._markerManager.updateClickable(this) } if (changes[‘animation’]) { this._markerManager.updateAnimation(this) } } /*

• @internal / /*
• @internal / AgmMarker.prototype.getFitBoundsDetails$ = /*
• @internal / function() { return this._fitBoundsDetails$.asObservable() } AgmMarker.prototype._updateFitBoundsDetails = function() { this._fitBoundsDetails$.next({ latLng: { lat: this.latitude, lng: this.longitude } }) } AgmMarker.prototype._addEventListeners = function() { var _this = this var cs = this._markerManager .createEventObservable(‘click’, this) .subscribe(function() { if (_this.openInfoWindow) { _this.infoWindow.forEach(function(infoWindow) { return infoWindow.open() }) } _this.markerClick.emit(_this) }) this._observableSubscriptions.push(cs) var dc = this._markerManager .createEventObservable(‘dblclick’, this) .subscribe(function() { if (_this.openInfoWindow) { _this.infoWindow.forEach(function(infoWindow) { return infoWindow.open() }) } _this.markerDblClick.emit(_this) }) this._observableSubscriptions.push(dc) var rc = this._markerManager .createEventObservable(‘rightclick’, this) .subscribe(function() { _this.markerRightClick.emit(null) }) this._observableSubscriptions.push(rc) 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 / /* @internal / AgmMarker.prototype.id /* @internal / = function() { return this._id } /* @internal / /* @internal / AgmMarker.prototype.toString /* @internal / = function() { return ‘AgmMarker-’ + this._id.toString() } /* @internal / /* @internal / AgmMarker.prototype.ngOnDestroy /* @internal / = function() { this._markerManager.deleteMarker(this) // unsubscribe all registered observable subscriptions this._observableSubscriptions.forEach(function(s) { return s.unsubscribe() }) } AgmMarker.decorators = [ { type: Directive, args: [ { selector: ‘agm-marker’, providers: [ { provide: FitBoundsAccessor, useExisting: forwardRef(function() { return AgmMarker }), }, ], inputs: [ ‘latitude’, ‘longitude’, ‘title’, ‘label’, ‘draggable: markerDraggable’, ‘iconUrl’, ‘openInfoWindow’, ‘opacity’, ‘visible’, ‘zIndex’, ‘animation’, ], outputs: [‘markerClick’, ‘markerDblClick’, ‘dragEnd’, ‘mouseOver’, ‘mouseOut’], }, ], }, ] /* @nocollapse */ AgmMarker.ctorParameters = function() { return [{ type: MarkerManager }] } AgmMarker.propDecorators = { latitude: [{ type: Input }], longitude: [{ type: Input }], title: [{ type: Input }], label: [{ type: Input }], draggable: [{ type: Input, args: [‘markerDraggable’] }], iconUrl: [{ type: Input }], visible: [{ type: Input }], openInfoWindow: [{ type: Input }], opacity: [{ type: Input }], zIndex: [{ type: Input }], clickable: [{ type: Input, args: [‘markerClickable’] }], markerClick: [{ type: Output }], markerDblClick: [{ type: Output }], markerRightClick: [{ type: Output }], dragEnd: [{ type: Output }], mouseOver: [{ type: Output }], mouseOut: [{ type: Output }], infoWindow: [{ type: ContentChildren, args: [AgmInfoWindow] }], } return AgmMarker })() export { AgmMarker } //# sourceMappingURL=marker.js.map

[abhikCodes]

++++1

[ghost]

1. as I understand, we stopped using clang, but didn’t remove the config for it.
2. Correct, createEventObservable accepts a google maps event. You were correct using dblclick