React Google Maps Markers deletion

Question

Google Maps Marker

Hi im generating Marker from an array and deleting them when i click them but thats not happening, the array change the oage is not affected.

Here is the code to initialize the array and the function to delete the marker

    const [calls, setCalls] = useState([
            { lat: -31.56391, lng: 147.154312 },
            { lat: -33.718234, lng: 150.363181 },
            { lat: -33.727111, lng: 150.371124 },
            { lat: -33.848588, lng: 151.209834 },
            { lat: -33.851702, lng: 151.216968 },
            { lat: -34.671264, lng: 150.863657 },
            { lat: -35.304724, lng: 148.662905 },
            { lat: -36.817685, lng: 175.699196 },
            { lat: -36.828611, lng: 175.790222 },
            { lat: -37.75, lng: 145.116667 },
            { lat: -37.759859, lng: 145.128708 },
            { lat: -37.765015, lng: 145.133858 },
            { lat: -37.770104, lng: 145.143299 },
            { lat: -37.7737, lng: 145.145187 },
            { lat: -37.774785, lng: 145.137978 },
            { lat: -37.819616, lng: 144.968119 },
            { lat: -38.330766, lng: 144.695692 },
            { lat: -39.927193, lng: 175.053218 },
            { lat: -41.330162, lng: 174.865694 },
            { lat: -42.734358, lng: 147.439506 },
            { lat: -42.734358, lng: 147.501315 },
            { lat: -42.735258, lng: 147.438 },
            { lat: -43.999792, lng: 170.463352 }
        ]);
        const deleteMarkerPoint = (i, c) => {
            let newCalls = calls;
            newCalls.splice(i, 1);
            setCalls(newCalls);
            console.log(calls);
        };

Here is the jsx to generate the map and the markers in a cluster

                           <LoadScript
                                id='script-loader'
                                googleMapsApiKey='AIzaSyAPLLzHwARFL3Nbw21l2kv6-Uz0yyy95Kk'
                            >
                                <GoogleMap
                                    id='map'
                                    mapContainerClassName='Map--Map'
                                    mapContainerStyle={{ height: "35vw", width: "50vw" }}
                                    zoom={zoom}
                                    center={center}
                                >
                                    <MarkerClusterer
                                        options={{
                                            imagePath:
                                                "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
                                        }}
                                    >
                                        {clusterer =>
                                            calls.map((location, i) => (
                                                <Marker
                                                    key={i}
                                                    position={location}
                                                    clusterer={clusterer}
                                                />
                                            ))
                                        }
                                    </MarkerClusterer>
                                </GoogleMap>
                            </LoadScript>

Answer 1

Try it without using the clusterer object. I think it should still work without.

<MarkerClusterer
  options={{
      imagePath:
          "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
  }}
>
{calls.map((location, i) => (
    <Marker
        key={i}
        position={location}
    />
  ))
}
</MarkerClusterer>

If you have to use it you might have to call clusterer.clearMarkers() before returning the new ones.

You could also try spreading the array so it creates a new object when you update the state let newCalls = [...calls];