Let me share my workaround for creating an overlay and dealing with z-index issues when using Google Maps API. The problem arises when dragging the map and the overlay ends up behind control elements like the zoom bar. No matter how much I adjust the z-index, it doesn't work as expected due to the structure of the parent elements having lower z-index values. If I increase the z-index of the parents, the controls end up hidden under the map itself. This is because the overlay and controls are in separate divs each with their own z-index.
<html>
<head>
<style type="text/css">
#map {
width: 600px;
height: 500px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
TestOverlay.prototype = new google.maps.OverlayView();
/** @constructor */
function TestOverlay(map) {
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
TestOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.innerHTML = "I want the zoombar to go behind me.";
div.style.backgroundColor = "white";
div.style.position = "relative";
div.style.fontSize = "20px";
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
TestOverlay.prototype.draw = function() {
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
TestOverlay.prototype.onRemove = function() {
};
function init() {
var mapCenter = new google.maps.LatLng(-35.397, 150.644);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: mapCenter
});
new TestOverlay(map);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map"></div>
</body>
I've come up with a somewhat hacky solution to handle the overlay issue with the controls while using the Google Maps API. Here's how I managed to make it work:
<html>
<head>
<style type="text/css">
#map {
width: 600px;
height: 500px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var ol;
TestOverlay.prototype = new google.maps.OverlayView();
/** @constructor */
function TestOverlay(map) {
this.setMap(map);
}
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
TestOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.id = "dummy";
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(div);
};
TestOverlay.prototype.draw = function() {
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
TestOverlay.prototype.onRemove = function() {
};
function init() {
var mapCenter = new google.maps.LatLng(-35.397, 150.644);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: mapCenter
});
google.maps.event.addListenerOnce(map, 'idle', function() {
var div = document.createElement('div');
div.id = "overlay";
div.className = "gmnoprint";
div.innerHTML = "Yes, the controls go behind me ;)";
div.style = "background-color:white;z-index:100000000000;position:absolute";
$(".gm-style").append(div);
});
google.maps.event.addListener(map, 'drag', function() {
$("#overlay").css("left", $("#dummy").parent().parent().parent().css("left"))
$("#overlay").css("top", $("#dummy").parent().parent().parent().css("top"))
});
ol = new TestOverlay(map);
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
To overcome the z-index issue, I created a dummy overlay placed at the same level as the controls, and used the jQuery library to dynamically position my overlay div based on the dummy div during the drag event. It may not be the most elegant solution but it gets the job done!