z-Index overlay in google maps version 3

Question

I\'m trying to get an overlay in google maps api v3 to appear above all markers. But it seems that the google api always put my overlay with lowest z-index priority. Only so

Answer 1

If anyone was having the same problem as I was, here is my problem and solution:

I needed an OverlayView which would add tooltips to markers, but my popup overlay kept showing behind the markers.

I implemented a subclass of the OverlayView as per the Google documentation: https://developers.google.com/maps/documentation/javascript/customoverlays

When you write your custom OverlayView.prototype.onAdd function, you need to specify to which Pane to attach your overlay. I just copied the code without actually reading the surrounding explanation.

In their code, they attach the overlay to the overlayLayer pane:

var panes = this.getPanes();
panes.overlayLayer.appendChild(div);

But there are many different MapPanes you can use:

"The set of panes, of type MapPanes, specify the stacking order for different layers on the map. The following panes are possible, and enumerated in the order in which they are stacked from bottom to top:"

• MapPanes.mapPane (Level 0)
• MapPanes.overlayLayer (Level 1)
• MapPanes.markerLayer (Level 2)
• MapPanes.overlayMouseTarget (Level 3)
• MapPanes.floatPane (Level 4)

I wanted the overlay to hover over all other info on the map, so I used the floatPane pane and problem solved.

So, instead of :

this.getPanes().overlayLayer.appendChild(div)

you use this :

this.getPanes().floatPane.appendChild(div);

Answer 2

You can't change the zIndex of an OverlayView (it has no such property), but it holds panes that contains DOM nodes. That's where you can use the z-index property;

...
lngLatXYposition = $.view.overlay.getPanes().overlayLayer.style['zIndex'] = 1001;
...

Answer 3

Disclaimer: this is a dodgy solution that may stop working at any time and you definitely shouldn't use this in production.

For those looking for a quick and dirty solution, this CSS worked for me:

.gm-style > div:first-child > div:first-child > div:nth-child(4) {
  z-index: 99 !important;
}

Use at your own risk!

Answer 4

In order to be able to play around with the paneType of the mapLabel class, I added a paneType property to the MapLabel class from google utility library (https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303).

This is usefull to make the label not to be hidden by a polyline.

Please find the code additions to the mapLabel.js file.

MapLabel.prototype.onAdd = function() {
  var canvas = this.canvas_ = document.createElement('canvas');
  var style = canvas.style;
  style.position = 'absolute';

  var ctx = canvas.getContext('2d');
  ctx.lineJoin = 'round';
  ctx.textBaseline = 'top';

  this.drawCanvas_();

  var panes = this.getPanes();
  if (panes) {
    // OLD: panes.mapPane.appendChild(canvas)
    var paneType = this.get('paneType');
    panes[paneType].appendChild(canvas);
  }
};

MapLabel = function (opt_options) {
  this.set('fontFamily', 'sans-serif');
  this.set('fontSize', 12);
  this.set('fontColor', '#000000');
  this.set('strokeWeight', 4);
  this.set('strokeColor', '#ffffff');
  this.set('align', 'center');

  this.set('zIndex', 1e3);
  this.set('paneType', 'floatPane');

  this.setValues(opt_options);
}

Sample code using the paneType:

    var mapLabel = new MapLabel({
      text: segDoc.curr_value.toFixed(0),
      position: new google.maps.LatLng(lblLat, lblLng),
      map: map.instance,
      fontSize: 12,
      align: 'center',
      zIndex: 10000,
      paneType: 'floatPane',
    });

Thanks!

Answer 5

Setting z-index to 104 for the overLay layer seems to be the "magic" number" if you care about interacting with the markers (i.e. dragging markers). Any higher than 104 and you can not interact with the markers. Wondering if there is a less brittle solution...

Answer 6

Use panes.overlayMouseTarget.appendChild

If you want to allow your layer to be targetable through mouse clicks (and use events such as "click" or CSS pseudo ::hover) then you should add your overlay to the map using overlayMouseTarget

var panes = this.getPanes();

panes.overlayMouseTarget.appendChild(this.div_);

Also see: https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes