Add double click event for AGM Marker directive

[RamadassPalraj]

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>
  

• `
• })

/
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

[RamadassPalraj]

@SebastianM any update on this?

We have required double click event for agm-marker directive. So kindly do the needful.

[King2231]

+1

[abhikCodes]

++++1

[ghost]

can anyone create a PR for this?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[DefJunx]

@doom777 I'm trying to do this. One question: Are the events names the ones from Google Maps API? Is there a reference I should check out for the event name which are called with "createEventObservable" from MarkerManager?

EDIT: Also on a side note. When I run clang:format, I get tons of changes in the source code. Am I doing something wrong?

[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