In Google Map V3, how to put a label inside and above a polygon?

Question

In Google Map V3, how to put a label inside and above a polygon? There's no label overlay as in V2 When I use the library maplabel, I can put the text inside, but not above, even if I specify an higher Z-index. Thanks Phil

Are you looking for something like [this](http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map_whiteBg.html) (uses FusionTablesLayer for the polygon, InfoBox for the label) — geocodezip, Apr 06 '13 at 17:00
possible duplicate of [Google Maps Javascript API v3 Map Label and Polygons](http://stackoverflow.com/questions/12714031/google-maps-javascript-api-v3-map-label-and-polygons) — geocodezip, Jul 22 '16 at 05:17
possible duplicate of [Google Maps get the center of coordinates (place label at center of polygon)](http://stackoverflow.com/questions/19956691/google-maps-get-the-center-of-coordinates-place-label-at-center-of-polygon) — geocodezip, Jul 22 '16 at 05:18

score 8 · Answer 1 · answered Apr 21 '16 at 00:02

8

maplabel renders its text on a canvas in the mapPane, which normally renders below all zIndex values in the floatPane. To bring the mapPane canvas into your zIndex order, try:

var mapLabel = new MapLabel({
    position: new google.maps.LatLng(yourLat, yourLng),
    text: 'test',
    zIndex: 101} );
$(mapLabel.getPanes().mapPane).css('z-index', mapLabel.zIndex);

answered Apr 21 '16 at 00:02

Andrew

91
1
3

This is perfect. Should be the most upvoted and accepted answer :) – Tarmo Mar 06 '19 at 08:52

score 7 · Answer 2 · edited Oct 21 '17 at 18:30

It's too late but I have faced the same problem and this code works fine!

var triangleCoords = [
    { lat:30.655993, lng: 76.732375 },
    { lat: 30.651379, lng: 76.735808},
    { lat: 30.653456, lng: 76.729682}
]

var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords ,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});
attachPolygonInfoWindow(bermudaTriangle)

function attachPolygonInfoWindow(polygon) {
    var infoWindow = new google.maps.InfoWindow();
    google.maps.event.addListener(polygon, 'mouseover', function (e) {
        infoWindow.setContent("Polygon Name");
        var latLng = e.latLng;
        infoWindow.setPosition(latLng);
        infoWindow.open(map);
    });
}

score 1 · Answer 3 · edited Oct 21 '17 at 18:32

Use google-maps-utility-library

Set label content, find center position of your polygon and thats it :)

var labelOptions = {
    content: label,
    boxStyle: {
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: this.my_getBounds(gpoints).getCenter(),
    closeBoxURL: "",
    isHidden: false,
    pane: "mapPane",
    enableEventPropagation: true
};

var polygonLabel = new InfoBox(labelOptions);
polygonLabel.open(map);

score 0 · Answer 4 · answered Jul 11 '22 at 11:28

First extend the Polygon class with your own version of the missing function, let's call it poly_getBounds()

google.maps.Polygon.prototype.poly_getBounds=function(){
    var bounds = new google.maps.LatLngBounds()
    this.getPath().forEach(function(element,index){bounds.extend(element)})
    return bounds
}

Add this for customize label:

function Labelx(opt_options) {
    // Initialization
    this.setValues(opt_options);
    // Labelx specific
    var span = this.span_ = document.createElement('span');
    span.style.cssText = 'position: relative; left: 0%; top: -8px; ' +
              'white-space: nowrap; border: 0px; font-family:arial; font-weight:bold;' +
              'padding: 2px; background-color: #ddd; ' +
                'opacity: .75; ' +
                'filter: alpha(opacity=75); ' +
                '-ms-filter: "alpha(opacity=75)"; ' +
                '-khtml-opacity: .75; ' +
                '-moz-opacity: .75;';

    var div = this.div_ = document.createElement('div');
    div.appendChild(span);
    div.style.cssText = 'position: absolute; display: none';
};

And now use it:

var lbl = new Labelx({ map: map, position: polygon.polygon.poly_getBounds().getCenter() },true);
                    lbl.set('text', 'Label 1');

score -1 · Answer 5 · answered Jun 18 '19 at 17:17

You can use the position field of InfoBox. Get the center position of the polygon using below code.

const bounds = new window.google.maps.LatLngBounds(); bounds.extend(new window.google.maps.LatLng(lat1,lng1)); bounds.extend(new window.google.maps.LatLng(lat2,lng2)); .. .. let polygonCenter = bounds.getCenter();

In Google Map V3, how to put a label inside and above a polygon?

5 Answers5