Widgets GeoSearch

Description

The GeoSearch widget displays the list of results from the search on a Google Maps. It also provides a way to search for results based on their position. The widget provides some of the common GeoSearch patterns like search on map interaction.

Requirements

The API of this widget is a bit different than the others that you can find in React InstantSearch. The API is component driven rather than options driven. We chose the former because it brings more flexibility to the widget. Since the geo search pattern is not a use case for every applications we decided to ship the widget in a separate package. Be sure to install it before using it:

yarn add react-instantsearch-dom-maps

The GeoSearch widget uses the geo search capabilities of Algolia. Your hits must have a _geoloc attribute in order to be available in the render prop.

Currently, the feature is not compatible with multiple values in the _geoloc attribute (e.g. a restaurant with multiple locations). In that case you can duplicate your records and use the distinct feature of Algolia to only retrieve unique results.

You are also responsible for loading the Google Maps library. We provide a component to load the library (<GoogleMapsLoader />) 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 about that in the Google Maps documentation.

Don’t forget to explicitly set the height of the map container, otherwise it won’t be shown (it’s a requirement of Google Maps).

Example

import { InstantSearch } from 'react-instantsearch-dom'; import { GoogleMapsLoader, GeoSearch, Control, Marker } from 'react-instantsearch-dom-maps'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="airbnb" > <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> </InstantSearch> );

<GeoSearch />

Decription

This component provides the hits to display. All the other geo components need to be nested under it. All the options avaible on the Google Maps class can be provided as props.

Usage

import { InstantSearch } from 'react-instantsearch-dom'; import { GeoSearch } from 'react-instantsearch-dom-maps'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="airbnb" > <GeoSearch google={window.google}> {({ hits }) => ( // render the hits )} </GeoSearch> </InstantSearch> );

Props

google* Type: object -

Reference to the global window.google object. See the documentation for more information.

children* Type: ({ hits: object[] }) => React.ReactNode -

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

initialZoom Type: number Default: 1

By default the map will set the zoom accordingly to the markers displayed on it. When we refine it may happen that the results are empty. For those situations we need to provide a zoom to render the map.

initialPosition Type: { lat: number, lng: number } Default: { lat: 0, lng: 0 }

By default the map will set the position accordingly to the markers displayed on it. When we refine it may happen that the results are empty. For those situations we need to provide a position to render the map.

enableRefine Type: boolean Default: true

If false, this map is for display purposes only, not for refining the search

enableRefineOnMapMove Type: boolean Default: true

If true, refine will be triggered as you move the map.

CSS classes

This component has no CSS classes.

Translation keys

This component has no translations.

<Marker />

Decription

This component is a wapper around google.maps.Marker, all the options avaible on the Marker class can be provided as props. This component cannot render any children components. See <CustomMarker /> for this behaviour.

Currently the component does not support the update of the options. Once the component is rendered changing the props won’t update the marker options.

Usage

import { InstantSearch } from 'react-instantsearch-dom'; import { GeoSearch, Marker } from 'react-instantsearch-dom-maps'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="airbnb" > <GeoSearch google={window.google}> {({ hits }) => ( <div> {hits.map(hit => ( <Marker key={hit.objectID} hit={hit} /> ))} </div> )} </GeoSearch> </InstantSearch> );

Props

hit* Type: object -

Hit to attach on the marker.

onClick Type: function -

This event is fired when the marker icon was clicked, see the documentation for more information.

onDoubleClick Type: function -

This event is fired when the marker icon was double clicked, the documentation for more information.

onMouseDown Type: function -

This event is fired for a mousedown on the marker, the documentation for more information.

onMouseOut Type: function -

This event is fired when the mouse leaves the area of the marker icon, the documentation for more information.

onMouseOver Type: function -

This event is fired when the mouse enters the area of the marker icon, the documentation for more information.

onMouseUp Type: function -

This event is fired for a mouseup on the marker, the documentation for more information.

CSS classes

This component has no CSS classes.

Translation keys

This component has no translations.

<CustomMarker />

Decription

This component is an alternative to <Marker />. In some cases you may want to have the full control of the marker rendering. You can provide any React components to design your custom marker.

Currently the component does not support the update of the options. Once the component is rendered changing the props won’t update the marker options.

Usage

import { InstantSearch } from 'react-instantsearch-dom'; import { GeoSearch, CustomMarker } from 'react-instantsearch-dom-maps'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="airbnb" > <GeoSearch google={window.google}> {({ hits }) => ( <div> {hits.map(hit => ( <CustomMarker key={hit.objectID} hit={hit}> <span>{hit.price}</span> </CustomMarker> ))} </div> )} </GeoSearch> </InstantSearch> );

Props

hit* Type: object -

Hit to attach on the marker.

className Type: string ''

The className to add on the marker wrapper element.

anchor Type: { x: number, y: number } { x: 0, y: 0 }

Offset for the marker element.

onClick Type: function -

Standard DOM event.

onDoubleClick Type: function -

Standard DOM event.

onMouseDown Type: function -

Standard DOM event.

onMouseEnter Type: function -

Standard DOM event.

onMouseLeave Type: function -

Standard DOM event.

onMouseMove Type: function -

Standard DOM event.

onMouseOut Type: function -

Standard DOM event.

onMouseOver Type: function -

Standard DOM event.

onMouseUp Type: function -

Standard DOM event.

CSS classes

This component has no CSS classes.

Translation keys

This component has no translations.

<Control />

Decription

This component allows the user to control the different strategy for the refinement (enable / disable refine on map move).

Usage

import { InstantSearch } from 'react-instantsearch-dom'; import { GeoSearch, Control } from 'react-instantsearch-dom-maps'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="airbnb" > <GeoSearch google={window.google}> {({ hits }) => ( <Control /> )} </GeoSearch> </InstantSearch> );

Props

The component has no props.

CSS classes

.ais-GeoSearch-control {}

The control element of the widget.

.ais-GeoSearch-label {}

The label of the control element.

.ais-GeoSearch-input {}

The input of the control element.

.ais-GeoSearch-redo {}

The redo search button.

Translation keys

control

The label of the radio button.

redo

The label of the redo button.

<Redo />

Decription

When refined on map move is disabled this component displays a button to redo the search on the current map view.

Usage

import { InstantSearch } from 'react-instantsearch-dom'; import { GeoSearch, Redo } from 'react-instantsearch-dom-maps'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="airbnb" > <GeoSearch google={window.google} enableRefineOnMapMove={false}> {({ hits }) => ( <Redo /> )} </GeoSearch> </InstantSearch> );

Props

The component has no props.

CSS classes

.ais-GeoSearch-control {}

The control element of the widget.

.ais-GeoSearch-redo {}

The redo search button.

.ais-GeoSearch-redo--disabled {}

The disabled redo search button.

Translation keys

redo

The label of the redo button.

<GoogleMapsLoader />

Decription

This component provide a built-in solution to load the google.maps library in your application. Its usage is completely optional. You can use any strategy you want to load the library. You can find more informations about that in the Google Maps documentation.

Usage

import { InstantSearch } from 'react-instantsearch-dom'; import { GoogleMapsLoader, GeoSearch } from 'react-instantsearch-dom-maps'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="airbnb" > <GoogleMapsLoader apiKey="GOOGLE_MAPS_API_KEY"> {google => ( <GeoSearch google={google}> {({ hits }) => ( <Redo /> )} </GeoSearch> )} </GoogleMapsLoader> </InstantSearch> );

Props

apiKey* Type: string -

Your Google API Key in case you don't have one you can create it on the Google documentation.

children* Type: (google: object) => React.ReactNode -

The render function that takes the google object as argument.

endpoint Type: string Default: https://maps.googleapis.com/maps/api/js?v=3.31

Endpoint that will be used to fetch the Google Maps library, can be used to load a different version, libraries, ... You can find more inforamtion in the Google documentation.

CSS classes

The component has no CSS classes.

Translation keys

The component has no translations keys.