CODEWITHSUNDEEP
cssgoogle-maps-api-3
Martin Angelov
Martin Angelov

Reputation: 53

how to make an overlay of google maps stand on top of the zoom bar

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.

<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>

As you can see. There is an overlay and thats about it, the rest comes from google maps api. Thanks in advance.

So, in the end, very hacky and ugly but here's how I've done it:

<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>

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 :) .

Upvotes: 2

Views: 2883

Answers (1)

Craziwolf
Craziwolf

Reputation: 46

From what I understand there are 6 layers to custom overlays these are as follows

  1. mapPane
  2. overlayLayer
  3. overlayShadow
  4. overlayImage
  5. floatShadow
  6. overlayMouseTarget
  7. floatPane

Unfortunately they never designed it to allow overlays on top of the controls as in some cases this would make the map useless.

If you have not already, take a look at the developers website covering custom overlays. Who knows there may be a work around no one has found yet.

https://developers.google.com/maps/documentation/javascript/customoverlays#hide_show

Upvotes: 3

Related Questions