Guides / Building Search UI / UI & UX patterns

Algolia Places for InstantSearch.js

Places is going away on May 31, 2022. Read the announcement.

Overview

Algolia Places provides a fast, distributed, and easy way to use an address search autocomplete JavaScript library on your website. There is a built-in widget to integrate Algolia Places with InstantSearch.js. This widget is not shipped with InstantSearch.js though. You have to manually install it. You can find more information about that on the Places documentation.

In this guide we will see how we can integrate the Places widget that interacts with the geoSearch widget of InstantSearch.js. You can find the complete source code of the example on GitHub.

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const search = instantsearch({
  indexName: 'airports',
  searchClient,
});

search.addWidgets([
  placesInstantsearchWidget({
    container: '#searchbox',
  }),

  instantsearch.widgets.geoSearch({
    container: '#maps',
    googleReference: window.google,
  })
]);

search.start();

You can find the complete source code of the example on GitHub.

Did you find this page helpful?