I have a list of hikes stored in state and I rendered the location of those hikes as Markers on the Google Map Component like so:
{hikes.map(hike =>
<Marker
position={{lat: hike.coordinates.latitude, lng: hike.coordinates.longitude}}
icon = {
{ url:"https://static.thenounproject.com/png/29961-200.png",
scaledSize : new google.maps.Size(50,50)
}
}
onClick={()=>{console.log(hike.name)}}
/>
I also display the list of hikes and its other details in its own BusinessCard Component like so
export const Businesses = (props)=>{
const {hikes, addToTrip} = props
return(<>
<div className="businessesColumn">
{hikes.map(hike=>(
<BusinessCard.../>
))}
When I hover over each of the BusinessCard components, I want the corresponding marker to animate "bounce." I tried manipulate google.maps.event.addListener but I think I was doing it wrong. I'm not sure if it can detect events outside of the GoogleMap component? Any ideas on how should I approach this problem? Thank you!
Okay so I don't know exactly how your components are structured, but try adding state activeMarker inside the component where your Markers are located. Then pass down setActiveMarker as a prop to the Business component. And inside the Business component, pass down hike.coordinates.latitude, hike.coordinates.longitude and setActiveMarker as props to the BusinessCard components. Inside BusinessCard, add onHover={() => props.setActiveMarker({ lat: props.latitude, lng: props.longitude })}
Something like this...
Component where Markers are located
const [activeMarker, setActiveMarker] = useState(null)
return (
<>
<GoogleMap>
{hikes.map(hike => (
<Marker
position={{lat: hike.coordinates.latitude, lng: hike.coordinates.longitude}}
icon = {{
url:"https://static.thenounproject.com/png/29961-200.png",
scaledSize : new google.maps.Size(50,50)
}}
animation={
(hike.coordinates.latitude === activeMarker.lat
&& hike.coordinates.longitude === activeMarker.lng)
? google.maps.Animation.BOUNCE : undefined
}
/>
))}
</GoogleMap>
<Business setActiveMarker={setActiveMarker} />
</>
)
Business component
return(
<div className="businessesColumn">
{hikes.map(hike => (
<BusinessCard
latitude={hike.coordinates.latitude}
longitude={hike.coordinates.longitude}
setActiveMarker={props.setActiveMarker}
/>
))}
</div>
)
BusinessCard component
return (
<div
className="business-card"
onMouseEnter={() => props.setActiveMarker({ lat: props.latitude, lng: props.longitude })}
>
{/* Whatever */}
</div>
)