HTML element on top of full screen Google map

Question

I am showing a small popup box when certain points on Google map are clicked, and it works on the regular small Google map mode.

However when the google map is on full screen mode by clicking the full screen button (shown when fullScreenControl is set to true), the popup doesn't show on top of the map. By inspecting the element it appears at correct position and correct size but is invisible.

I tried giving the popup a higher z-index value but still no luck.

Is it possible at all to do this?

Answer 1

The problem is that Google Maps puts one of its own inner divs into fullscreen mode. Everything outside of that div is not visible, regardless of z-index.

My workaround required two steps:

1) Move the custom element(s) inside the inner div. The complication is that the inner div doesn't exist until after google.maps.Map is instantiated. Using jQuery, I inserted this code immediately after creating the map object:

var $map = $("#map");
var map = new google.maps.Map(
    $map.get(0),
    {/*map options*/},
);
var $fullscreenDiv = $map.children("div:first");
$("#mybutton1, #mybutton2").appendTo($fullscreenDiv);

2) But the elements won't be visible in their new location unless they have an explicit z-index. It doesn't seem to matter what the value is. z-index: 1 works, but for my code I played it safe and used z-index: 2147483647 (the maximum value.)

#mybutton1, #mybutton2 {
    z-index: 2147483647;
}

Answer 2

A no jQuery solution. As sanchopancho13 mentions above, you need to move your custom menu inside the Google Maps DIV after map instantiation. Javascript "appendChild" method does this. If the referenced element is already in the DOM, javascript "appendChild" method moves the element as well as all child elements and attached event handlers.

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

So, create your custom menu or panel as normal in HTML (with event handlers):

<div id="customPanel">
  <button onclick="action1()">Custom Button 1</button>
  <button onclick="action2()">Custom Button 2</button>
  <button onclick="action3()">Custom Button 3</button>
  <button onclick="action4()">Custom Button 4</button>
</div>

Instantiate the map and find its first DIV element, and append your DIV inside the Google Map DIV:

var map = new google.maps.Map(map, { yourMapOptions });
var mapDiv = document.getElementById('map').getElementsByTagName('div')[0];
mapDiv.appendChild(document.getElementById("customPanel"));

This works for map in full screen as well as normal mode. As already mentioned above, setting the Z-index appears to be essential to make your custom panel visible:

CSS:

#customPanel {
  z-index: 1;
}