Is it possible to dynamically switch Markers?

[MattHeslington]

Hello,

I'm trying to show a highlighted marker when global state changes, but I'm unable to get the Marker to alternate. I have tried two methods, first changing the actual icon of the marker:

<MarkerF
             key={listing?._id}
             ...
             icon={
                      selectedCard === listing._id
                      ? 'marker-highlight.png'
                       : 'marker.png'
             }
 /> 

and second, changing the entire marker:

<GoogleMap mapContainerClassName='map-container' onLoad={onLoad} onUnmount={onUnmount}>
            {listings &&
                listings.map((listing) =>
                    selectedCard === listing._id ? (
                        <MarkerF
                            key={listing?._id}
                            ...
                            icon={'marker-highlight.png'}
                        />
                    ) : (
                        <MarkerF
                            key={listing?._id}
                            ...
                            icon={'marker-lg.png'}
                        />
                    )
                )}
</GoogleMap>

I presume the way the map is initialised in the onLoad function is preventing the Markers from being reactive after initialisation. This is the onLoad function, where I set bounds:

const onLoad = useCallback(function callback(map) {
        const bounds = new window.google.maps.LatLngBounds()
        listings?.forEach(({ coords: { lat, lng } }) => {
            bounds.extend(new window.google.maps.LatLng(lat, lng))
        })
        map.fitBounds(bounds)
        setMap(map)
    }, [])

Does anyone have experience of doing this, please? It works the other way around, where if the user hovers over a marker, we set global state to that marker's id, and the corresponding card is highlighted, I just can't get the markers to change when a product card is hovered.

Any help very much appreciated!
Cheers,
Matt

[JustFly1984]

Don't just blindly copy the code from examples. onLoad example is just an example of using the map instance. Just remove it from your code.

[MattHeslington]

Don't blindly make assumptions about people's code Alexey. It's neither helpful nor constructive.

I'm not "blindly" copying code, I'm using the suggested code from a question and answer posted on your own Slack channel here

Great answer though - "just remove it" 👍🏻

[SkylineDev2]

I recently implemented the similar interaction. Basically, we show the larger marker either:

1. user clicks or mouse hover on the marker
   2 .user clicks on item card on the left

Your codes seem logical. You have "selectedCard", we have "selectedPlace".
When clicking on the item card, we ensure to call SetSelectPlace(place) so the variable is updated.
The only small difference, in our case, we have the condition checking at icon property level.
<Marker
key={place.id}
position={place.pos}
icon={(place.id === selectedPlace.id ? ClientHighlightMarker : ClientMarker)}
onload=...
onMouseOver
/>

You may try 2 things if you still have this issue:

1. ensure your selectedCard is updated properly
2. try to have the checking at icon property level.

Good luck. :)

[MattHeslington]

Great, thank you for that - I'll try implementing the check at the icon level later today and let you know how it goes