GoogleMapLoader
About this widget
We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.
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
|
type: string
Required
Your Google API Key. See how you can create one in the Google documentation. |
||
|
Copy
|
|||
children
|
type: function
Required
The render function that takes the |
||
|
Copy
|
|||
endpoint
|
type: string
default: https://maps.googleapis.com/maps/api/js?v=3.31
Optional
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. |
||
|
Copy
|
|||
