@googlemaps/markerwithlabel/dist/index.umd.js

[](https://www.npmjs.com/package/@googlemaps/markerwithlabel)  ![Release](https://github.com/googlemaps/js-m

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).markerWithLabel={})}(this,(function(e){"use strict";function t(e,t){for(let i in t.prototype)e.prototype[i]=t.prototype[i]}function i(e){(e=e||window.event).stopPropagation?e.stopPropagation():e.cancelBubble=!0,e.preventDefault?e.preventDefault():e.returnValue=!1}function s(e){(e=e||window.event).stopPropagation?e.stopPropagation():e.cancelBubble=!0}class n{constructor(){t(n,google.maps.OverlayView)}}const a="block",l="none",o="absolute",r="pointer",h="marker-label";class g extends n{constructor(e){let{clickable:t=!0,cursor:i=r,draggable:s=!0,labelAnchor:n=new google.maps.Point(0,0),labelClass:a=h,labelContent:l,position:o,opacity:g=1,map:c,labelZIndexOffset:d=1,visible:v=!0,zIndex:b=0}=e;super(),this.createElements(),this.anchor=n,this.content=l,this.className=a,this.clickable=t,this.cursor=i,this.draggable=s,o instanceof google.maps.LatLng?this.position=o:this.position=new google.maps.LatLng(o),this.opacity=g,this.visible=v,this.zIndex=b,this.zIndexOffset=d,c&&this.setMap(c)}get element(){return this.labelDiv}get content(){return this.labelDiv.innerHTML}set content(e){"string"==typeof e?(this.labelDiv.innerHTML=e,this.eventDiv.innerHTML=e):(this.labelDiv.innerHTML="",this.labelDiv.appendChild(e),this.eventDiv.innerHTML="",this.eventDiv.appendChild(e.cloneNode(!0)))}get className(){return this.labelDiv.className}set className(e){this.labelDiv.className=e,this.labelDiv.classList.add(h),this.eventDiv.className=e,this.eventDiv.classList.add("marker-label-event")}set cursor(e){this.hoverCursor=e,this.isInteractive&&(this.eventDiv.style.cursor=e)}get cursor(){return this.isInteractive?this.hoverCursor:"inherit"}get isInteractive(){return this.draggable||this.clickable}set opacity(e){this.labelDiv.style.opacity=String(e)}set title(e){this.eventDiv.title=e}set visible(e){e?(this.labelDiv.style.display=a,this.eventDiv.style.display=a):(this.labelDiv.style.display=l,this.eventDiv.style.display=l)}onAdd(){this.getPanes().markerLayer.appendChild(this.labelDiv),this.getPanes().overlayMouseTarget.appendChild(this.eventDiv)}draw(){const e=this.getProjection().fromLatLngToDivPixel(this.position),t=Math.round(e.x+this.anchor.x),i=Math.round(e.y+this.anchor.y);this.labelDiv.style.left="".concat(t,"px"),this.labelDiv.style.top="".concat(i,"px"),this.eventDiv.style.left=this.labelDiv.style.left,this.eventDiv.style.top=this.labelDiv.style.top;const s=(this.zIndex||Math.ceil(e.y))+this.zIndexOffset;this.labelDiv.style.zIndex=String(s),this.eventDiv.style.zIndex=String(s),this.eventDiv.style.display=this.isInteractive?this.eventDiv.style.display:l,this.eventDiv.style.cursor=this.cursor}addDomListener(e,t){return this.eventDiv.addEventListener(e,t),{remove:()=>this.eventDiv.removeEventListener(e,t)}}onRemove(){this.labelDiv.parentNode.removeChild(this.labelDiv),this.eventDiv.parentNode.removeChild(this.eventDiv)}createElements(){this.labelDiv=document.createElement("div"),this.eventDiv=document.createElement("div"),this.labelDiv.style.position=o,this.eventDiv.style.position=o,this.eventDiv.style.opacity="0.01"}}class c{constructor(e){t(c,google.maps.Marker),google.maps.Marker.call(this,e)}}const d="click",v="dblclick",b="drag",p="dragend",u="dragstart",m="mousedown",L="mouseover",D="mouseout",y="mouseup";e.MarkerWithLabel=class extends c{constructor(e){super(function(e,t){const i=Object.assign({},e);return t.forEach((e=>delete i[e])),i}(e,["labelAnchor","labelZIndexOffset","labelClass","labelContent"])),this.isTouchScreen=!1,this.isDraggingLabel=!1,this.isMouseDownOnLabel=!1,this.shouldIgnoreClick=!1,this.label=new g(Object.assign({},e)),this.propertyListeners=[google.maps.event.addListener(this,"clickable_changed",this.handleClickableOrDraggableChange),google.maps.event.addListener(this,"cursor_changed",(()=>{this.label.cursor=this.getCursor()})),google.maps.event.addListener(this,"draggable_changed",this.handleClickableOrDraggableChange),google.maps.event.addListener(this,"position_changed",(()=>{this.label.position=this.getPosition()})),google.maps.event.addListener(this,"opacity_changed",(()=>{this.label.opacity=this.getOpacity()})),google.maps.event.addListener(this,"title_changed",(()=>{this.label.title=this.getTitle()})),google.maps.event.addListener(this,"visible_changed",(()=>{this.label.visible=this.getVisible()})),google.maps.event.addListener(this,"zindex_changed",(()=>{this.label.zIndex=this.getZIndex(),this.label.draw()}))]}get isInteractive(){return this.getClickable()||this.getDraggable()}get labelElement(){return this.label.element}get labelContent(){return this.label.content}set labelContent(e){this.label.content=e}get labelClass(){return this.label.className}set labelClass(e){this.label.className=e}setMap(e){super.setMap(e),setTimeout((()=>{this.label.setMap(e),this.removeInteractiveListeners(),e&&this.addInteractiveListeners()}))}handleClickableOrDraggableChange(){this.label.clickable=this.getClickable(),this.label.draggable=this.getDraggable(),this.isInteractive?this.addInteractiveListeners():this.removeInteractiveListeners()}removeInteractiveListeners(){this.interactiveListeners&&(this.interactiveListeners.forEach((e=>google.maps.event.removeListener(e))),this.interactiveListeners=null)}addInteractiveListeners(){if(!this.interactiveListeners){if(!this.getMap())return;this.interactiveListeners=[this.label.addDomListener(L,(e=>{this.isTouchScreen||(google.maps.event.trigger(this,L,{latLng:this.getPosition()}),i(e))})),this.label.addDomListener(D,(e=>{this.isTouchScreen||(this.mouseOutTimeout&&clearTimeout(this.mouseOutTimeout),this.isMouseDownOnLabel?this.mouseOutTimeout=setTimeout((()=>{this.isMouseDownOnLabel&&(this.isMouseDownOnLabel=!1,google.maps.event.trigger(this,y,{latLng:this.getPosition()}),this.isDraggingLabel&&(this.isDraggingLabel=!1,this.shouldIgnoreClick=!0,google.maps.event.trigger(this,p,{latLng:this.getPosition()}))),google.maps.event.trigger(this,D,{latLng:this.getPosition()})}),200):google.maps.event.trigger(this,D,{latLng:this.getPosition()}),i(e))})),this.label.addDomListener(m,(e=>{this.isDraggingLabel=!1,this.isMouseDownOnLabel=!0,google.maps.event.trigger(this,m,{latLng:this.getPosition()}),this.isTouchScreen||i(e)})),this.label.addDomListener(y,(e=>{const t={latLng:this.getPosition()};this.isMouseDownOnLabel&&(this.isMouseDownOnLabel=!1,google.maps.event.trigger(this,y,t),this.isDraggingLabel&&(this.isDraggingLabel=!1,this.shouldIgnoreClick=!0,google.maps.event.trigger(this,p,t)),this.getDraggable()||i(e))})),this.label.addDomListener(d,(e=>{this.shouldIgnoreClick?this.shouldIgnoreClick=!1:google.maps.event.trigger(this,d,{latLng:this.getPosition()}),i(e)})),this.label.addDomListener(v,(e=>{google.maps.event.trigger(this,v,{latLng:this.getPosition()}),i(e)})),google.maps.event.addListener(this.getMap(),"mousemove",(e=>{if(this.isMouseDownOnLabel&&this.getDraggable())if(this.isDraggingLabel){const t=new google.maps.LatLng(e.latLng.lat()-this.eventOffset.y,e.latLng.lng()-this.eventOffset.x);google.maps.event.trigger(this,b,Object.assign(Object.assign({},e),{latLng:t}))}else this.isDraggingLabel=!0,this.eventOffset=new google.maps.Point(e.latLng.lng()-this.getPosition().lng(),e.latLng.lat()-this.getPosition().lat()),google.maps.event.trigger(this,u,Object.assign(Object.assign({},e),{latLng:this.getPosition()}))})),google.maps.event.addListener(this,u,(()=>{this.label.zIndex=1e6})),google.maps.event.addListener(this,b,(e=>{let{latLng:t}=e;this.setPosition(t)})),google.maps.event.addListener(this,p,(()=>{this.label.zIndex=this.getZIndex(),this.label.draw()})),this.label.addDomListener("touchstart",(e=>{this.isTouchScreen=!0,s(e)})),this.label.addDomListener("touchmove",(e=>{s(e)})),this.label.addDomListener("touchend",(e=>{s(e)}))]}}},Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=index.umd.js.map