Marker icons are showing along with marker cluster

[jainvizz]

Description

When loading my custom google map component, marker cluster is getting created but with that actual markers are also getting drown. Providing screenshot below:

Expected result: It should show only marker clusters

Also I didn't see any documentation on how can we close one marker info window programmatically, when I am opening another marker info window.

Steps to Reproduce

Below is my code:

import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
import { Map, Marker, InfoWindow, useMap, useMarkerRef } from '@vis.gl/react-google-maps';
import { MarkerClusterer } from '@googlemaps/markerclusterer';

export default function GoogleMaps({ markerData, defaultZoom = 4, defaultCenter = { lat: 17.3850, lng: 78.4867 }, mapHeight }) {

    const map = useMap();
    const assetClusterer = useRef(null);

    useEffect(() => {
        if (!map) return;
        if (markerData?.length) {
            const bounds = new window.google.maps.LatLngBounds();
            markerData.forEach(({ latitude, longitude }) => {
                bounds.extend({ lat: latitude, lng: longitude });
            });
            map.fitBounds(bounds);
            map.panToBounds(bounds);
        }
        if (!assetClusterer.current) {
            assetClusterer.current = new MarkerClusterer({ map });
        }
    }, [map]);

    const AssetMarkers = () => {
        const [assetMarkers, setAssetMarkers] = useState({});

        useEffect(() => {
            assetClusterer.current?.clearMarkers();
            assetClusterer.current?.addMarkers(Object.values(assetMarkers));
        }, [assetMarkers]);

        const setMarkerRef = (marker, key) => {
            if (marker && assetMarkers[key]) return;
            if (!marker && !assetMarkers[key]) return;

            setAssetMarkers(prev => {
                if (marker) {
                    return { ...prev, [key]: marker };
                } else {
                    const newMarkers = { ...prev };
                    delete newMarkers[key];
                    return newMarkers;
                }
            });
        };

        const AssetMarker = ({ point, setMarkerRef }) => {
            const [infoWindowShown, setInfoWindowShown] = useState(false);
            let [markerRef, marker] = useMarkerRef();

            const refCallback = useCallback((marker1) => {
                if (!marker1) return;
                markerRef(marker1);
                setMarkerRef(marker1, point.deviceSN);
            }, [setMarkerRef, point.deviceSN]);

            const handleAssetMarkerClick = useCallback(() => {
                setInfoWindowShown(true);
            }, []);

            const handleInfoWindowClose = useCallback(() => setInfoWindowShown(false), []);
            return (
                <>
                    <Marker
                        position={{ lat: point.latitude, lng: point.longitude }}
                        ref={refCallback}
                        onClick={handleAssetMarkerClick} />
                    {
                        infoWindowShown && <InfoWindow anchor={marker} onClose={handleInfoWindowClose}>
                            <h2>InfoWindow content!</h2>
                            <p>Some arbitrary html to be rendered into the InfoWindow.</p>
                        </InfoWindow>
                    }
                </>
            )
        }

        return (
            <>
                {
                    markerData.map((objMarker) => (
                        <AssetMarker key={objMarker.deviceSN} point={objMarker} setMarkerRef={setMarkerRef} />
                    ))
                }
            </>
        )
    }

    return (
        <Map style={{ width: '100%', height: mapHeight }} defaultZoom={defaultZoom} defaultCenter={defaultCenter} streetViewControl={false} gestureHandling="greedy">
            <AssetMarkers />
        </Map>
    )
}

Environment

• Library version: 1.0.2
• Google maps version: weekly
• Browser and Version: Chrome
• OS: Window 10

Logs

No response

[m-nathani]

I am also facing the same issue... performance is worse... even few markers for me going shit slow...

there a discussion thread here: #406

havent tried... however can check if it works.

[usefulthink]

I think this could also be caused by react excessively re-rendering the markers, which seems to be a big problem in all code based on the markerclusterer example. Will probably have to refactor that to better reflect good react practices.

Regarding your actual problem, I haven't touched the marker-class in a while, so there might still be some issues present that were resolved for the advanced markers. Can you try switching to AdvancedMarker instead and see if that issue exists there? Or maybe, can you provide an example that I can directly look at myself (codesandbox or similar, if you use the codesandbox links in our examples, we already have the API key set up for you)?