CustomMarker | React InstantSearch V6 (Deprecated)
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
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
object
The hit to attach on the marker.
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
string
The className
to add on the marker wrapper element.
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
object
The offset for the marker element.
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
function
The standard onClick
DOM event.
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
function
The standard onDoubleClick
DOM event.
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
function
The standard onMouseUp
DOM event.
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
function
The standard onMouseDown
DOM event.
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
function
The standard onMouseOut
DOM event.
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
function
The standard onMouseOver
DOM event.
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
function
The standard onMouseEnter
DOM event.
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
function
The standard onMouseLeave
DOM event.
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
function
The standard onMouseMove
DOM event.
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>