Places autocomplete + custom data + map

I’m having trouble displaying places autocomplete + custom data onto a map.

Here’s an example template for an instant search map with places autocomplete:

Here’s an example of places autocomplete + custom data:

Each of these examples works fine on it’s own, but I haven’t been able to figure out how to merge the two.

Any thoughts would be appreciated, or a link to a similar example. Thanks!

Hi @vcca

I’m sorry there is no example combining them all. It seems quite complex and let me guide you a little bit.

The example in the first link uses InstantSearch.js and let you move around the map to refine searches. There is a search box (‘place’ widget) which is not useful for you in this case.

The second one uses Autocomplete.js and it shows how to use multiple sources and render them differently.

To combine them all, I think the way to go is to use InstantSearch with geoSearch widget for the map and to have a custom autocomplete widget. You will need to implement a custom autocomplete widget using connectAutocomplete connector. You can plug multiple indices, too.

  • This is a basic example for autocomplete with InstantSearch.
  • This is a guide for connectAutocomplete.
  • Since you want multi-index search, you can read this to learn how to use multi-index with autocomplete + InstantSearch.

I hope this makes sense to you. Let me know how it goes and if there’s anything unclear to you.

Thanks for the reply.

Is there a working example of the connectAutocomplete connector in use with autocomplete+instantsearch?

The autocomplete instantsearch docs describe using selectize.js to get things working.

The connectAutocomplete docs do not show how the connector fits within a larger autocomplete project. Is selectize removed when the connector is used? If not, how does it fit in relation to the connector?


I’ve incorporated the autocomplete connector example into instant.js autocomplete, but am having trouble: the autocomplete result list is now always showing. It no longer acts as a dropdown.

My CodeSandbox sample here.

Original instant.js autocomplete example.

I didn’t add anything custom, just attempted to take the example on the website and place it into the instant.js autocomplete example.


Hi @vcca, I see in the instant.js autocomplete, they are using a with options instead of a

    list. If you change your codesandbox to add a select with options to mimic the instant.js autocomplete sandbox, it should appear as a dropdown instead of an unordered list underneath an input. The documentation shows how to create the unordered list instead of a dropdown.