Fix issue with visible prop

fullstackreact · Jul 15, 2020 · 4c482bc · 4c482bc
1 parent 3bf1454
commit 4c482bc
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/src/components/CustomOverlay.js b/src/components/CustomOverlay.js
@@ -13,6 +13,14 @@ function createPopupClass() {
 
   Popup.prototype = Object.create(google.maps.OverlayView.prototype);
 
+  Popup.prototype.show = function () {
+    this.containerDiv.style.visibility = 'visible';
+  };
+
+  Popup.prototype.hide = function () {
+    this.containerDiv.style.visibility = 'hidden';
+  };
+
   Popup.prototype.onAdd = function () {
     this.getPanes().floatPane.appendChild(this.containerDiv);
   };
@@ -52,18 +60,28 @@ const CustomPopup = ({
   passThroughMouseEvents
 }) => {
   const containerEl = useRef(null);
+  const popoverRef = useRef(null);
+
   useEffect(() => {
     if (map) {
       const pos = new google.maps.LatLng(position.lat, position.lng);
       const Popup = createPopupClass();
-      new Popup({
+      popoverRef.current = new Popup({
         position: pos,
         content: containerEl.current,
         map,
         passThroughMouseEvents
       });
     }
   }, [map]);
+
+  useEffect(() => {
+    const popover = popoverRef.current;
+    if (popover) {
+      visible ? popover.show() : popover.hide();
+    }
+  }, [visible]);
+
   return (
     <div
       className={className}