Added custom overlay

examples/Container.js

@@ -52,6 +52,7 @@ class Container extends Component {
  </h2>
  </div>
 
+ <div className={styles.mapContainer}>
  <Switch>
  {routes.map(route => (
  <Route
@@ -75,6 +76,7 @@ class Container extends Component {
  </div>
  </div>
  </div>
+ </div>
  );
  }
 }

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}
+ className={styles.overlayContainer}
+ passThroughMouseEvents={true}
+ >
+ <div>Hi there. I'm a custom overlay.</div>
+ </CustomOverlay>
+ </Map>
+ </Fragment>
+ );
+};
+
+export default WithCustomOverlay;

examples/components/withCustomOverlay.module.css

@@ -0,0 +1,13 @@
+.overlayContainer {
+ background-color: white;
+ padding: 20px;
+ border-radius: 10px;
+ transform: translate(-50%, -100%);
+}
+
+.button {
+ position: absolute;
+ bottom: 10px;
+ left: 10px;
+ z-index: 1;
+}

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 CustomOverlay from './components/withCustomOverlay';
 
 const routes = [
  {
@@ -72,6 +73,11 @@ const routes = [
  path: '/onResizeEvent',
  name: 'Custom events',
  component: CustomEvents
+ },
+ {
+ path: '/onCustomPopup',
+ name: 'Custom overlay',
+ component: CustomOverlay
  }
 ];
 

examples/styles.module.css

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

index.d.ts

@@ -106,3 +106,16 @@ export interface IInfoWindowProps extends Partial<google.maps.InfoWindowOptions>
 export class InfoWindow extends React.Component<IInfoWindowProps, any> {
 
 }
+
+
+export interface ICustomOverlayProps {
+ google?: typeof google
+ map?: google.maps.Map
+ position: google.maps.LatLng | google.maps.LatLngLiteral,
+ visible?: boolean,
+ passThroughMouseEvents?: boolean
+}
+
+export class CustomOverlay extends React.Component<ICustomOverlayProps, any> {
+
+}

src/components/CustomOverlay.js

@@ -0,0 +1,128 @@
+import React, { useRef, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+function createPopupClass() {
+ function Popup({ position, content, map, passThroughMouseEvents, onDraw }) {
+ this.position = position;
+ this.containerDiv = content;
+ this.onDraw = onDraw;
+ this.setMap(map);
+ if (!passThroughMouseEvents) {
+ google.maps.OverlayView.preventMapHitsAndGesturesFrom(this.containerDiv);
+ }
+ }
+
+ 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);
+ };
+
+ Popup.prototype.onRemove = function () {
+ if (this.containerDiv.parentElement) {
+ this.containerDiv.parentElement.removeChild(this.containerDiv);
+ }
+ };
+
+ Popup.prototype.draw = function () {
+ if (!this.position) {
+ return;
+ }
+ this.onDraw();
+ 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 asLatLng = (position) =>
+ !position || position instanceof google.maps.LatLng
+ ? position
+ : new google.maps.LatLng(position.lat, position.lng);
+
+export const CustomOverlay = ({
+ map,
+ position,
+ children,
+ visible,
+ className,
+ passThroughMouseEvents
+}) => {
+ const [hasDrawn, setHasDrawn] = useState(false);
+ const containerRef = useRef(null);
+ const popoverRef = useRef(null);
+
+ useEffect(() => {
+ if (map) {
+ const Popup = createPopupClass();
+ popoverRef.current = new Popup({
+ position: asLatLng(position),
+ content: containerRef.current,
+ map,
+ passThroughMouseEvents,
+ onDraw: () => setHasDrawn(true)
+ });
+ }
+ }, [map]);
+
+ useEffect(() => {
+ const popover = popoverRef.current;
+ if (popover) {
+ popover.position = asLatLng(position);
+ popover.draw();
+ }
+ }, [position]);
+
+ useEffect(() => {
+ const popover = popoverRef.current;
+ if (popover) {
+ visible ? popover.show() : popover.hide();
+ }
+ }, [visible]);
+
+ const display = hasDrawn ? 'block' : 'none';
+ return (
+ <div
+ className={className}
+ style={{ position: 'absolute', display }}
+ ref={containerRef}
+ >
+ {visible && children}
+ </div>
+ );
+};
+
+CustomOverlay.propTypes = {
+ className: PropTypes.string,
+ children: PropTypes.node.isRequired,
+ map: PropTypes.object,
+ position: PropTypes.object,
+ visible: PropTypes.bool,
+ passThroughMouseEvents: PropTypes.bool
+};
+
+CustomOverlay.defaultProps = {
+ visible: true
+};
+
+export default CustomOverlay;

src/index.js

@@ -50,6 +50,7 @@ export {Polygon} from './components/Polygon';
 export {Polyline} from './components/Polyline';
 export {Circle} from './components/Circle';
 export {Rectangle} from './components/Rectangle';
+export {CustomOverlay} from './components/CustomOverlay';
 
 export class Map extends React.Component {
  constructor(props) {