Google Maps React Wrapper - Marker Cluster create @googlemaps/react-wrapper

Question

I am using the Google ReactJS library to add Maps to my React web app and the @googlemaps/react-wrapper library to cluster markers. But I am not able to make marker clustering on the wrapper. Please, if anyone has any idea, help to solve the problem. The component code is present below:

import React, { useEffect, useRef } from "react";
import { Wrapper, Status } from "@googlemaps/react-wrapper";

export default function MapContainer({ center, zoomLevel, markerList, icon }) {

    const googleMapRef = useRef(null);
    let googleMap = null;

    useEffect(() => {
        try {
            let bounds = new window.google.maps.LatLngBounds();

            const initGoogleMap = () => {
                return new window.google.maps.Map(googleMapRef.current, {
                    center: center,
                    zoom: zoomLevel,
                    styles: [{ stylers: [{ saturation: -100 }] }]
                });
            }

            const createMarker = (markerObj) => new window.google.maps.Marker({
                position: { lat: parseFloat(markerObj.lat), lng: parseFloat(markerObj.lng) },
                map: googleMap,
                icon: {
                    url: icon,
                    scaledSize: new window.google.maps.Size(80, 80)
                },
            });

            googleMap = initGoogleMap();

            markerList.map(x => {
                const marker = createMarker(x);
                bounds.extend(marker.position);
            });

            if (markerList.length === 0) {
                initGoogleMap();
                bounds = new window.google.maps.LatLngBounds();
            }
            googleMap.fitBounds(bounds);
        }
        catch (e) {
            console.log("maps", e)
        }
    })

    const render = (status) => {
        if (status === Status.LOADING) return "Loading...";
        if (status === Status.FAILURE) return "Error";
        return null;
    };

    return (
        <div>
            <div>
                <Wrapper apiKey={TOKEN} render={render}>
                    {/* <GISTrackingMap zoomLevel={props.zoomLevel} mapFilterByVal={props.mapFilterByVal} center={props.center} gisTrackingData={props.gisTrackingData} /> */}
                    <div ref={googleMapRef} style={{ width: "100%", height: "78vh" }} />
                </Wrapper>
            </div>
        </div>
    )
}

Have a look [here](https://stackoverflow.com/questions/64766101/google-map-react-marker-clustering-issue) for a possible solution from a similar problem, and [here](https://developers.google.com/maps/documentation/javascript/marker-clustering) for the official docs — Ricardo Sanchez, Oct 10 '22 at 05:57
The solution seems simple, looks like all you need to do is to feed a reference to the map (`googleMapRef`) and an array of markers (`markerList`) to a `MarkerClusterer` object — Ricardo Sanchez, Oct 10 '22 at 06:00
It's better to change the token if you haven't done that. Everybody could see it in the edits history @iliyas-ahmed-farooqui — Alexey Zalyotov, Nov 16 '22 at 20:38

Alexey Zalyotov · Answer 1 · 2022-11-16T18:29:08.883

To create a clusterer you have to have an array of markers. So I would suggest moving bounds.extend(marker.position); out of the markerList mapping and save the result:

const markers = markerList.map(x => {
  createMarker(x);
});

And then just create a clusterer:

new MarkerClusterer({ googleMapRef, markers });

UPD Looks like the MarkerClusterer doesn't work with ref, so the code above should be changed as follows:

new MarkerClusterer({ googleMap, markers });

Don't forget to install the library and add the import:

yarn add @googlemaps/markerclusterer

import { MarkerClusterer } from '@googlemaps/markerclusterer';

Google Maps React Wrapper - Marker Cluster create @googlemaps/react-wrapper

1 Answers1

Linked