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

CustomMarker

Widget 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

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
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 v5