Add Marker's Label

pom.xml

@@ -4,7 +4,7 @@
 
     <groupId>com.flowingcode.vaadin.addons</groupId>
     <artifactId>google-maps</artifactId>
-    <version>2.2.4-SNAPSHOT</version>
+    <version>2.3.0-SNAPSHOT</version>
     <name>Google Maps Addon</name>
     <description>Integration of google-map for Vaadin platform</description>
 

src/main/java/com/flowingcode/vaadin/addons/googlemaps/GoogleMapMarker.java

@@ -196,6 +196,16 @@ public void setIcon(GoogleMapIcon icon) {
     this.getElement().setPropertyJson("icon", icon.getJson());
   }
 
+  /**
+   * Sets the label of the marker In order to set the label's position use
+   * MarkerIcon::setLabelOrigin property.
+   * 
+   * @param label the new marker's label
+   */
+  public void setLabel(MarkerLabel label) {
+    this.getElement().setPropertyJson("label", label.getJson());
+  }
+
   /**
    * Checks if marker animation is enabled.
    *

src/main/java/com/flowingcode/vaadin/addons/googlemaps/MarkerLabel.java

@@ -0,0 +1,95 @@
+/*-
+ * #%L
+ * Google Maps Addon
+ * %%
+ * Copyright (C) 2020 - 2025 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+package com.flowingcode.vaadin.addons.googlemaps;
+
+import elemental.json.Json;
+import elemental.json.JsonObject;
+import lombok.Getter;
+import lombok.NonNull;
+import lombok.Setter;
+
+import java.util.Objects;
+import java.util.Optional;
+
+/**
+ * Class representing a marker label.
+ * 
+ * @see <a href=
+ *      "https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel">Google
+ *      Maps MarkerLabel</a>
+ */
+@Getter
+@Setter
+public class MarkerLabel {
+  /**
+   * The text to be displayed in the label. Required field.
+   */
+  @NonNull
+  private String text;
+
+  /**
+   * Optional. The color of the label text. Defaults to: <code>'black'</code>.
+   */
+  private String color;
+
+  /**
+   * Optional. The font family of the label text (equivalent to the CSS font-family property).
+   */
+  private String fontFamily;
+
+  /**
+   * Optional. The font size of the label text (equivalent to the CSS font-size property). Defaults
+   * to: <code>'14px'</code>.
+   */
+  private String fontSize;
+
+  /**
+   * Optional. The font weight of the label text (equivalent to the CSS font-weight property).
+   */
+  private String fontWeight;
+
+  /**
+   * The className property of the label's element (equivalent to the element's class attribute).
+   * Multiple space-separated CSS classes can be added. The font color, size, weight, and family can
+   * only be set via the other properties of <code>MarkerLabel</code>.
+   */
+  private String className;
+
+  public MarkerLabel(String text) {
+    this.text = Objects.requireNonNull(text, "Text cannot be null");
+  }
+
+  public MarkerLabel(String text, String color, String fontSize) {
+    this.text = Objects.requireNonNull(text, "Text cannot be null");
+    this.color = color;
+    this.fontSize = fontSize;
+  }
+
+  protected JsonObject getJson() {
+    JsonObject js = Json.createObject();
+    Optional.of(getText()).ifPresent(value -> js.put("text", value));
+    Optional.ofNullable(getColor()).ifPresent(value -> js.put("color", value));
+    Optional.ofNullable(getFontFamily()).ifPresent(value -> js.put("fontFamily", value));
+    Optional.ofNullable(getFontSize()).ifPresent(value -> js.put("fontSize", value));
+    Optional.ofNullable(getFontWeight()).ifPresent(value -> js.put("fontWeight", value));
+    Optional.ofNullable(getClassName()).ifPresent(value -> js.put("className", value));
+    return js;
+  }
+}

src/test/java/com/flowingcode/vaadin/addons/googlemaps/AddMarkersDemo.java

@@ -2,7 +2,7 @@
  * #%L
  * Google Maps Addon
  * %%
- * Copyright (C) 2020 - 2024 Flowing Code
+ * Copyright (C) 2020 - 2025 Flowing Code
  * %%
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -33,6 +33,7 @@
 import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.component.orderedlayout.FlexLayout;
 import com.vaadin.flow.component.orderedlayout.FlexLayout.FlexWrap;
+import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
@@ -69,7 +70,16 @@ protected void createGoogleMapsDemo(String apiKey) {
 
     Checkbox draggable = new Checkbox("Draggable");    
     Checkbox withRightClick = new Checkbox("Right Click");
-
+    TextField labelText = new TextField();
+    labelText.setPlaceholder("Label Text"); // hide-source
+    labelText.setEnabled(false); // hide-source
+    Checkbox withLabel = new Checkbox("With Label");
+    // #if vaadin eq 0
+    withLabel.addValueChangeListener(event -> {
+      labelText.setEnabled(event.getValue());
+    });
+    // #endif
+
     Button addMarker =
         new Button(
             "Add Marker",
@@ -108,14 +118,31 @@ protected void createGoogleMapsDemo(String apiKey) {
                   notification.open();
                 });
               }
+
+              if(withLabel.getValue()) {
+                MarkerLabel label = new MarkerLabel(labelText.getValue());
+                label.setColor("white");
+                label.setFontWeight("bold");
+                marker.setLabel(label);
+              }
+
               gmaps.addMarker(marker);
+              // #if vaadin eq 0
+              // Reset form
+              colorCB.clear();
+              draggable.setValue(false);
+              withRightClick.setValue(false);
+              labelText.clear();
+              withLabel.setValue(false);
+              // #endif
             });
 
     FlexLayout layout = new FlexLayout();
     layout.setFlexWrap(FlexWrap.WRAP); // hide-source
     addMarker.addClassName("margin-button"); // hide-source
     colorCB.addClassName("margin-button"); // hide-source
-    layout.add(colorCB, draggable, withRightClick, addMarker);
+    labelText.addClassName("margin-button"); // hide-source
+    layout.add(colorCB, draggable, withRightClick, withLabel, labelText, addMarker);
     layout.setAlignItems(Alignment.BASELINE); // hide-source
     layout.getStyle().set("margin-top", "0"); // hide-source
     add(gmaps, layout);