API Reference / React InstantSearch / CustomMarker

CustomMarker

A
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}
/>
See code examples
See live example

About this widget # A

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 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 # A

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 # A

hit #
type: object
Required

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 #
type: string
default: ""
Optional

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 #
type: object
default: {x: 0, y: 0}
Optional

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 #
type: function
Optional

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 #
type: function
Optional

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 #
type: function
Optional

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 #
type: function
Optional

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 #
type: function
Optional

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 #
type: function
Optional

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 #
type: function
Optional

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 #
type: function
Optional

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 #
type: function
Optional

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?
React InstantSearch v6