Fix scrolling behavior in examples

Author: ajkovar

examples/components/withCustomOverlay.js

@@ -0,0 +1,32 @@
+import React, { useState, Fragment } from 'react';
+import Map from '../../src/index';
+import CustomOverlay from '../../src/components/CustomOverlay';
+import styles from './withCustomOverlay.module.css';
+
+const WithCustomOverlay = (props) => {
+  const [showOverlay, setShowOverlay] = useState(true);
+  if (!props.loaded) return <div>Loading...</div>;
+
+  return (
+    <Fragment>
+      <button
+        className={styles.button}
+        onClick={() => setShowOverlay(!showOverlay)}
+      >
+        Toggle Popup
+      </button>
+      <Map google={props.google} className="map" zoom={14}>
+        <CustomOverlay
+          position={{ lat: 37.782551, lng: -122.425368 }}
+          visible={showOverlay}
+        >
+          <div className={styles.overlayContainer}>
+            Hi there. I'm a custom overlay.
+          </div>
+        </CustomOverlay>
+      </Map>
+    </Fragment>
+  );
+};
+
+export default WithCustomOverlay;

examples/components/withCustomPopup.module.css renamed to examples/components/withCustomOverlay.module.css

@@ -1,4 +1,4 @@
-.customPopup {
+.overlayContainer {
   background-color: white;
   padding: 20px;
   border-radius: 10px;

examples/components/withCustomPopup.js

@@ -21,7 +21,7 @@ import Polygon from './components/withPolygons';
 import Polyline from './components/withPolylines';
 import Rectangle from './components/withRectangle';
 import CustomEvents from './components/resizeEvent';
-import CustomPopup from './components/withCustomPopup';
+import CustomOverlay from './components/withCustomOverlay';
 
 const routes = [
   {
@@ -76,8 +76,8 @@ const routes = [
   },
   {
     path: '/onCustomPopup',
-    name: 'Custom popup',
-    component: CustomPopup
+    name: 'Custom overlay',
+    component: CustomOverlay
   }
 ];
 

examples/index.js

@@ -64,5 +64,12 @@ html, body {
     order: 2;
     position: relative;
     min-height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .mapContainer {
+      flex: 1;
+      position: relative; 
+    }
   }
 }