initial code for custom popup

Author: ajkovar

examples/components/withCustomPopup.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Map from '../../src/index';
+import CustomPopup from '../../src/components/CustomPopup';
+
+const WithCustomPopup = (props) => {
+  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',
+          }}
+        >
+          Hi there. I'm a custom popup.
+        </div>
+      </CustomPopup>
+    </Map>
+  );
+};
+
+export default WithCustomPopup;

examples/index.js

@@ -21,6 +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';
 
 const routes = [
   {
@@ -72,6 +73,11 @@ const routes = [
     path: '/onResizeEvent',
     name: 'Custom events',
     component: CustomEvents
+  },
+  {
+    path: '/onCustomPopup',
+    name: 'Custom popup',
+    component: CustomPopup
   }
 ];
 

src/components/CustomPopup.js

@@ -0,0 +1,64 @@
+import React, { useRef, useEffect } from 'react';
+
+function createPopupClass() {
+  function Popup({ position, content, map }) {
+    this.position = position;
+    this.containerDiv = content;
+    this.setMap(map);
+    google.maps.OverlayView.preventMapHitsAndGesturesFrom(this.containerDiv);
+  }
+
+  Popup.prototype = Object.create(google.maps.OverlayView.prototype);
+
+  Popup.prototype.onAdd = function () {
+    this.getPanes().floatPane.appendChild(this.containerDiv);
+  };
+
+  Popup.prototype.onRemove = function () {
+    if (this.containerDiv.parentElement) {
+      this.containerDiv.parentElement.removeChild(this.containerDiv);
+    }
+  };
+
+  Popup.prototype.draw = function () {
+    var divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
+    var display =
+      Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000
+        ? 'block'
+        : 'none';
+
+    if (display === 'block') {
+      this.containerDiv.style.left = divPosition.x + 'px';
+      this.containerDiv.style.top = divPosition.y + 'px';
+    }
+    if (this.containerDiv.style.display !== display) {
+      this.containerDiv.style.display = display;
+    }
+  };
+
+  return Popup;
+}
+
+const CustomPopup = ({ map, position, children }) => {
+  const containerEl = useRef(null);
+  useEffect(() => {
+    const pos = new google.maps.LatLng(position.lat, position.lng);
+    const Popup = createPopupClass();
+    const popup = new Popup({
+      position: pos,
+      content: containerEl.current,
+      map,
+    });
+  });
+  return (
+    <div
+      style={{ position: 'absolute' }}
+      className="custom-popup"
+      ref={containerEl}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default CustomPopup;