Marker | React InstantSearch V6 (Deprecated)
Signature
<Marker hit={object} // Optional parameters onClick={function} onDoubleClick={function} onMouseDown={function} onMouseOut={function} onMouseOver={function} onMouseUp={function} />
About this widget
This widget is a wrapper around google.maps.Marker
, all the options available 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
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
object
The hit to attach on the marker.
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
function
The event that is fired when the marker icon is clicked. See the Google Maps documentation for more information.
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
function
The event that is fired when the marker icon is double-clicked. See the Google Maps documentation for more information.
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
function
The event that is fired on mousedown on the marker. See the Google Maps documentation for more information.
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
function
The event that is fired when the mouse leaves the area of the marker icon. See the Google Maps documentation for more information.
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
function
The event that is fired when the mouse enters the area of the marker icon. See the Google Maps documentation for more information.
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
function
The event that is fired on mouseup on the marker. See the Google Maps documentation for more information.
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>