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?
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 downsetActiveMarker
as a prop to theBusiness
component. And inside theBusiness
component, pass downhike.coordinates.latitude
,hike.coordinates.longitude
andsetActiveMarker
as props to theBusinessCard
components. InsideBusinessCard
, addonHover={() => props.setActiveMarker({ lat: props.latitude, lng: props.longitude })}
Something like this...
Component where Markers are located
Business component
BusinessCard component