GeoSearch | React InstantSearch V6 (Deprecated)
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
object
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
function
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
number
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
object
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
boolean
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
boolean
If true
, refine is triggered as you move the map.
1
2
3
4
5
6
<GeoSearch
// ...
enableRefineOnMapMove={false}
>
{() => null}
</GeoSearch>