class HTMLMapMarker extends google.maps.OverlayView {
|
constructor(args) {
|
super();
|
this._latlng = args.latlng;
|
this._html = args.html;
|
this._map = args.map;
|
this._width = args.width;
|
this._height = args.height;
|
this.setMap(args.map);
|
}
|
|
createDiv() {
|
this.div = document.createElement('div');
|
this.div.style.position = 'absolute';
|
if (this._width && this._height) {
|
this.div.style.width = this._width;
|
this.div.style.height = this._height;
|
}
|
if (this._html) {
|
this.div.innerHTML = this._html;
|
}
|
|
google.maps.event.addDomListener(this.div, 'click', (event) => {
|
event.stopPropagation();
|
|
google.maps.event.trigger(this, 'click', event);
|
});
|
}
|
|
positionDiv() {
|
const point = this.getProjection().fromLatLngToDivPixel(this._latlng);
|
if (point) {
|
const left = point.x - this.div.clientWidth/2;
|
this.div.style.left = `${left}px`;
|
const top = point.y - this.div.clientHeight/2;
|
this.div.style.top = `${top}px`;
|
}
|
}
|
onAdd() {
|
if (!this.div) {
|
this.createDiv();
|
this.getPanes().overlayMouseTarget.appendChild(this.div);
|
}
|
this.positionDiv();
|
}
|
|
draw() {
|
this.positionDiv();
|
}
|
|
onRemove() {
|
if (this.div) {
|
this.div.parentNode.removeChild(this.div);
|
this.div = null;
|
}
|
}
|
|
getPosition() {
|
return this._latlng;
|
}
|
|
detach() {
|
if (this.getMap()) {
|
this.setMap(null);
|
}
|
};
|
|
attach() {
|
if (!this.getMap()) {
|
this.setMap(this._map);
|
}
|
};
|
|
setSize(width, height) {
|
this._width = width;
|
this._height = height;
|
if (this.div) {
|
this.div.style.width = this._width;
|
this.div.style.height = this._height;
|
}
|
}
|
}
|
|
|
