Add custom overlay

Author: ajkovar

examples/components/withCustomPopup.js

@@ -1,29 +1,36 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Map from '../../src/index';
 import CustomPopup from '../../src/components/CustomPopup';
+import styles from './withCustomPopup.module.css';
 
 const WithCustomPopup = (props) => {
+  const [showPopup, setShowPopup] = useState(true);
   if (!props.loaded) return <div>Loading...</div>;
 
   return (
-    <Map
-      google={props.google}
-      className="map"
-      style={{ height: '100%', position: 'relative', width: '100%' }}
-      zoom={14}
-    >
-      <CustomPopup position={{ lat: 37.782551, lng: -122.445368 }}>
-        <div
-          style={{
-            backgroundColor: 'white',
-            padding: '20px',
-            borderRadius: '10px',
-          }}
+    <div>
+      <Map
+        google={props.google}
+        className="map"
+        style={{ height: '100%', position: 'relative', width: '100%' }}
+        zoom={14}
+      >
+        <CustomPopup
+          position={{ lat: 37.782551, lng: -122.425368 }}
+          visible={showPopup}
         >
-          Hi there. I'm a custom popup.
-        </div>
-      </CustomPopup>
-    </Map>
+          <div className={styles.customPopup}>
+            Hi there. I'm a custom popup.
+          </div>
+        </CustomPopup>
+        <button
+          className={styles.button}
+          onClick={() => setShowPopup(!showPopup)}
+        >
+          Toggle Popup
+        </button>
+      </Map>
+    </div>
   );
 };
 

examples/components/withCustomPopup.module.css

@@ -0,0 +1,12 @@
+.customPopup {
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+.button {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  z-index: 1;
+}

src/components/CustomPopup.js

@@ -1,4 +1,5 @@
 import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types'
 
 function createPopupClass() {
   function Popup({ position, content, map }) {
@@ -39,26 +40,35 @@ function createPopupClass() {
   return Popup;
 }
 
-const CustomPopup = ({ map, position, children }) => {
+const CustomPopup = ({ map, position, children, visible, google }) => {
   const containerEl = useRef(null);
   useEffect(() => {
+    if (map) {
     const pos = new google.maps.LatLng(position.lat, position.lng);
     const Popup = createPopupClass();
-    const popup = new Popup({
+      new Popup({
       position: pos,
       content: containerEl.current,
       map,
     });
-  });
+    }
+  }, [map]);
   return (
-    <div
-      style={{ position: 'absolute' }}
-      className="custom-popup"
-      ref={containerEl}
-    >
-      {children}
+    <div style={{ position: 'absolute' }} ref={containerEl}>
+      {visible && children}
     </div>
   );
 };
 
+CustomPopup.propTypes = {
+  children: PropTypes.element.isRequired,
+  map: PropTypes.object,
+  marker: PropTypes.object,
+  position: PropTypes.object,
+  visible: PropTypes.bool,
+}
+
+CustomPopup.defaultProps = {
+  visible: true
+}
 export default CustomPopup;