React-google-maps: The Autocomplete list in search box is not showing

Created on 1 Mar 2018 · 12Comments · Source: tomchentw/react-google-maps

Dear tom, it seems that the Autocomplete list in SearchBox Component not showing. Am I the only one who is affected by this issue ? It is reproducible in your official docs.

Here is the screen recording :
not showing

I am pretty sure that this is not caused by API search limit since I am using paid plans.

Source

fawwaz

👍14

Most helpful comment

Hi! I had this problem too, version changings didn't help. My google map renders in bootstrap modal. The reason was that map has z-index: 1000 and modal has z-index: 1050. So, adding

.pac-container {
    z-index: 1100 !important;
}

somewhere in css fixes problem.

evilandfox on 20 May 2018

👍27 🎉13 😄8 ❤7 👀2 🚀1

All 12 comments

Also for me with Chrome and Safari on macOS Sierra, from this morning.

I'm using the library in one of my projects and it's not going anymore!

adelpuva on 1 Mar 2018

I have the same problem, tested on different browsers (Chrome, Firefox and Safari) on macOS.

cborboni on 1 Mar 2018

the same here
response from autocomplete service:
/**/_xdc_._wvyn9i && _xdc_._wvyn9i( [4] )

jardziochpawel on 1 Mar 2018

the same here, since today google.maps.places.SearchBox doesn't seem to be working. But if I change this to google.maps.places.Autocomplete is showing autocomplete dropdown.

baqui on 1 Mar 2018

@baqui would you like to give a more specific details on how to fix the issue ? It seems that I couldn't find Autocomplete.js in this repo.
FYI, I'm using the latest version of react-google-maps (9.4.5)

fawwaz on 1 Mar 2018

@fawwaz You can use autocomplete from another repo. For example - https://github.com/ErrorPro/react-google-autocomplete or https://github.com/kenny-hibino/react-places-autocomplete

romannep on 1 Mar 2018

I think this one is caused by a conflict in google's latest experimental version 3.32.
You can resolve it by passing the version as 3.31 or add v=3.31 or v=3.

Hemant-yadav on 1 Mar 2018

👍13 ❤2 🎉2

Thanks it works !

fawwaz on 2 Mar 2018

Hi! I had this problem too, version changings didn't help. My google map renders in bootstrap modal. The reason was that map has z-index: 1000 and modal has z-index: 1050. So, adding

.pac-container {
    z-index: 1100 !important;
}

somewhere in css fixes problem.

evilandfox on 20 May 2018

👍27 🎉13 😄8 ❤7 👀2 🚀1

@evilandfox Thank you so much. I was searching for hours. And you are right. Your solution worked !!!

naveendb92 on 28 Sep 2018

in fullscreen search box is not working

sahus16 on 15 Apr 2019

Hi! I had this problem too, version changings didn't help. My google map renders in bootstrap modal. The reason was that map has z-index: 1000 and modal has z-index: 1050. So, adding
.pac-container {
    z-index: 1100 !important;
}
somewhere in css fixes problem.

in full screen the searcg box not workingg