GeoSearch for React.js not showing map

My GoogleMapsLoader component from react-instantsearch-dom-maps is not displaying the maps, instead it just showed me the checkbox with the label “Search as I move map”. Then I inspected the elements. I found that the div with the class name .ais-GeoSearch-map has position: ‘relative’ and overflow: ‘hidden’. removed the position and overflow css inside the browser from elements tab. Then I saw the map rendering but not with the mentioned height and width I gave for the parent div tag. What wrong am I doing? Help me out. I’m stuck with this for 2 days and couldn’t find a solution

Someone help me with this, please. My Google Map is not rendering if my position is set to relative or absolute. If I unset the position of the map, the map is not set inside the parent container. TIA

This is frustrating. It’s been three days. I’m stuck with this issue. I almost gave up with this feature. Help me out please

Hi @sarathDev,

Our apologies for the delay. This Discourse forum is our public Community forum and my guess is most of our users are busy during the holidays. Our Support team also only engages here as a best-effort or when they have time.

If you have a specific question and your plan entitles you to technical support, I suggest sending a note to support@algolia.com to create a case and ensure the question gets investigated!

-Kevin

Did anyone ever figure this out? This is the same thing that’s happening to me, so if it was solved I’d love to hear how. Thanks!

What was causing the map not to show up on my end is that the content security policy needed to be adjusted to allow script-src from maps.googleapis.com :grinning:. I do still see the position relative and overflow hidden that OP mentions though.

Hi there,

I just fixed this issue. You have to include instantsearch.css/themes/algolia.css in your project or the map wont show up. So npm i instantsearch.css and then import it and you should be good to go.

I hope algolia will update their documentation as this was frustrating.

As mentioned in the Requirements section, you need to set the height of the container, and not necessarily to import the entire InstantSearch theme.