API Reference / React InstantSearch Widgets / GoogleMapLoader
Apr. 24, 2019

GoogleMapLoader

Widget signature 
<GoogleMapsLoader
  apiKey={string}
  children={function}
  // Optional parameters
  endpoint={string}
/>
See code examples

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

Copy
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
1
2
3

<GoogleMapsLoader apiKey="GOOGLE_MAPS_API_KEY">
  {google => null}
</GoogleMapsLoader>
children
type: function
Required

The render function that takes the google object as argument.
Copy
1
2
3
4
5

<GoogleMapsLoader
  // ...
>
  {google => null}
</GoogleMapsLoader>
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
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?

React InstantSearch v5