GoogleMapsLoader | React InstantSearch V6 (Deprecated)
This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.
Signature
About this widget
This component provides 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 in the Google Maps documentation.
Examples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import {
GoogleMapsLoader,
GeoSearch,
Marker,
} from 'react-instantsearch-dom-maps';
<div style={{ height: 500 }}>
<GoogleMapsLoader apiKey="GOOGLE_MAPS_API_KEY">
{google => (
<GeoSearch google={google}>
{({ hits }) => (
<div>
{hits.map(hit => (
<Marker key={hit.objectID} hit={hit} />
))}
</div>
)}
</GeoSearch>
)}
</GoogleMapsLoader>
</div>
Props
apiKey
string
Your Google API Key. See how you can create one in the Google documentation.
1
2
3
<GoogleMapsLoader apiKey="GOOGLE_MAPS_API_KEY">
{google => null}
</GoogleMapsLoader>
children
function
The render function that takes the google object as argument.
1
2
3
4
5
<GoogleMapsLoader
// ...
>
{google => null}
</GoogleMapsLoader>
endpoint
string
Endpoint to fetch the Google Maps library. It can be used to load a different version, libraries, etc. Note that you don’t have to provide the API Key inside the URL, it will be automatically appended. You can find more information in the Google documentation.
1
2
3
4
5
6
<GoogleMapsLoader
// ...
endpoint="https://maps.googleapis.com/maps/api/js?v=weekly"
>
{google => null}
</GoogleMapsLoader>
