InstantSearch / React / V6 / API reference

Marker | React InstantSearch V6 (Deprecated)

This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.

Signature

Signature 
<Marker
  hit={object}
  // Optional parameters
  onClick={function}
  onDoubleClick={function}
  onMouseDown={function}
  onMouseOut={function}
  onMouseOver={function}
  onMouseUp={function}
/>

About this widget

This widget is a wrapper around google.maps.Marker, all the options available on the Marker can be provided as props. This component can’t render any children components. You can take a look at <CustomMarker /> for this behavior.

The component currently doesn’t support options updates. Once the component is rendered, changing the props won’t update the marker options. You have to unmount then mount the widget back.

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

hit

Required
Type: object

The hit to attach on the marker.

Copy 
1
2
3
4
5
6
7
8
9

<GeoSearch google={window.google}>
  {({ hits }) => (
    <div>
      {hits.map(hit => (
        <Marker key={hit.objectID} hit={hit} />
      ))}
    </div>
  )}
</GeoSearch>

onClick

Optional
Type: function

The event that is fired when the marker icon is clicked. See the Google Maps documentation for more information.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<GeoSearch google={window.google}>
  {({ hits }) => (
    <div>
      {hits.map(hit => (
        <Marker
          // ...
          onClick={({ event, marker }) => {
            console.log(event);
            console.log(marker);
          }}
        />
      ))}
    </div>
  )}
</GeoSearch>

onDoubleClick

Optional
Type: function

The event that is fired when the marker icon is double-clicked. See the Google Maps documentation for more information.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<GeoSearch google={window.google}>
  {({ hits }) => (
    <div>
      {hits.map(hit => (
        <Marker
          // ...
          onDoubleClick={({ event, marker }) => {
            console.log(event);
            console.log(marker);
          }}
        />
      ))}
    </div>
  )}
</GeoSearch>

onMouseDown

Optional
Type: function

The event that is fired on mousedown on the marker. See the Google Maps documentation for more information.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<GeoSearch google={window.google}>
  {({ hits }) => (
    <div>
      {hits.map(hit => (
        <Marker
          // ...
          onMouseDown={({ event, marker }) => {
            console.log(event);
            console.log(marker);
          }}
        />
      ))}
    </div>
  )}
</GeoSearch>

onMouseOut

Optional
Type: function

The event that is fired when the mouse leaves the area of the marker icon. See the Google Maps documentation for more information.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<GeoSearch google={window.google}>
  {({ hits }) => (
    <div>
      {hits.map(hit => (
        <Marker
          // ...
          onMouseOut={({ event, marker }) => {
            console.log(event);
            console.log(marker);
          }}
        />
      ))}
    </div>
  )}
</GeoSearch>

onMouseOver

Optional
Type: function

The event that is fired when the mouse enters the area of the marker icon. See the Google Maps documentation for more information.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<GeoSearch google={window.google}>
  {({ hits }) => (
    <div>
      {hits.map(hit => (
        <Marker
          // ...
          onMouseOver={({ event, marker }) => {
            console.log(event);
            console.log(marker);
          }}
        />
      ))}
    </div>
  )}
</GeoSearch>

onMouseUp

Optional
Type: function

The event that is fired on mouseup on the marker. See the Google Maps documentation for more information.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<GeoSearch google={window.google}>
  {({ hits }) => (
    <div>
      {hits.map(hit => (
        <Marker
          // ...
          onMouseUp={({ event, marker }) => {
            console.log(event);
            console.log(marker);
          }}
        />
      ))}
    </div>
  )}
</GeoSearch>
Did you find this page helpful?