Using cluster with AdvancedMarker + InfoWindow

[AdamZajlerDDH]

Hi!
I'm trying to implement map with cluster + many AdvancedMarkers + for each marker there would be InfoWindow. But i have two issues:

1. Passing ref from AdvancedMarker to InfoWindow => I don't know if I'm doing it right
2. I'm also expiring same issue as in this thread with showing two InfoWindows after clicking to another Marker 🤔 Strange behavior of the information window JustFly1984/react-google-maps-api#3350 (comment)

Can anyone please help me? Below is example code

Map

import AdvancedMarkerElement = google.maps.marker.AdvancedMarkerElement;
import { Map, useMap } from '@vis.gl/react-google-maps';
import { MarkerClusterer } from '@googlemaps/markerclusterer';

const map = useMap();

const [selectedInstitution, setSelectedInstitution] = useState<number | null>(null);
const [markers, setMarkers] = useState<{ [key: string]: AdvancedMarkerElement }>({});
const clusterer = useRef<MarkerClusterer | null>(null);

const polandBounds = {
    east: 26.5,
    west: 11.5,
    north: 56.5,
    south: 47,
  };

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

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

const setMarkerRef = (marker: AdvancedMarkerElement | null, key: string): void => {
  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;
    }
  });
};

<Map
  mapId={XXX}
  style={{
    width: '100%',
    height: heightParsed,
  }}
  fullscreenControl={false}
  streetViewControl={false}
  mapTypeControl={false}
  clickableIcons={false}
  restriction={{
    latLngBounds: polandBounds,
    strictBounds: true,
  }}
  defaultBounds={polandBounds}
>
  {places.map((p) => (
    <GoogleMapsMarker
      key={p.id}
      setMarkerRef={(marker, key) => setMarkerRef(marker, key)}
      selectedInstitution={selectedInstitution}
      handleSetInstitution={(id) => setSelectedInstitution(id)}
    />
  ))}
</Map>

Marker

import React, { useRef } from 'react';
import { AdvancedMarker, InfoWindow } from '@vis.gl/react-google-maps';
import AdvancedMarkerElement = google.maps.marker.AdvancedMarkerElement;

interface Props {
  place: InstitutionSearch;
  selectedInstitution: number | null;
  setMarkerRef: (marker: AdvancedMarkerElement | null, id: string) => void;
}

export const GoogleMapsMarker = ({
  place,
  selectedInstitution,
  setMarkerRef,
}: Props): JSX.Element => {
  const ref = useRef<AdvancedMarkerElement | null>(null);

  return (
    <>
      <AdvancedMarker
        ref={(marker) => {
          ref.current = marker;
          setMarkerRef(marker, place.id.toString());
        }}
        onClick={() => {
          console.log("Click");
        }}
        position={{
          lat: place.geolocation.latitude,
          lng: place.geolocation.longitude,
        }}
      >
        ex.image
      </AdvancedMarker>

      {selectedInstitution === place.id && (
        <InfoWindow
          anchor={ref.current}
          onCloseClick={() => handleSetInstitution(null)}
          position={{
            lat: place.geolocation.latitude + 0.001,
            lng: place.geolocation.longitude,
          }}
          minWidth={270}
        >
         <div>POPUP DATA</div>
        </InfoWindow>
      )}
    </>
  );
};

only for place you need to create dummy interface/data :|

[usefulthink]

I have yet to figure out exactly what is happening, but I was able to reproduce it.

The problem seems to have something to do with unneeded re-rendering of the AdvancedMarker components due to the callbacks.

Try replacing

return (
  <>
    {places.map(p => (
      <GoogleMapsMarker
        key={p.id}
        place={p}
        setMarkerRef={(marker, key) => setMarkerRef(marker, key)}
      />
    ))}
  </>
);

with something like

const markers = useMemo(
  () =>
    places.map((p) => (
      <GoogleMapsMarker
        key={p.id}
        place={p}
        setMarkerRef={(marker, key) => setMarkerRef(marker, key)}
      />
    )),
  [places]
);

return <>{markers}</>

In my example that was already able to fix the problem. I'm still looking into what is going on under the hood, but I suspect we're triggering some sort of race-condition in the google maps API with the repeated updates of the markers.

The marker to infowindow-connection looks alright as it is.

[miguelvalmeida]

still facing the same issue after updating to the latest version

[AdamZajlerDDH]

Unfortunately, the error still occurs for the code I provided earlier:|
I have the impression that after closing the InfoWindow, a default one appears, because then even "onCloseClick" does not work on these small windows without content.

There is no cursor in the video, but I just click on each marker in turn

[AdamZajlerDDH]

And also about styling; it's awesome that you added it for the InfoWindow but I think that it should be reaching up to the <div role="dialog"; because (in my case) I still need to use wrapper around Map to style the .gm-style-iw.gm-style-iw-c 🥲

'.gm-style-iw.gm-style-iw-c': {
  padding: '0px',
  border: '1px solid',
  borderColor: theme.palette.secondary.main,
  borderBottomWidth: 6,
},
'.gm-style-iw-d::-webkit-scrollbar': {
  width: '0px',
  height: '0px',
},
'button.gm-ui-hover-effect': {
  top: '0px !important',
  right: '0px !important',
},
'.gm-style-iw-tc::after': {
  background: theme.palette.secondary.main,
}

[usefulthink]

The thing is, that isn't officially supported. The content element is the topmost dom-element we have access to.

As per https://visgl.github.io/react-google-maps/docs/api-reference/components/info-window, I'd recommend using the AdvancedMarker component instead of InfoWindow if you need more flexibility in styling (I'm reworking the AdvancedMarker implementation and docs right now).

[AdamZajler]

Ooow now I understand 😅

So you mean to just use AdvancedMarker and in it's content just do my own popup & open state handling, yes?

[usefulthink]

pretty much that, yes. When the design is more important than simplicity in the implementation, you can do everything with the advanced markers (see for example here: https://storage.googleapis.com/gmp-maps-demos/advanced-markers/index.html#weather-marker). You could either toggle the state (exapanded/collapsed) within the marker or create a separate marker as infowindow. The only thing you won't have with that is the "pan into view" feature, but even that isn't that complicated to implement.

[usefulthink]

Here's another cool demo for that: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#interactive_markers

[AdamZajler]

Thanks a lot for your help!

In free time after work i will try to provide an example of clusters with AdvancedMarkers for this repo!