From 4c482bc035fea8d23ef5feab032e8f703fd3ba40 Mon Sep 17 00:00:00 2001
From: Alex Kovar <ajkovar@gmail.com>
Date: Wed, 15 Jul 2020 06:43:02 -0500
Subject: [PATCH] Fix issue with visible prop

---
 src/components/CustomOverlay.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/CustomOverlay.js b/src/components/CustomOverlay.js
index 2b885ed2..735a3927 100644
--- 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,11 +60,13 @@ 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,
@@ -64,6 +74,14 @@ const CustomPopup = ({
       });
     }
   }, [map]);
+
+  useEffect(() => {
+    const popover = popoverRef.current;
+    if (popover) {
+      visible ? popover.show() : popover.hide();
+    }
+  }, [visible]);
+
   return (
     <div
       className={className}