From 9f39f4a031fbe5fae66995346d9aa88c52b25dee Mon Sep 17 00:00:00 2001
From: Justin Poehnelt <jpoehnelt@google.com>
Date: Wed, 5 Jan 2022 09:15:59 -0700
Subject: [PATCH] fix: allow access to label element (#410)

---
 src/label.ts  | 32 ++++++++++++++++++--------------
 src/marker.ts | 25 +++++++++++++++++++------
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/label.ts b/src/label.ts
index c449412..2df3281 100644
--- a/src/label.ts
+++ b/src/label.ts
@@ -79,11 +79,15 @@ export class Label extends OverlayViewSafe {
     }
   }
 
-  get content(): string | HTMLElement {
+  public get element(): HTMLElement {
+    return this.labelDiv;
+  }
+
+  public get content(): string {
     return this.labelDiv.innerHTML;
   }
 
-  set content(content: string | HTMLElement) {
+  public set content(content: string | HTMLElement) {
     if (typeof content === "string") {
       this.labelDiv.innerHTML = content;
       this.eventDiv.innerHTML = content;
@@ -100,7 +104,7 @@ export class Label extends OverlayViewSafe {
    *
    * **Note**: This will always return the default `marker-label`.
    */
-  get className(): string {
+  public get className(): string {
     return this.labelDiv.className;
   }
 
@@ -109,37 +113,37 @@ export class Label extends OverlayViewSafe {
    *
    * **Note**: The default `marker-label` will additionaly be added.
    */
-  set className(className: string) {
+  public set className(className: string) {
     this.labelDiv.className = className;
     this.labelDiv.classList.add(LABEL_CLASS);
     this.eventDiv.className = className;
     this.eventDiv.classList.add(EVENT_CLASS);
   }
 
-  set cursor(cursor: string) {
+  public set cursor(cursor: string) {
     this.hoverCursor = cursor;
     if (this.isInteractive) {
       this.eventDiv.style.cursor = cursor;
     }
   }
 
-  get cursor() {
+  public get cursor(): string {
     return this.isInteractive ? this.hoverCursor : "inherit";
   }
 
-  get isInteractive() {
+  public get isInteractive(): boolean {
     return this.draggable || this.clickable;
   }
 
-  set opacity(opacity: number) {
+  public set opacity(opacity: number) {
     this.labelDiv.style.opacity = String(opacity);
   }
 
-  set title(title: string) {
+  public set title(title: string) {
     this.eventDiv.title = title;
   }
 
-  set visible(visible: boolean) {
+  public set visible(visible: boolean) {
     if (visible) {
       this.labelDiv.style.display = BLOCK;
       this.eventDiv.style.display = BLOCK;
@@ -149,12 +153,12 @@ export class Label extends OverlayViewSafe {
     }
   }
 
-  onAdd() {
+  public onAdd(): void {
     this.getPanes().markerLayer.appendChild(this.labelDiv);
     this.getPanes().overlayMouseTarget.appendChild(this.eventDiv);
   }
 
-  draw() {
+  public draw(): void {
     const coordinates = this.getProjection().fromLatLngToDivPixel(
       this.position
     );
@@ -178,14 +182,14 @@ export class Label extends OverlayViewSafe {
     this.eventDiv.style.cursor = this.cursor;
   }
 
-  addDomListener(
+  public addDomListener(
     event: string,
     handler: (event: Event) => void
   ): google.maps.MapsEventListener {
     return google.maps.event.addDomListener(this.eventDiv, event, handler);
   }
 
-  onRemove() {
+  public onRemove(): void {
     this.labelDiv.parentNode.removeChild(this.labelDiv);
     this.eventDiv.parentNode.removeChild(this.eventDiv);
   }
diff --git a/src/marker.ts b/src/marker.ts
index b3df42d..d3cb624 100644
--- a/src/marker.ts
+++ b/src/marker.ts
@@ -93,27 +93,40 @@ export class MarkerWithLabel extends MarkerSafe {
     ];
   }
 
-  get isInteractive() {
+  public get isInteractive(): boolean {
     return this.getClickable() || this.getDraggable();
   }
 
-  get labelContent(): string | HTMLElement {
+  /**
+   * Gets label element.
+   */
+  public get labelElement(): HTMLElement {
+    return this.label.element;
+  }
+
+  /**
+   * Gets label `innerHTML`. See {@link Marker.labelElement} for
+   * accessing the HTMLElement instead.
+   */
+  public get labelContent(): string {
     return this.label.content;
   }
 
-  set labelContent(content: string | HTMLElement) {
+  public set labelContent(content: string | HTMLElement) {
     this.label.content = content;
   }
 
-  get labelClass() {
+  public get labelClass(): string {
     return this.label.className;
   }
 
-  set labelClass(className: string) {
+  public set labelClass(className: string) {
     this.label.className = className;
   }
 
-  setMap(map: google.maps.Map | google.maps.StreetViewPanorama | null): void {
+  public setMap(
+    map: google.maps.Map | google.maps.StreetViewPanorama | null
+  ): void {
     super.setMap(map);
     setTimeout(() => {
       this.label.setMap(map);