InstantSearch / React / V6 / API reference

GoogleMapsLoader | React InstantSearch V6 (Deprecated)

Deprecated content
This documentation is for a deprecated version of React InstantSearch. Some features and settings may be missing or their usage may have changed. Refer to the documentation for the latest version of React InstantSearch for up-to-date information.

Signature

Signature
<GoogleMapsLoader
  apiKey={string}
  children={function}
  // Optional parameters
  endpoint={string}
/>

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

Required
Type: 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

Required
Type: function

The render function that takes the google object as argument.

1
2
3
4
5
<GoogleMapsLoader
  // ...
>
  {google => null}
</GoogleMapsLoader>

endpoint

Optional
Type: 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>
Did you find this page helpful?