fix: infowindow double rendering and eslint warnings (#185)

* infowindow: fix double rendering issue  (#109, #175)
* hooks: resolve eslint warnings considering missing dependencies

src/components/advanced-marker.tsx

@@ -91,8 +91,19 @@ function useAdvancedMarker(props: AdvancedMarkerProps) {
       setMarker(null);
       setContentContainer(null);
     };
+    // We do not want to re-render the whole marker when the className changes
+    // because that causes a short flickering of the marker.
+    // The className update is handled in the useEffect below.
+    // Excluding the className from the dependency array onm purpose here
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [map, markerLibrary, numChilds]);
 
+  // update className of advanced marker element
+  useEffect(() => {
+    if (!contentContainer) return;
+    contentContainer.className = className ?? '';
+  }, [contentContainer, className]);
+
   // bind all marker events
   useEffect(() => {
     if (!marker) return;

src/components/info-window.tsx

@@ -1,5 +1,11 @@
 /* eslint-disable complexity */
-import React, {PropsWithChildren, useContext, useEffect, useState} from 'react';
+import React, {
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
 import {createPortal} from 'react-dom';
 
 import {GoogleMapsContext} from './map';
@@ -19,38 +25,76 @@ export const InfoWindow = (props: PropsWithChildren<InfoWindowProps>) => {
   const {children, anchor, onCloseClick, ...infoWindowOptions} = props;
   const map = useContext(GoogleMapsContext)?.map;
 
+  const infoWindowRef = useRef<google.maps.InfoWindow | null>(null);
   const [contentContainer, setContentContainer] =
     useState<HTMLDivElement | null>(null);
 
   // create infowindow once map is available
   useEffect(() => {
     if (!map) return;
 
-    const infoWindow = new google.maps.InfoWindow(infoWindowOptions);
+    const newInfowindow = new google.maps.InfoWindow(infoWindowOptions);
 
     // Add content to info window
     const el = document.createElement('div');
-    infoWindow.setContent(el);
-    infoWindow.open({map, anchor});
-
-    if (onCloseClick) {
-      google.maps.event.addListener(infoWindow, 'closeclick', () => {
-        onCloseClick();
-      });
-    }
+    newInfowindow.setContent(el);
 
+    infoWindowRef.current = newInfowindow;
     setContentContainer(el);
 
     // Cleanup info window and event listeners on unmount
     return () => {
-      google.maps.event.clearInstanceListeners(infoWindow);
+      google.maps.event.clearInstanceListeners(newInfowindow);
 
-      infoWindow.close();
+      newInfowindow.close();
       el.remove();
 
       setContentContainer(null);
     };
-  }, [map, children, anchor]);
+    // We don't want to re-render a whole new infowindow
+    // when the options change to prevent flickering.
+    // Update of infoWindow options is handled in the useEffect below.
+    // Excluding infoWindowOptions from dependency array on purpose here.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [map, children]);
+
+  // Update infoWindowOptions
+  useEffect(() => {
+    infoWindowRef.current?.setOptions(infoWindowOptions);
+  }, [infoWindowOptions]);
+
+  // Handle the close click callback
+  useEffect(() => {
+    if (!infoWindowRef.current) return;
+
+    let listener: google.maps.MapsEventListener | null = null;
+
+    if (onCloseClick) {
+      listener = google.maps.event.addListener(
+        infoWindowRef.current,
+        'closeclick',
+        onCloseClick
+      );
+    }
+
+    return () => {
+      if (listener) listener.remove();
+    };
+  }, [onCloseClick]);
+
+  // Open info window after content container is set
+  useEffect(() => {
+    // anchor === null means an anchor is defined but not ready yet.
+    if (!contentContainer || !infoWindowRef.current || anchor === null) return;
+
+    const openOptions: google.maps.InfoWindowOpenOptions = {map};
+
+    if (anchor) {
+      openOptions.anchor = anchor;
+    }
+
+    infoWindowRef.current.open(openOptions);
+  }, [contentContainer, infoWindowRef, anchor, map]);
 
   return (
     <>{contentContainer !== null && createPortal(children, contentContainer)}</>

src/components/map-control.tsx

@@ -61,7 +61,7 @@ export const MapControl = ({children, position}: MapControlProps) => {
       const index = controls.getArray().indexOf(controlContainer);
       controls.removeAt(index);
     };
-  }, [map, position]);
+  }, [controlContainer, map, position]);
 
   return createPortal(children, controlContainer);
 };

src/components/marker.tsx

@@ -58,6 +58,10 @@ function useMarker(props: MarkerProps) {
       newMarker.setMap(null);
       setMarker(null);
     };
+    // We do not want to re-render the whole marker when the options change.
+    // Marker options update is handled in a useEffect below.
+    // Excluding markerOptions from dependency array on purpose here.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [map]);
 
   // attach and re-attach event-handlers when any of the properties change

src/components/pin.tsx

@@ -59,7 +59,7 @@ export const Pin = (props: PropsWithChildren<PinProps>) => {
 
     // Set content of Advanced Marker View to the Pin View element
     advancedMarker.content = pinElement.element;
-  }, [advancedMarker, props]);
+  }, [advancedMarker, glyphContainer, props]);
 
   return createPortal(props.children, glyphContainer);
 };

src/hooks/use-maps-library.ts

@@ -34,7 +34,7 @@ export function useMapsLibrary(name: string) {
     // The returned promise is ignored, since importLibrary will update loadedLibraries
     // list in the context, triggering a re-render.
     void ctx.importLibrary(name);
-  }, [apiIsLoaded, ctx?.importLibrary]);
+  }, [apiIsLoaded, ctx, name]);
 
   return ctx?.loadedLibraries[name] || null;
 }