How to make clusterization map + infoWindows for markers ?

[DomnitskiyOleg]

Target Use Case

How to make clusterization map + infoWindows for markers ?

Proposal

---

[anthfgreco]

I tried implementing this as well but to no avail. The map freezes for a few seconds before the info window pops up. If anybody has a working example it'd be greatly appreciated.

I tried working with this example that doesn't have info windows: Code SandBox Marker Clustering

[mfmanca2000]

I have a solution for adding both clustering and infowindows but it's quite awful and I still have a bug: when clicking on an Advanced Marker, two InfoWindows open up. One it's the correct one, another is an empty one that never goes away, it's just hidden when you click its closing button.

Online some others had the same issue with other libraries as well. Their solutions didn't work for me: some removed the React.StrictMode wrapper in index.js and some others switched to using InfoWindowF instead of InfoWindow.

Anyway my solution was to have a state with an array that will contain the id of the markers that should have a visible infowindow.
It's based on the clustering example (https://codesandbox.io/s/github/visgl/react-google-maps/tree/main/examples/marker-clustering) plus basically...

1. the array in the state
2. the onClick on the marker that will add or remove a key in this array
3. the InfoWindow that will be drawn only if the array contains the key
4. The anchor of the InfoWindow that should get the marker from the markers array (i.e. "markers" in the clustering example)
5. the onCloseClick handler on the infowindow to remove the key from the array

const [openFlagsArray, setOpenFlagsArray] = useState([]);
...
return (
        <>
            {locations.map((loc) => (
                <div key={'div_' + loc.$id}>

                    <AdvancedMarker
                        position={{ lat: loc.latitude, lng: loc.longitude }}
                        key={loc.$id}
                        title={loc.name}
                        ref={(marker) => setMarkerRef(marker, 'm_' + loc.$id)}
                        onClick={() => {                                                                            
                            let i = openFlagsArray ? openFlagsArray.indexOf(loc.$id) : -1;
                            if (i != -1) {
                                setOpenFlagsArray((prev) => {                                    
                                    return prev.filter(flag => {
                                        return flag != loc.$id
                                    })                                                                        
                                })
                            } else {
                                setOpenFlagsArray((prev) => {                                    
                                    return [...prev, loc.$id];                                                                        
                                })
                            }                            
                        }
                        }
                    >
                       <span className="tree">🌳</span>
                    </AdvancedMarker>                    

                    {openFlagsArray.indexOf(loc.$id) != -1 && (
                        <InfoWindow key={'iw_'+loc.$id}
                            anchor={markers['m_' + loc.$id]}
                            maxWidth={300} minWidth={300}                            
                            onCloseClick={() => setOpenFlagsArray((prev) => {
                                return prev.filter(flag => {
                                    return flag != loc.$id
                                })
                            })}
                        >
                               {/* Here the content of the infowindow.... */}                    
                        </InfoWindow>
                    )}
                </div>
            ))}
        </>

If anyone can help me with the removal of the second InfoWindow, it would be much appreciated.
I've seen there's already an Issue open but I don't understand if the correction has been included in the 0.5.0 version
#109

[mfmanca2000]

I can confirm that the correction contained in the Issue #109 has not been included in the 0.5.0 version but I included it in my code and indeed it works.

[spaiz]

Just experienced the same issue, and I have @vis.gl/react-google-maps": "^0.5.4" installed :/
Implemented infoWidnow based on the clustering example, and it creates additional "popups".

[kamaladenalhomsi]

+1

[JorgeSivil]

I used the Advanced Markers and NO info window and it just worked. Thank you @anthfgreco for the link.

Why are you using an info window when advanced markers can already display HTML?

import React, { useEffect, useRef, useState } from 'react';
import { MarkerClusterer } from '@googlemaps/markerclusterer';
import { AdvancedMarker, useMap } from '@vis.gl/react-google-maps';
import Marker = google.maps.Marker;

type Item = {
    id: string;
    position: {
        lat: number;
        lng: number;
    };
    data: any;
    title?: string;
};

type MapMarkerClustererProps = {
    markerComponent: React.FC<{ isActive: boolean; data: any }>;
    items: Item[];
};

const MapMarkerClusterer = ({
    items,
    markerComponent: MarkerComponent,
}: MapMarkerClustererProps) => {
    const clusterer = useRef<MarkerClusterer | null>(null);
    const [markers, setMarkers] = useState<{ [key: string]: Marker }>({});
    const map = useMap();
    const [openMarkerId, setOpenMarkerId] = React.useState<string | null>(null);

    // Initialize MarkerClusterer
    useEffect(() => {
        if (!map) return;
        if (!clusterer.current) {
            clusterer.current = new MarkerClusterer({ map });
        }
    }, [map]);

    // Update markers
    useEffect(() => {
        clusterer.current?.clearMarkers();
        clusterer.current?.addMarkers(Object.values(markers));
    }, [markers]);

    const setMarkerRef = (marker: Marker | null, key: string) => {
        if (marker && markers[key]) return;
        if (!marker && !markers[key]) return;

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

    return (
        <>
            {items.map((item) => {
                const isActive = openMarkerId === item.id;

                return (
                    <AdvancedMarker
                        key={item.id}
                        position={item.position}
                        ref={(marker) => setMarkerRef(marker, item.id)}
                        title={item.title || ''}
                        gmpClickable
                        onClick={() => {
                            setOpenMarkerId((currentSelectedId) => {
                                if (currentSelectedId === item.id) {
                                    return null;
                                } else {
                                    return item.id;
                                }
                            });
                        }}
                        zIndex={isActive ? 1 : 0}
                    >
                        <MarkerComponent isActive={isActive} data={item.data} />
                    </AdvancedMarker>
                );
            })}
        </>
    );
};

export default MapMarkerClusterer;

import MapMarkerIcon from '@modules/app/components/GoogleMaps/MapMarkerIcon';
import NeighborhoodMapInfoWindow from '@modules/app/components/SearchResults/Neighborhood/NeighborhoodMapInfoWindow';
import React from 'react';
import NeighborhoodSchema from '@modules/libs/Algolia/neighborhood.schema';
import { BaseHit } from 'instantsearch.js';

type NeighborhoodMapMarkerProps = {
    isActive: boolean;
    data: BaseHit & NeighborhoodSchema;
}
const NeighborhoodMapMarker = ({isActive, data}: NeighborhoodMapMarkerProps) => {
    return (
        <>
            <MapMarkerIcon isActive={isActive} />
            <NeighborhoodMapInfoWindow
                itemData={data}
                isActive={isActive}
            />
        </>
    );
}

export default NeighborhoodMapMarker;

In NeighborhoodMapInfoWindow I control the visibility of the info window, the effects, etc.

const NeighborhoodMapInfoWindow = ({
    isActive,
    itemData,
}: NeighborhoodMapInfoWindowProps) => {
    return (
        <Flex
            width='520px'
            height={isActive ? '200px' : 0}
            gap='6px'
            backgroundColor='white'
            fontFamily={'"Gotham", arial, serif'}
            borderRightRadius='10px'
            boxShadow='0px 4px 4px 0px #00000040'
            position='absolute'
            top='55px'
            left='20px'
            display='flex'
            visibility={isActive ? 'visible' : 'hidden'}
            transition='height 0.2s ease-in-out'
            overflow='hidden'
            onClick={(event) => {
                alert('hola');
                event.stopPropagation();
            }}
        >
            <Flex
                flexDirection='column'
                justifyContent='center'
                alignItems='center'
                position='relative'
                width='160px'
                border='solid 1px #D9D9D9'
            >
      ...

[AdamZajlerDDH]

I have same issue as #218 (comment) . Has anyone solved clusters + advanced markers + customized infowindow? 🤔

[PauloAlves311]

What a simple and elegant solution.

[JorgeSivil]

I came back to say that you MUST use InfoWindow component if you want to catch click events. Otherwise click events DO NOT WORK in Mobile, it only works for the marker itself not for content in the InfoWindow like a link.
Refactor was easy tho, just wrap your component in a InfoWindow component from library

[PauloAlves311]

I tried to add an onClick={() => setOpenMarkerId(null)} and you're right it doesn't seem to work. But for god knows why, if I do just this: onClick={() => console.log('closed')}

It does close the window LOL

full code for reference:

return (
    <>
      {points.map((point) => (
        <AdvancedMarker
          position={point}
          key={point.key}
          ref={(marker) => setMarkerRef(marker, point.key)}
          onClick={() => {
            setOpenMarkerId((currentSelectedId) => {
              if (currentSelectedId === point.key) {
                return null;
              } else {
                return point.key;
              }
            });
          }}
        >
          <div className={`${styles.pricetag} -z-10`}>{point.preco}</div>

          {openMarkerId === point.key && (
            <div className="absolute bottom-10 z-50 bg-white p-1">
              HI THERE
              <button
                className="bg-black p-1 text-white"
                onClick={() => console.log('closed')}
              >
                CLOSE
              </button>
              <Link className="bg-black p-1 text-white" href="house/25517">
                go to house
              </Link>
            </div>
          )}
        </AdvancedMarker>
      ))}
    </>
  );

[usefulthink]

Since this has been the number one topic here since release, I have now updated our marker-clustering example to include dynamically changing data and an infowindow (sources are here).