How to add “outside” event listener to Markers in Google Maps (react-google-maps/api)

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?

Answer

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>
)