Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML element on top of full screen Google map

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?

like image 258
Iblisto Avatar asked Sep 22 '16 16:09

Iblisto


People also ask

How do I make HTML map full screen?

In the below example, applying style="height: 100%;" to the body and html makes google maps full height because the div the map loads in to is a child of body . In your case, you need to add style="height: 100%;" to the relevant parent elements of #map .


2 Answers

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;
}
like image 143
sanchopancho13 Avatar answered Nov 04 '22 05:11

sanchopancho13


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;
}
like image 42
NCC-1701 Avatar answered Nov 04 '22 05:11

NCC-1701