improve styles of custom overlay

Author: ajkovar

examples/components/withCustomOverlay.js

@@ -19,10 +19,9 @@ const WithCustomOverlay = (props) => {
         <CustomOverlay
           position={{ lat: 37.782551, lng: -122.425368 }}
           visible={showOverlay}
+          className={styles.overlayContainer}
         >
-          <div className={styles.overlayContainer}>
-            Hi there. I'm a custom overlay.
-          </div>
+          <div>Hi there. I'm a custom overlay.</div>
         </CustomOverlay>
       </Map>
     </Fragment>

examples/components/withCustomOverlay.module.css

@@ -2,6 +2,7 @@
   background-color: white;
   padding: 20px;
   border-radius: 10px;
+  transform: translate(-50%, -100%);
 }
 
 .button {

src/components/CustomOverlay.js

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