Search code examples
google-mapsautocompletez-indexfullscreendropdown

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

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

Solution

  • I was able to fix it by adding z-index to .pac-container

    see here

     .pac-container, .pac-item{
    z-index: 2147483647 !important;
 }