Google Maps AutoComplete dropdown hidden when Google Maps Full Screen is true

user_4223026 0
Viewed 2953

I've implemented a google maps with autocomplete onverlayed on the map and I've set the FullScreenControl option to "true" (You can see the FullScreenControl on the right in the image below)

AutoComplete DropDown hidden

My problem is that when I switch to FullScreen mode by clicking the FullScreenControl, the dropdown is hidden behind the google map. It seems that the ZIndex is too low but setting it to a very large number does not seem to fix the issue. You can see from the image below that the dropdown exists, but only behind the fullscreen google map.

I did find a similar question with answer where someone used a normal dropdown and not the google map autocomplete. Similar Question and answer

However the solution didn't work for me. Setting the ZIndex doesn't seem to work. I'm using TypeScript with Angular2.

Thank you.

AutoComplete DropDown showing[![][2]]4

dropdown z-index autocomplete google-maps fullscreen
3 Answers

For anyone struggling with this, if the z-index solution is not working: The Google maps generated div ("pac-container") with the autocomplete options is appended to the body child elements. But when in full screen, only elements inside the target element (the map div) will be shown, so z-index is ignored.

A quick workaround is to move the pac-container div inside the map div when entering full screen, and move it back on exit.

document.onfullscreenchange = function ( event ) {
let target = event.target;
let pacContainerElements = document.getElementsByClassName("pac-container");
if (pacContainerElements.length > 0) {
    let pacContainer = document.getElementsByClassName("pac-container")[0];
    if (pacContainer.parentElement === target) {
        console.log("Exiting FULL SCREEN - moving pacContainer to body");
        document.getElementsByTagName("body")[0].appendChild(pacContainer);
    } else {
        console.log("Entering FULL SCREEN - moving pacContainer to target element");
        target.appendChild(pacContainer);
    }
} else {
    console.log("FULL SCREEN change - no pacContainer found");

}};
user_2041530

Thank you @vladhorby! I ended up with your solution due to updating z-index not working on my case. I got 1 little bug, somehow that options position not in the right place when on the fullscreen mode. I add little code to fix this thing. The idea is to add a class when in fullscreen mode, and delete that after leave the fullscreen. Hope this can help anyone with the same case.

document.onfullscreenchange = function ( event ) {
    let target = event.target;
    let pacContainerElements = document.getElementsByClassName("pac-container");
    if (pacContainerElements.length > 0) {
      let pacContainer = document.getElementsByClassName("pac-container")[0];
      if (pacContainer.parentElement === target) {
        document.getElementsByTagName("body")[0].appendChild(pacContainer);
        pacContainer.className += pacContainer.className.replace("fullscreen-pac-container", "");
      } else {
        target.appendChild(pacContainer);
        pacContainer.className += " fullscreen-pac-container";
      }
    }
  };

and the last thing add this to the your css file:

.fullscreen-pac-container[style]{
  z-index: 2547483647 !important;
  top:50px !important;
}
user_16529880
Related