Google maps 带标签的GMap标记

我在.xhtml中设置了一个gmap，并在我的操作中添加了标记：

<p:gmap id="topologyMap" fitBounds="true" type="MAP"
                            mapTypeControl="false" draggable="true" disableDoubleClickZoom="true"
                            navigationControl="false" streetView="false"
                            style="width:100%;height:500px"
                            model="#{Action.simpleModel}" disableDefaultUI="true">

我想不出如何在我的标记上添加标签。通过标签，我的意思是我想在我的标记下显示一些文本，例如：标记下的城市名称。我使用的是primefaces 6.0

---

谢谢

有一个带有标题字符串的标记构造函数：

public Marker(LatLng latlng, String title) 

---

您必须为此使用一些Javascript

  <script>

        google.maps.Marker.prototype.setLabel = function (label) {
            this.label = new MarkerLabel({
                map: this.map,
                marker: this,
                text: label
            });
            this.label.bindTo('position', this, 'position');
        };

        var MarkerLabel = function (options) {
            this.setValues(options);
            this.span = document.createElement('span');
            this.span.className = 'map-marker-label';
        };

        MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
            onAdd: function () {
                this.getPanes().overlayImage.appendChild(this.span);
                var self = this;
                this.listeners = [
                    google.maps.event.addListener(this, 'position_changed', function () {
                        self.draw();
                    })
                ];
            },
            draw: function () {
                var text = String(this.get('text'));
                var position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
                this.span.innerHTML = text;
                this.span.style.left = position.x + 'px';
                this.span.style.top = position.y + 'px';
            }
        });

        //This is the base function
        function initialize() {

            //Take the map from Primefaces Gmap
            var gmap = PF('geoMapV').getMap();

            //Take All Markers in from the map
            var myMarkers = gmap.markers;

            //Add Label to the marker
            var i = 0;
            for (i = 0; myMarkers.length > i; i++) {
                myMarkers[i].setLabel("Marker Label!!");
            }

        }

    </script>

结果

---

@Joshuadetwiller:你的评论真是太棒了，因为对我来说，它使一个带有标签/标题的标记成为可能。PF showcase甚至使用它

  <script>

        google.maps.Marker.prototype.setLabel = function (label) {
            this.label = new MarkerLabel({
                map: this.map,
                marker: this,
                text: label
            });
            this.label.bindTo('position', this, 'position');
        };

        var MarkerLabel = function (options) {
            this.setValues(options);
            this.span = document.createElement('span');
            this.span.className = 'map-marker-label';
        };

        MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
            onAdd: function () {
                this.getPanes().overlayImage.appendChild(this.span);
                var self = this;
                this.listeners = [
                    google.maps.event.addListener(this, 'position_changed', function () {
                        self.draw();
                    })
                ];
            },
            draw: function () {
                var text = String(this.get('text'));
                var position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
                this.span.innerHTML = text;
                this.span.style.left = position.x + 'px';
                this.span.style.top = position.y + 'px';
            }
        });

        //This is the base function
        function initialize() {

            //Take the map from Primefaces Gmap
            var gmap = PF('geoMapV').getMap();

            //Take All Markers in from the map
            var myMarkers = gmap.markers;

            //Add Label to the marker
            var i = 0;
            for (i = 0; myMarkers.length > i; i++) {
                myMarkers[i].setLabel("Marker Label!!");
            }

        }

    </script>

<style>
        .map-marker-label {
            position: absolute;
            color: red;
            font-size: 16px;
            font-weight: bold;
            /* Use margin to position the text */
            /* top, left position is the place of marker position */
            margin-top: -30px;
            margin-left: 15px;
        }
    </style>

     //Call Javascript from the labels  markers
     RequestContext.getCurrentInstance().execute("initialize()");