google maps adding overlay layer above UI and markers

问题

I have a website with a google map filled with multiple markers. Each marker stands for an event on a festival. Since the information is too big to fit in the infowindow, i have decided to use a custom overlay. So far, with partially success. Here below is my image. As you can see, the overlay is below the marker. My goal is that the overlay comes above the markers and UI.

Here below is my code sample,

TxtOverlay.prototype.draw = function() {
    // create info window
    var div = document.createElement("div");
    div.id = "mapOverlay";
    div.innerHTML = this.txt;
    div.style.cssText = 'background-color : #000; color: #FFF; border-radius: 15px; border-style : solid; border-width : 1px;padding: 10px; z-index: 9999; display: block; width: 460px; height: 460px; opacity: 0.4;';

    // get projection
    var map = this.map;
    var overlayProjection = this.getProjection(); 
    var anchor = overlayProjection.fromLatLngToDivPixel(this.pos);
    div.style.position = "absolute";
    div.style.left = (anchor.x - 240) + 'px';
    div.style.top = (anchor.y - 240)+ 'px';

    // bind created div to object var
    this.div = div;
    // add to map
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);

    console.log("prototype draw");
}

I have used z-index to 9999 ( there are 4000 markers atm ) but it doesn't work. Maybe it's worth to note that each marker id has its own z-index. (fe marker id = 1 has z-index = 1, marker id = 2 has z-index = 2, marker id = 3 has z-index = 3, ect )

If the overlay is on the top of both markers and UI, then it's easier to catch the click event to remove the overlay instead of manipulating the map and the map-objects.

thank you.

回答1:

For others whom are also interested to solve this issue, i have found a simple workaround, i am using the floatPane layer, which is above the markers. Then i removed the UI/controls to have a working overlay without map interaction.

In the draw method,

// add to map
var panes = this.getPanes();
panes.floatPane.appendChild(div);

// add event
document.getElementById("mapOverlay").addEventListener('click', this.onRemove, false);

// disable map controls
toggleControls(false);

then when the div got clicked, simply create the next

// remove overlay
TxtOverlay.prototype.onRemove = function(e) {
    // remove listener
    var element = document.getElementById("mapOverlay");
    element.removeEventListener('click', this.onRemove, false);
    // and div
    var parent = element.parentNode;
    parent.removeChild(element);
    this._div = null;

    // return controls
    toggleControls(true);
}

and the toggle method,

// toggles control ; false = no interaction, true = interaction
var toggleControls = function(bool) {
    _map.setOptions({draggable: bool, zoomControl: bool, scrollwheel: bool, disableDoubleClickZoom: !bool, scaleControl : bool, zoomControl : bool, panControl : bool});
}

that's all to place and remove an overlay. :-)

来源：https://stackoverflow.com/questions/18227264/google-maps-adding-overlay-layer-above-ui-and-markers

标签

javascript

google-maps-api-3

overlay