GeoSearch | React InstantSearch V6 (Deprecated)

This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.

Signature

<GeoSearch
  google={object}
  children={function}
  // Optional parameters
  initialZoom={number}
  initialPosition={object}
  enableRefine={boolean}
  enableRefineOnMapMove={boolean}
/>

About this widget

The geoSearch widget displays search results on a Google Map. It lets you search for results based on their position and provides some common usage patterns such as “search on map interactions”.

All other geo components must be nested under it. All the options available on the Google Maps class can be provided as props.

Requirements

The API of this widget is different than others in React InstantSearch. It’s component-driven rather than options-driven since it brings more flexibility to the widget. Since the geo search pattern isn’t a use case for every application, it must be installed as a separate package, as follows:

$
npm install --save react-instantsearch-dom-maps

The widget uses the geo search capabilities of Algolia. Your hits must have a _geoloc attribute so they can be displayed on the map.

The feature is currently incompatible with multiple values in the _geoloc attribute (for example, a restaurant with multiple locations). In such cases, you can duplicate your records and use the distinct feature of Algolia to retrieve only the most relevant result.

You are responsible for loading the Google Maps library. We provide the <GoogleMapsLoader /> component to load the library but its usage is not required to use the geo widget. You can use any strategy you want to load Google Maps. You can find more informations in the Google Maps documentation.

Make sure that you explicitly set the height of the map container (see below), otherwise it won’t show.

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import {
  GoogleMapsLoader,
  GeoSearch,
  Control,
  Marker,
} from 'react-instantsearch-dom-maps';

<div style={{ height: 500 }}>
  <GoogleMapsLoader apiKey="GOOGLE_MAPS_API_KEY">
    {google => (
      <GeoSearch google={google}>
        {({ hits }) => (
          <div>
            <Control />
            {hits.map(hit => (
              <Marker key={hit.objectID} hit={hit} />
            ))}
          </div>
        )}
      </GeoSearch>
    )}
  </GoogleMapsLoader>
</div>

Props

google

A reference to the global google object (usually window.google). See the Google Maps documentation for more information.

1
2
3
<GeoSearch google={window.google}>
  {() => null}
</GeoSearch>

children

The render function takes an object as argument with the hits inside.

1
2
3
4
5
6
7
8
9
10
11
<GeoSearch
  // ...
>
  {({ hits }) => (
    <ul>
      {hits.map(hit => (
        <li key={hit.objectID}>{hit.objectID}</li>
      ))}
    </ul>
  )}
</GeoSearch>

initialZoom

By default, the map sets the zoom based on to the markers that are displayed on it. Yet when React InstantSearch refines the results, they may be empty. When it happens, it needs a zoom level to render the map.

1
2
3
4
5
6
<GeoSearch
  // ...
  initialZoom={8}
>
  {() => null}
</GeoSearch>

initialPosition

By default, the map sets the position based on to the markers that are displayed on it. Yet when React InstantSearch refines the results, they may be empty. When it happens, it needs a position to render the map.

1
2
3
4
5
6
7
8
9
<GeoSearch
  // ...
  initialPosition={{
    lat: 48.88038,
    lng: 2.32695,
  }}
>
  {() => null}
</GeoSearch>

enableRefine

If true, the map is used for refining the search. Otherwise, it’s only for display purposes.

1
2
3
4
5
6
<GeoSearch
  // ...
  enableRefine={false}
>
  {() => null}
</GeoSearch>

enableRefineOnMapMove

If true, refine is triggered as you move the map.

1
2
3
4
5
6
<GeoSearch
  // ...
  enableRefineOnMapMove={false}
>
  {() => null}
</GeoSearch>