API Reference / React InstantSearch Widgets / Marker

Marker

Widget signature 
<Marker
  hit={object}
  // Optional parameters
  onClick={function}
  onDoubleClick={function}
  onMouseDown={function}
  onMouseOut={function}
  onMouseOver={function}
  onMouseUp={function}
/>
See code examples
See Live example

About this widget

This widget is a wapper around google.maps.Marker, all the options avaible 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
type: object
Required

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

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

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

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

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

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

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?

React InstantSearch v6