InstantSearch / React / V6 / API reference

CustomMarker | React InstantSearch V6 (Deprecated)

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

Signature

Signature 
<CustomMarker
  hit={object}
  // Optional parameters
  className={string}
  anchor={object}
  onClick={function}
  onDoubleClick={function}
  onMouseUp={function}
  onMouseDown={function}
  onMouseOut={function}
  onMouseOver={function}
  onMouseEnter={function}
  onMouseLeave={function}
  onMouseMove={function}
/>

About this widget

This component is an alternative to <Marker />. In some cases, you may want to have the full control of the marker rendering. You can provide any React components to design your custom marker.

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
22
23

import {
  GoogleMapsLoader,
  GeoSearch,
  CustomMarker,
} from 'react-instantsearch-dom-maps';

<div style={{ height: 500 }}>
  <GoogleMapsLoader apiKey="GOOGLE_MAPS_API_KEY">
    {google => (
      <GeoSearch google={google}>
        {({ hits }) => (
          <div>
            {hits.map(hit => (
              <CustomMarker key={hit.objectID} hit={hit}>
                {hit.name}
              </CustomMarker>
            ))}
          </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
10
11

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

className

Optional
Type: string

The className to add on the marker wrapper element.

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

<GeoSearch google={window.google}>
  {({ hits }) => (
    <div>
      {hits.map(hit => (
        <CustomMarker
          // ...
          className="MyCustomMarker"
        >
          {hit.name}
        </CustomMarker>
      ))}
    </div>
  )}
</GeoSearch>

anchor

Optional
Type: object

The offset for the marker element.

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

<GeoSearch google={window.google}>
  {({ hits }) => (
    <div>
      {hits.map(hit => (
        <CustomMarker
          // ...
          anchor={{
            x: 0,
            y: -5,
          }}
        >
          {hit.name}
        </CustomMarker>
      ))}
    </div>
  )}
</GeoSearch>

onClick

Optional
Type: function

The standard onClick DOM event.

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

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

onDoubleClick

Optional
Type: function

The standard onDoubleClick DOM event.

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

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

onMouseUp

Optional
Type: function

The standard onMouseUp DOM event.

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

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

onMouseDown

Optional
Type: function

The standard onMouseDown DOM event.

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

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

onMouseOut

Optional
Type: function

The standard onMouseOut DOM event.

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

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

onMouseOver

Optional
Type: function

The standard onMouseOver DOM event.

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

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

onMouseEnter

Optional
Type: function

The standard onMouseEnter DOM event.

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

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

onMouseLeave

Optional
Type: function

The standard onMouseLeave DOM event.

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

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

onMouseMove

Optional
Type: function

The standard onMouseMove DOM event.

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

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