how to make an overlay of google maps stand on top of the zoom bar <p>So here is how I create an overlay (the standart way). Problem is, when I drag the map around, the overlay gets behind the zoom bar and other controls. I want those controls to go behind the overlay. I tried changing the z-index of the overlay but that doesn't work because parents of the overlay have low z-index. If I change z-index of the parents, the controls get hidden by the whole map. So the reason that changing z-index doesn't work is because overlay and zoom bar for example are in 2 different divs which themselves have z-index.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #map { width: 600px; height: 500px; } &lt;/style&gt; &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; 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); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="map"&gt;&lt;/div&gt; &lt;/body&gt; </code></pre> <p></p> <p>As you can see. There is an overlay and thats about it, the rest comes from google maps api. Thanks in advance.</p> <p>So, in the end, very hacky and ugly but here's how I've done it:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #map { width: 600px; height: 500px; } &lt;/style&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; 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); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="map"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Idea is that the overlay is on same level as the controls and there is a dummy overlay where the overlays are supposed to be. When drag event is fired, I get the coordinates of the dummy div, and put it in my overlay div. Thats about it :) .</p>