@react-google-maps/api - npm Package Compare versions

Comparing version 1.2.0-alpha.4 to 1.2.0-alpha.6

CHANGELOG.md

 # Changelog
 
+## 1.2.0-alpha5 Typescript refactoring
+
+** Full embrace of strongly typed functionality. Autocomplete in your typescript projects out of the box.
+** Added onLoad and onUnmount callback props for each component. 
+** added addon MarkerClusterer
+
 ## 1.1.1-alpha Additional component support
@@ -4,0 +10,0 @@

lib/components/addons/MarkerClusterer.d.ts

 /// <reference types="googlemaps" />
 import * as React from "react";
-import { PureComponent } from "react";
-import MarkerClusterer, { ClusterIconStyle, Cluster, MarkerClustererOptions, Calculator } from "marker-clusterer-plus";
-interface MarkerClustererState {
-    markerClusterer?: MarkerClusterer;
+import { Clusterer, ClusterIconStyle, Cluster, ClustererOptions, TCalculator } from "@react-google-maps/marker-clusterer";
+interface ClustererState {
+    markerClusterer: Clusterer | null;
 }
-interface MarkerClustererProps {
-    children: (markerClusterer: MarkerClusterer) => React.ReactNode;
-    initialOptions?: MarkerClustererOptions;
+interface ClustererProps {
+    children: (markerClusterer: Clusterer) => React.ReactNode;
+    options?: ClustererOptions;
     averageCenter?: boolean;
-    batchSizeIE: number;
-    calculator: Calculator;
+    batchSizeIE?: number;
+    calculator?: TCalculator;
     clusterClass: string;
@@ -27,16 +26,20 @@ enableRetinaIcons: boolean;
     onClick: (cluster: Cluster) => void;
-    onClusteringBegin: (markerClusterer: MarkerClusterer) => void;
-    onClusteringEnd: (markerClusterer: MarkerClusterer) => void;
+    onClusteringBegin: (markerClusterer: Clusterer) => void;
+    onClusteringEnd: (markerClusterer: Clusterer) => void;
     onMouseOver: (cluster: Cluster) => void;
     onMouseOut: (cluster: Cluster) => void;
+    onLoad?: (markerClusterer: Clusterer) => void;
+    onUnmount?: (markerClusterer: Clusterer) => void;
 }
-export declare class MarkerClustererComponent extends PureComponent<MarkerClustererProps, MarkerClustererState> {
-    static contextType: React.Context<google.maps.Map>;
+export declare class ClustererComponent extends React.PureComponent<ClustererProps, ClustererState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
-    state: MarkerClustererState;
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: MarkerClustererProps) => void;
-    componentWillUnmount: () => void;
-    render: () => {};
+    state: ClustererState;
+    setClustererCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ClustererProps): void;
+    componentWillUnmount(): void;
+    render(): {} | null | undefined;
 }
-export default MarkerClustererComponent;
+export default ClustererComponent;
+//# sourceMappingURL=MarkerClusterer.d.ts.map

lib/components/addons/MarkerClusterer.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -14,6 +15,7 @@ var extendStatics = function (d, b) {
 })();
-import { PureComponent } from "react";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
-import MarkerClusterer from "marker-clusterer-plus";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
+var marker_clusterer_1 = require("@react-google-maps/marker-clusterer");
 var eventMap = {
@@ -73,5 +75,5 @@ onClick: "click",
 };
-var MarkerClustererComponent = /** @class */ (function (_super) {
-    __extends(MarkerClustererComponent, _super);
-    function MarkerClustererComponent() {
+var ClustererComponent = (function (_super) {
+    __extends(ClustererComponent, _super);
+    function ClustererComponent() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
@@ -82,8 +84,5 @@ _this.registeredEvents = [];
         };
-        _this.componentDidMount = function () {
-            var markerClusterer = new MarkerClusterer(_this.context, [], _this.props.initialOptions);
-            _this.setState(function () { return ({
-                markerClusterer: markerClusterer
-            }); }, function () {
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        _this.setClustererCallback = function () {
+            if (_this.state.markerClusterer !== null) {
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                     updaterMap: updaterMap,
@@ -95,30 +94,49 @@ eventMap: eventMap,
                 });
-            });
+                if (_this.props.onLoad) {
+                    _this.props.onLoad(_this.state.markerClusterer);
+                }
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        return _this;
+    }
+    ClustererComponent.prototype.componentDidMount = function () {
+        if (this.context) {
+            var markerClusterer_1 = new marker_clusterer_1.Clusterer(this.context, [], this.props.options);
+            this.setState(function setClusterer() {
+                return {
+                    markerClusterer: markerClusterer_1
+                };
+            }, this.setClustererCallback);
+        }
+    };
+    ClustererComponent.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.markerClusterer) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.markerClusterer
+                nextProps: this.props,
+                instance: this.state.markerClusterer
             });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            _this.state.markerClusterer && _this.state.markerClusterer.setMap(null);
-        };
-        _this.render = function () {
-            return _this.state.markerClusterer
-                ? _this.props.children(_this.state.markerClusterer)
-                : null;
-        };
-        return _this;
-    }
-    MarkerClustererComponent.contextType = MapContext;
-    return MarkerClustererComponent;
-}(PureComponent));
-export { MarkerClustererComponent };
-export default MarkerClustererComponent;
-//# sourceMappingURL=MarkerClusterer.js.map
+        }
+    };
+    ClustererComponent.prototype.componentWillUnmount = function () {
+        if (this.state.markerClusterer !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.markerClusterer);
+            }
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.state.markerClusterer.overlayView.setMap(null);
+        }
+    };
+    ClustererComponent.prototype.render = function () {
+        return this.state.markerClusterer !== null
+            ? this.props.children(this.state.markerClusterer)
+            : null;
+    };
+    ClustererComponent.contextType = map_context_1.default;
+    return ClustererComponent;
+}(React.PureComponent));
+exports.ClustererComponent = ClustererComponent;
+exports.default = ClustererComponent;

lib/components/directions/DirectionsRenderer.d.ts

@@ -12,16 +12,16 @@ /// <reference types="googlemaps" />
     onDirectionsChanged?: () => void;
-    onLoad: (directionsRenderer: google.maps.DirectionsRenderer) => void;
+    onLoad?: (directionsRenderer: google.maps.DirectionsRenderer) => void;
+    onUnmount?: (directionsRenderer: google.maps.DirectionsRenderer) => void;
 }
 export declare class DirectionsRenderer extends React.PureComponent<DirectionsRendererProps, DirectionsRendererState> {
-    static contextType: React.Context<google.maps.Map>;
-    static defaultProps: {
-        onLoad: () => void;
-    };
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: DirectionsRendererState;
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: DirectionsRendererProps) => void;
-    componentWillUnmount: () => void;
-    render(): any;
+    setDirectionsRendererCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: DirectionsRendererProps): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
 }
 export default DirectionsRenderer;
+//# sourceMappingURL=DirectionsRenderer.d.ts.map

lib/components/directions/DirectionsRenderer.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -14,5 +15,6 @@ var extendStatics = function (d, b) {
 })();
-import * as React from "react";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {
@@ -38,3 +40,3 @@ onDirectionsChanged: "directions_changed"
 };
-var DirectionsRenderer = /** @class */ (function (_super) {
+var DirectionsRenderer = (function (_super) {
     __extends(DirectionsRenderer, _super);
@@ -47,49 +49,57 @@ function DirectionsRenderer() {
         };
-        _this.componentDidMount = function () {
-            var directionsRenderer = new google.maps.DirectionsRenderer(_this.props.options);
-            _this.setState(function () { return ({
-                directionsRenderer: directionsRenderer
-            }); }, function () {
-                if (_this.state.directionsRenderer !== null) {
-                    _this.state.directionsRenderer.setMap(_this.context);
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.directionsRenderer
-                    });
+        _this.setDirectionsRendererCallback = function () {
+            if (_this.state.directionsRenderer !== null) {
+                _this.state.directionsRenderer.setMap(_this.context);
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                    updaterMap: updaterMap,
+                    eventMap: eventMap,
+                    prevProps: {},
+                    nextProps: _this.props,
+                    instance: _this.state.directionsRenderer
+                });
+                if (_this.props.onLoad) {
                     _this.props.onLoad(_this.state.directionsRenderer);
                 }
-            });
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        return _this;
+    }
+    DirectionsRenderer.prototype.componentDidMount = function () {
+        var directionsRenderer = new google.maps.DirectionsRenderer(this.props.options);
+        this.setState(function setDirectionsRenderer() {
+            return {
+                directionsRenderer: directionsRenderer
+            };
+        }, this.setDirectionsRendererCallback);
+    };
+    DirectionsRenderer.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.directionsRenderer !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.directionsRenderer
+                nextProps: this.props,
+                instance: this.state.directionsRenderer
             });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            if (_this.state.directionsRenderer) {
-                _this.state.directionsRenderer.setMap(null);
+        }
+    };
+    DirectionsRenderer.prototype.componentWillUnmount = function () {
+        if (this.state.directionsRenderer !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.directionsRenderer);
             }
-        };
-        return _this;
-    }
+            helper_1.unregisterEvents(this.registeredEvents);
+            if (this.state.directionsRenderer) {
+                this.state.directionsRenderer.setMap(null);
+            }
+        }
+    };
     DirectionsRenderer.prototype.render = function () {
-        return null;
+        return React.createElement(React.Fragment, null);
     };
-    DirectionsRenderer.contextType = MapContext;
-    DirectionsRenderer.defaultProps = {
-        onLoad: function () { }
-    };
+    DirectionsRenderer.contextType = map_context_1.default;
     return DirectionsRenderer;
 }(React.PureComponent));
-export { DirectionsRenderer };
-export default DirectionsRenderer;
-//# sourceMappingURL=DirectionsRenderer.js.map
+exports.DirectionsRenderer = DirectionsRenderer;
+exports.default = DirectionsRenderer;

lib/components/directions/DirectionsService.d.ts

@@ -8,12 +8,15 @@ /// <reference types="googlemaps" />
     options: google.maps.DirectionsRequest;
-    callback: (// required for default functionality
-    result: google.maps.DirectionsResult, status: google.maps.DirectionsStatus) => void;
-    onLoad: (directionsService: google.maps.DirectionsService) => void;
+    callback: (result: google.maps.DirectionsResult, status: google.maps.DirectionsStatus) => void;
+    onLoad?: (directionsService: google.maps.DirectionsService) => void;
+    onUnmount?: (directionsService: google.maps.DirectionsService) => void;
 }
 export declare class DirectionsService extends React.PureComponent<DirectionsServiceProps, DirectionsServiceState> {
     state: DirectionsServiceState;
-    componentDidMount: () => void;
-    componentDidUpdate: () => void;
-    render(): any;
+    setDirectionsServiceCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
 }
 export default DirectionsService;
+//# sourceMappingURL=DirectionsService.d.ts.map

lib/components/directions/DirectionsService.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -14,5 +15,6 @@ var extendStatics = function (d, b) {
 })();
-import * as React from "react";
-import * as invariant from "invariant";
-var DirectionsService = /** @class */ (function (_super) {
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var invariant = require("invariant");
+var DirectionsService = (function (_super) {
     __extends(DirectionsService, _super);
@@ -24,16 +26,8 @@ function DirectionsService() {
         };
-        _this.componentDidMount = function () {
-            invariant(!!_this.props.options, "DirectionsService expected options object as parameter, but got %s", _this.props.options);
-            var directionsService = new google.maps.DirectionsService();
-            _this.setState(function () { return ({
-                directionsService: directionsService
-            }); }, function () {
-                if (_this.state.directionsService !== null) {
-                    _this.state.directionsService.route(_this.props.options, _this.props.callback);
-                }
-            });
-        };
-        _this.componentDidUpdate = function () {
+        _this.setDirectionsServiceCallback = function () {
             if (_this.state.directionsService !== null) {
                 _this.state.directionsService.route(_this.props.options, _this.props.callback);
+                if (_this.props.onLoad) {
+                    _this.props.onLoad(_this.state.directionsService);
+                }
             }
@@ -43,9 +37,30 @@ };
     }
+    DirectionsService.prototype.componentDidMount = function () {
+        invariant(!!this.props.options, "DirectionsService expected options object as parameter, but got %s", this.props.options);
+        var directionsService = new google.maps.DirectionsService();
+        function setDirectionsService() {
+            return {
+                directionsService: directionsService
+            };
+        }
+        this.setState(setDirectionsService, this.setDirectionsServiceCallback);
+    };
+    DirectionsService.prototype.componentDidUpdate = function () {
+        if (this.state.directionsService !== null) {
+            this.state.directionsService.route(this.props.options, this.props.callback);
+        }
+    };
+    DirectionsService.prototype.componentWillUnmount = function () {
+        if (this.state.directionsService !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.directionsService);
+            }
+        }
+    };
     DirectionsService.prototype.render = function () {
-        return null;
+        return React.createElement(React.Fragment, null);
     };
     return DirectionsService;
 }(React.PureComponent));
-export { DirectionsService };
-export default DirectionsService;
-//# sourceMappingURL=DirectionsService.js.map
+exports.DirectionsService = DirectionsService;
+exports.default = DirectionsService;

lib/components/dom/dom-helper.d.ts

 /// <reference types="googlemaps" />
-export declare const getOffsetOverride: (containerElement: HTMLElement, getPixelPositionOffset?: (offsetWidth: number, offsetHeight: number) => {
+export declare function getOffsetOverride(containerElement: HTMLElement, getPixelPositionOffset?: (offsetWidth: number, offsetHeight: number) => {
     x: number;
     y: number;
-}) => {};
-export declare const getLayoutStyles: (mapCanvasProjection: google.maps.MapCanvasProjection, offset: any, bounds?: google.maps.LatLngBounds, position?: google.maps.LatLng) => {
+}): {};
+export declare const getLayoutStyles: (mapCanvasProjection: google.maps.MapCanvasProjection, offset: any, bounds?: google.maps.LatLngBounds | undefined, position?: google.maps.LatLng | undefined) => {
     left: string;
     top: string;
 };
+//# sourceMappingURL=dom-helper.d.ts.map

lib/components/dom/dom-helper.js

@@ -1,7 +0,9 @@
-/* eslint-disable filenames/match-regex */
-export var getOffsetOverride = function (containerElement, getPixelPositionOffset) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function getOffsetOverride(containerElement, getPixelPositionOffset) {
     return typeof getPixelPositionOffset === "function"
         ? getPixelPositionOffset(containerElement.offsetWidth, containerElement.offsetHeight)
         : {};
-};
+}
+exports.getOffsetOverride = getOffsetOverride;
 var createLatLng = function (inst, Type) { return new Type(inst.lat, inst.lng); };
@@ -44,3 +46,3 @@ var createLatLngBounds = function (inst, Type) {
 };
-export var getLayoutStyles = function (mapCanvasProjection, offset, bounds, position) {
+exports.getLayoutStyles = function (mapCanvasProjection, offset, bounds, position) {
     return bounds !== undefined
@@ -50,2 +52,1 @@ ? getLayoutStylesByBounds(mapCanvasProjection, offset, ensureOfType(bounds, google.maps.LatLngBounds, createLatLngBounds))
 };
-//# sourceMappingURL=dom-helper.js.map

lib/components/dom/OverlayView.d.ts

@@ -15,2 +15,3 @@ /// <reference types="googlemaps" />
     onLoad?: (overlayView: google.maps.OverlayView) => void;
+    onUnmount?: (overlayView: google.maps.OverlayView) => void;
 }
@@ -23,16 +24,16 @@ export declare class OverlayView extends React.PureComponent<OverlayViewProps, OverlayViewState> {
     static OVERLAY_MOUSE_TARGET: string;
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: OverlayViewState;
     containerElement: HTMLElement | null;
-    componentDidMount: () => void;
-    componentWillUnmount: () => void;
-    render: () => any;
-    preventMapHitsAndGesturesFrom: (element: HTMLElement) => any;
-    preventMapHitsFrom: (element: HTMLElement) => any;
-    draw: () => void;
+    setOverlayViewCallback: () => void;
     onAdd: () => void;
     onPositionElement: () => void;
+    draw: () => void;
     onRemove: () => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
 }
 export default OverlayView;
+//# sourceMappingURL=OverlayView.d.ts.map

lib/components/dom/OverlayView.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,9 +26,9 @@ var extendStatics = function (d, b) {
 };
-import * as React from "react";
-// @ts-ignore
-import { createPortal } from "react-dom";
-import * as invariant from "invariant";
-import MapContext from "../../map-context";
-import { getOffsetOverride, getLayoutStyles } from "./dom-helper";
-var OverlayView = /** @class */ (function (_super) {
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var react_dom_1 = require("react-dom");
+var invariant = require("invariant");
+var map_context_1 = require("../../map-context");
+var dom_helper_1 = require("./dom-helper");
+var OverlayView = (function (_super) {
     __extends(OverlayView, _super);
@@ -41,33 +42,19 @@ function OverlayView() {
         _this.containerElement = null;
-        _this.componentDidMount = function () {
-            var overlayView = new google.maps.OverlayView();
-            // You must implement three methods: onAdd(), draw(), and onRemove().
-            overlayView.onAdd = _this.onAdd;
-            overlayView.draw = _this.draw;
-            overlayView.onRemove = _this.onRemove;
-            overlayView.setMap(_this.context);
-            // You must call setMap() with a valid Map object to trigger the call to
-            // the onAdd() method and setMap(null) in order to trigger the onRemove() method.
-            _this.setState(function () { return ({
-                overlayView: overlayView
-            }); }, function () {
-                if (_this.state.overlayView !== null && _this.props.onLoad) {
-                    _this.props.onLoad(_this.state.overlayView);
-                }
-            });
+        _this.setOverlayViewCallback = function () {
+            if (_this.state.overlayView !== null && _this.props.onLoad) {
+                _this.props.onLoad(_this.state.overlayView);
+            }
         };
-        _this.componentWillUnmount = function () {
-            _this.state.overlayView !== null && _this.state.overlayView.setMap(null);
+        _this.onAdd = function () {
+            _this.containerElement = document.createElement("div");
+            _this.containerElement.style.position = "absolute";
         };
-        _this.render = function () {
-            return _this.containerElement !== null ? (createPortal(React.Children.only(_this.props.children), _this.containerElement)) : (React.createElement(React.Fragment, null));
+        _this.onPositionElement = function () {
+            if (_this.state.overlayView !== null && _this.containerElement !== null) {
+                var mapCanvasProjection = _this.state.overlayView.getProjection();
+                var offset = __assign({ x: 0, y: 0 }, dom_helper_1.getOffsetOverride(_this.containerElement, _this.props.getPixelPositionOffset));
+                var layoutStyles = dom_helper_1.getLayoutStyles(mapCanvasProjection, offset, _this.props.bounds, _this.props.position);
+                Object.assign(_this.containerElement.style, layoutStyles);
+            }
         };
-        _this.preventMapHitsAndGesturesFrom = function (element) {
-            //@ts-ignore
-            return _this.state.overlayView.preventMapHitsAndGesturesFrom(element);
-        };
-        _this.preventMapHitsFrom = function (element) {
-            //@ts-ignore
-            return _this.state.overlayView.preventMapHitsFrom(element);
-        };
         _this.draw = function () {
@@ -79,3 +66,2 @@ invariant(!!_this.props.mapPaneName, "OverlayView requires props.mapPaneName but got %s", _this.props.mapPaneName);
             }
-            // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes
             var mapPanes = overlayView.getPanes();
@@ -89,14 +75,2 @@ if (!mapPanes) {
         };
-        _this.onAdd = function () {
-            _this.containerElement = document.createElement("div");
-            _this.containerElement.style.position = "absolute";
-        };
-        _this.onPositionElement = function () {
-            if (_this.state.overlayView !== null && _this.containerElement !== null) {
-                var mapCanvasProjection = _this.state.overlayView.getProjection();
-                var offset = __assign({ x: 0, y: 0 }, getOffsetOverride(_this.containerElement, _this.props.getPixelPositionOffset));
-                var layoutStyles = getLayoutStyles(mapCanvasProjection, offset, _this.props.bounds, _this.props.position);
-                Object.assign(_this.containerElement.style, layoutStyles);
-            }
-        };
         _this.onRemove = function () {
@@ -110,2 +84,26 @@ if (_this.containerElement !== null && _this.containerElement.parentNode) {
     }
+    OverlayView.prototype.componentDidMount = function () {
+        var overlayView = new google.maps.OverlayView();
+        overlayView.onAdd = this.onAdd;
+        overlayView.draw = this.draw;
+        overlayView.onRemove = this.onRemove;
+        overlayView.setMap(this.context);
+        function setOverlayView() {
+            return {
+                overlayView: overlayView
+            };
+        }
+        this.setState(setOverlayView, this.setOverlayViewCallback);
+    };
+    OverlayView.prototype.componentWillUnmount = function () {
+        if (this.state.overlayView !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.overlayView);
+            }
+            this.state.overlayView.setMap(null);
+        }
+    };
+    OverlayView.prototype.render = function () {
+        return this.containerElement !== null ? (react_dom_1.createPortal(React.Children.only(this.props.children), this.containerElement)) : (React.createElement(React.Fragment, null));
+    };
     OverlayView.FLOAT_PANE = "floatPane";
@@ -116,7 +114,6 @@ OverlayView.MAP_PANE = "mapPane";
     OverlayView.OVERLAY_MOUSE_TARGET = "overlayMouseTarget";
-    OverlayView.contextType = MapContext;
+    OverlayView.contextType = map_context_1.default;
     return OverlayView;
 }(React.PureComponent));
-export { OverlayView };
-export default OverlayView;
-//# sourceMappingURL=OverlayView.js.map
+exports.OverlayView = OverlayView;
+exports.default = OverlayView;

lib/components/drawing/Circle.d.ts

@@ -7,39 +7,35 @@ /// <reference types="googlemaps" />
 interface CircleProps {
-    options: google.maps.CircleOptions;
+    options?: google.maps.CircleOptions;
     center: google.maps.LatLng | google.maps.LatLngLiteral;
     radius: number;
-    draggable: boolean;
-    editable: boolean;
-    visible: boolean;
-    onDblClick: (e: MouseEvent) => void;
-    onDragEnd: (e: MouseEvent) => void;
-    onDragStart: (e: MouseEvent) => void;
-    onMouseDown: (e: MouseEvent) => void;
-    onMouseMove: (e: MouseEvent) => void;
-    onMouseOut: (e: MouseEvent) => void;
-    onMouseOver: (e: MouseEvent) => void;
-    onMouseUp: (e: MouseEvent) => void;
-    onRightClick: (e: MouseEvent) => void;
-    onCenterChanged: () => void;
-    onClick: (e: MouseEvent) => void;
-    onDrag: (e: MouseEvent) => void;
-    onRadiusChanged: () => void;
-    onLoad: (circle: google.maps.Circle) => void;
+    draggable?: boolean;
+    editable?: boolean;
+    visible?: boolean;
+    onDblClick?: (e: MouseEvent) => void;
+    onDragEnd?: (e: MouseEvent) => void;
+    onDragStart?: (e: MouseEvent) => void;
+    onMouseDown?: (e: MouseEvent) => void;
+    onMouseMove?: (e: MouseEvent) => void;
+    onMouseOut?: (e: MouseEvent) => void;
+    onMouseOver?: (e: MouseEvent) => void;
+    onMouseUp?: (e: MouseEvent) => void;
+    onRightClick?: (e: MouseEvent) => void;
+    onCenterChanged?: () => void;
+    onClick?: (e: MouseEvent) => void;
+    onDrag?: (e: MouseEvent) => void;
+    onRadiusChanged?: () => void;
+    onLoad?: (circle: google.maps.Circle) => void;
+    onUnmount?: (circle: google.maps.Circle) => void;
 }
 export declare class Circle extends React.PureComponent<CircleProps, CircleState> {
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: CircleState;
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: CircleProps) => void;
-    componentWillUnmount: () => void;
-    render: () => any;
-    getBounds: () => google.maps.LatLngBounds;
-    getCenter: () => google.maps.LatLng;
-    getDraggable: () => boolean;
-    getEditable: () => boolean;
-    getMap: () => google.maps.Map;
-    getRadius: () => number;
-    getVisible: () => boolean;
+    setCircleCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: CircleProps): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
 }
 export default Circle;
+//# sourceMappingURL=Circle.d.ts.map

lib/components/drawing/Circle.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,5 +26,6 @@ var extendStatics = function (d, b) {
 };
-import * as React from "react";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {
@@ -67,3 +69,3 @@ onCenterChanged: "center_changed",
 };
-var Circle = /** @class */ (function (_super) {
+var Circle = (function (_super) {
     __extends(Circle, _super);
@@ -76,50 +78,55 @@ function Circle() {
         };
-        _this.componentDidMount = function () {
-            var circle = new google.maps.Circle(__assign({}, _this.props.options, { map: _this.context }));
-            _this.setState(function () { return ({
-                circle: circle
-            }); }, function () {
-                if (_this.state.circle !== null) {
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.circle
-                    });
-                    if (_this.props.onLoad) {
-                        _this.props.onLoad(_this.state.circle);
-                    }
+        _this.setCircleCallback = function () {
+            if (_this.state.circle !== null) {
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                    updaterMap: updaterMap,
+                    eventMap: eventMap,
+                    prevProps: {},
+                    nextProps: _this.props,
+                    instance: _this.state.circle
+                });
+                if (_this.props.onLoad) {
+                    _this.props.onLoad(_this.state.circle);
                 }
-            });
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        return _this;
+    }
+    Circle.prototype.componentDidMount = function () {
+        var circle = new google.maps.Circle(__assign({}, (this.props.options || {}), { map: this.context }));
+        function setCircle() {
+            return {
+                circle: circle
+            };
+        }
+        this.setState(setCircle, this.setCircleCallback);
+    };
+    Circle.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.circle !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.circle
+                nextProps: this.props,
+                instance: this.state.circle
             });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            _this.state.circle && _this.state.circle.setMap(null);
-        };
-        _this.render = function () { return null; };
-        _this.getBounds = function () { return _this.state.circle.getBounds(); };
-        _this.getCenter = function () { return _this.state.circle.getCenter(); };
-        _this.getDraggable = function () { return _this.state.circle.getDraggable(); };
-        _this.getEditable = function () { return _this.state.circle.getEditable(); };
-        _this.getMap = function () { return _this.state.circle.getMap(); };
-        _this.getRadius = function () { return _this.state.circle.getRadius(); };
-        _this.getVisible = function () { return _this.state.circle.getVisible(); };
-        return _this;
-    }
-    Circle.contextType = MapContext;
+        }
+    };
+    Circle.prototype.componentWillUnmount = function () {
+        if (this.state.circle !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.circle);
+            }
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.state.circle && this.state.circle.setMap(null);
+        }
+    };
+    Circle.prototype.render = function () {
+        return React.createElement(React.Fragment, null);
+    };
+    Circle.contextType = map_context_1.default;
     return Circle;
 }(React.PureComponent));
-export { Circle };
-export default Circle;
-//# sourceMappingURL=Circle.js.map
+exports.Circle = Circle;
+exports.default = Circle;

lib/components/drawing/Data.d.ts

@@ -20,16 +20,16 @@ /// <reference types="googlemaps" />
     onSetProperty?: (e: google.maps.Data.SetPropertyEvent) => void;
-    onLoad: (data: google.maps.Data | null) => void;
+    onLoad?: (data: google.maps.Data) => void;
+    onUnmount?: (data: google.maps.Data) => void;
 }
 export declare class Data extends React.PureComponent<DataProps, DataState> {
-    static defaultProps: {
-        onLoad: () => void;
-    };
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: DataState;
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: DataProps) => void;
-    componentWillUnmount: () => void;
-    render(): JSX.Element;
+    setDataCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: DataProps): void;
+    componentWillUnmount(): void;
+    render(): null;
 }
 export default Data;
+//# sourceMappingURL=Data.d.ts.map

lib/components/drawing/Data.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,5 +26,6 @@ var extendStatics = function (d, b) {
 };
-import * as React from "react";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {
@@ -68,4 +70,3 @@ onAddFeature: "addfeature",
     },
-    controlposition: function (instance, controlPosition // TODO: ???
-    ) {
+    controlposition: function (instance, controlPosition) {
         instance.setControlPosition(controlPosition);
@@ -89,3 +90,3 @@ },
 };
-var Data = /** @class */ (function (_super) {
+var Data = (function (_super) {
     __extends(Data, _super);
@@ -98,37 +99,48 @@ function Data() {
         };
-        _this.componentDidMount = function () {
-            var data = new google.maps.Data(__assign({}, (_this.props.options || {}), { map: _this.context }));
-            _this.setState(function () {
-                data;
-            }, function () { return _this.props.onLoad(_this.state.data); });
+        _this.setDataCallback = function () {
+            if (_this.state.data !== null && _this.props.onLoad) {
+                _this.props.onLoad(_this.state.data);
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        return _this;
+    }
+    Data.prototype.componentDidMount = function () {
+        var data = new google.maps.Data(__assign({}, (this.props.options || {}), { map: this.context }));
+        function setData() {
+            return {
+                data: data
+            };
+        }
+        this.setState(setData, this.setDataCallback);
+    };
+    Data.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.data !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.data
+                nextProps: this.props,
+                instance: this.state.data
             });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            if (_this.state.data) {
-                _this.state.data.setMap(null);
+        }
+    };
+    Data.prototype.componentWillUnmount = function () {
+        if (this.state.data !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.data);
             }
-        };
-        return _this;
-    }
+            helper_1.unregisterEvents(this.registeredEvents);
+            if (this.state.data) {
+                this.state.data.setMap(null);
+            }
+        }
+    };
     Data.prototype.render = function () {
-        return React.createElement(React.Fragment, null);
+        return null;
     };
-    Data.defaultProps = {
-        onLoad: function () { }
-    };
-    Data.contextType = MapContext;
+    Data.contextType = map_context_1.default;
     return Data;
 }(React.PureComponent));
-export { Data };
-export default Data;
-//# sourceMappingURL=Data.js.map
+exports.Data = Data;
+exports.default = Data;

lib/components/drawing/DrawingManager.d.ts

@@ -15,20 +15,17 @@ /// <reference types="googlemaps" />
     onRectangleComplete?: (rectangle: google.maps.Rectangle) => void;
-    onLoad: (drawingManager: google.maps.drawing.DrawingManager) => void;
+    onLoad?: (drawingManager: google.maps.drawing.DrawingManager) => void;
+    onUnmount?: (drawingManager: google.maps.drawing.DrawingManager) => void;
 }
 export declare class DrawingManager extends React.PureComponent<DrawingManagerProps, DrawingManagerState> {
-    static defaultProps: {
-        options: {};
-        onLoad: () => void;
-    };
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: DrawingManagerState;
     constructor(props: DrawingManagerProps);
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: DrawingManagerProps) => void;
-    componentWillUnmount: () => void;
-    render: () => JSX.Element;
-    getDrawingMode: () => google.maps.drawing.OverlayType;
-    getMap: () => google.maps.Map;
+    setDrawingManagerCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: DrawingManagerProps): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
 }
 export default DrawingManager;
+//# sourceMappingURL=DrawingManager.d.ts.map

lib/components/drawing/DrawingManager.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,7 +26,7 @@ var extendStatics = function (d, b) {
 };
-/* globals google */
-import * as React from "react";
-import * as invariant from "invariant";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var invariant = require("invariant");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {
@@ -47,3 +48,3 @@ onCircleComplete: "circlecomplete",
 };
-var DrawingManager = /** @class */ (function (_super) {
+var DrawingManager = (function (_super) {
     __extends(DrawingManager, _super);
@@ -56,48 +57,56 @@ function DrawingManager(props) {
         };
-        _this.componentDidMount = function () {
-            var drawingManager = new google.maps.drawing.DrawingManager(__assign({}, _this.props.options, { map: _this.context }));
-            _this.setState(function () { return ({
-                drawingManager: drawingManager
-            }); }, function () {
-                if (_this.state.drawingManager !== null) {
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.drawingManager
-                    });
+        _this.setDrawingManagerCallback = function () {
+            if (_this.state.drawingManager !== null) {
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                    updaterMap: updaterMap,
+                    eventMap: eventMap,
+                    prevProps: {},
+                    nextProps: _this.props,
+                    instance: _this.state.drawingManager
+                });
+                if (_this.props.onLoad) {
                     _this.props.onLoad(_this.state.drawingManager);
                 }
-            });
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        invariant(google.maps.drawing, 'Did you include "libraries=drawing" in the URL?');
+        return _this;
+    }
+    DrawingManager.prototype.componentDidMount = function () {
+        var drawingManager = new google.maps.drawing.DrawingManager(__assign({}, (this.props.options || {}), { map: this.context }));
+        function setDrawingManager() {
+            return {
+                drawingManager: drawingManager
+            };
+        }
+        this.setState(setDrawingManager, this.setDrawingManagerCallback);
+    };
+    DrawingManager.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.drawingManager !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.drawingManager
+                nextProps: this.props,
+                instance: this.state.drawingManager
             });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            _this.state.drawingManager && _this.state.drawingManager.setMap(null);
-        };
-        _this.render = function () { return React.createElement(React.Fragment, null); };
-        _this.getDrawingMode = function () { return _this.state.drawingManager.getDrawingMode(); };
-        _this.getMap = function () { return _this.state.drawingManager.getMap(); };
-        invariant(google.maps.drawing, 'Did you include "libraries=drawing" in the URL?');
-        return _this;
-    }
-    DrawingManager.defaultProps = {
-        options: {},
-        onLoad: function () { }
+        }
     };
-    DrawingManager.contextType = MapContext;
+    DrawingManager.prototype.componentWillUnmount = function () {
+        if (this.state.drawingManager !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.drawingManager);
+            }
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.state.drawingManager.setMap(null);
+        }
+    };
+    DrawingManager.prototype.render = function () {
+        return React.createElement(React.Fragment, null);
+    };
+    DrawingManager.contextType = map_context_1.default;
     return DrawingManager;
 }(React.PureComponent));
-export { DrawingManager };
-export default DrawingManager;
-//# sourceMappingURL=DrawingManager.js.map
+exports.DrawingManager = DrawingManager;
+exports.default = DrawingManager;

lib/components/drawing/InfoWindow.d.ts

@@ -16,22 +16,18 @@ /// <reference types="googlemaps" />
     onZindexChanged?: () => void;
-    onLoad: (infoWindow: google.maps.InfoWindow) => void;
+    onLoad?: (infoWindow: google.maps.InfoWindow) => void;
+    onUnmount?: (infoWindow: google.maps.InfoWindow) => void;
 }
 export declare class InfoWindow extends React.PureComponent<InfoWindowProps, InfoWindowState> {
-    static defaultProps: {
-        options: {};
-        onLoad: () => void;
-    };
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     containerElement: HTMLElement | null;
     state: InfoWindowState;
-    componentDidMount: () => void;
+    open: (infoWindow: google.maps.InfoWindow, anchor: google.maps.MVCObject) => void;
+    setInfowindowCallback: () => void;
+    componentDidMount(): void;
     componentDidUpdate(prevProps: InfoWindowProps): void;
-    componentWillUnmount: () => void;
-    render: () => any;
-    open: (infoWindow: google.maps.InfoWindow, anchor: google.maps.MVCObject) => void;
-    getContent: () => string | Element;
-    getPosition: () => google.maps.LatLng;
-    getZIndex: () => number;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
 }
 export default InfoWindow;
+//# sourceMappingURL=InfoWindow.d.ts.map

lib/components/drawing/InfoWindow.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,10 +26,8 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import * as React from "react";
-// @ts-ignore
-import { createPortal } from "react-dom";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
-// @ts-ignore
-import invariant from "invariant";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var react_dom_1 = require("react-dom");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
+var invariant_1 = require("invariant");
 var eventMap = {
@@ -52,3 +51,3 @@ onCloseClick: "closeclick",
 };
-var InfoWindow = /** @class */ (function (_super) {
+var InfoWindow = (function (_super) {
     __extends(InfoWindow, _super);
@@ -62,30 +61,2 @@ function InfoWindow() {
         };
-        _this.componentDidMount = function () {
-            var infoWindow = new google.maps.InfoWindow(__assign({}, _this.props.options));
-            _this.containerElement = document.createElement("div");
-            _this.setState(function () { return ({
-                infoWindow: infoWindow
-            }); }, function () {
-                if (_this.state.infoWindow !== null &&
-                    _this.containerElement !== null &&
-                    _this.props.anchor !== null) {
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.infoWindow
-                    });
-                    _this.state.infoWindow.setContent(_this.containerElement);
-                    _this.open(_this.state.infoWindow, _this.props.anchor);
-                    _this.props.onLoad(_this.state.infoWindow);
-                }
-            });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-        };
-        _this.render = function () {
-            return _this.containerElement ? (createPortal(React.Children.only(_this.props.children), _this.containerElement)) : (React.createElement(React.Fragment, null));
-        };
         _this.open = function (infoWindow, anchor) {
@@ -99,29 +70,60 @@ if (anchor) {
             else {
-                invariant(false, "You must provide either an anchor (typically render it inside a <Marker>) or a position props for <InfoWindow>.");
+                invariant_1.default(false, "You must provide either an anchor (typically render it inside a <Marker>) or a position props for <InfoWindow>.");
             }
         };
-        _this.getContent = function () { return _this.state.infoWindow.getContent(); };
-        _this.getPosition = function () { return _this.state.infoWindow.getPosition(); };
-        _this.getZIndex = function () { return _this.state.infoWindow.getZIndex(); };
+        _this.setInfowindowCallback = function () {
+            if (_this.state.infoWindow !== null &&
+                _this.containerElement !== null &&
+                _this.props.anchor !== null) {
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                    updaterMap: updaterMap,
+                    eventMap: eventMap,
+                    prevProps: {},
+                    nextProps: _this.props,
+                    instance: _this.state.infoWindow
+                });
+                _this.state.infoWindow.setContent(_this.containerElement);
+                _this.open(_this.state.infoWindow, _this.props.anchor);
+                if (_this.props.onLoad) {
+                    _this.props.onLoad(_this.state.infoWindow);
+                }
+            }
+        };
         return _this;
     }
+    InfoWindow.prototype.componentDidMount = function () {
+        var infoWindow = new google.maps.InfoWindow(__assign({}, (this.props.options || {})));
+        this.containerElement = document.createElement("div");
+        function setInfoWindow() {
+            return {
+                infoWindow: infoWindow
+            };
+        }
+        this.setState(setInfoWindow, this.setInfowindowCallback);
+    };
     InfoWindow.prototype.componentDidUpdate = function (prevProps) {
-        unregisterEvents(this.registeredEvents);
-        this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-            updaterMap: updaterMap,
-            eventMap: eventMap,
-            prevProps: prevProps,
-            nextProps: this.props,
-            instance: this.state.infoWindow
-        });
+        if (this.state.infoWindow !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                updaterMap: updaterMap,
+                eventMap: eventMap,
+                prevProps: prevProps,
+                nextProps: this.props,
+                instance: this.state.infoWindow
+            });
+        }
     };
-    InfoWindow.defaultProps = {
-        options: {},
-        onLoad: function () { }
+    InfoWindow.prototype.componentWillUnmount = function () {
+        if (this.state.infoWindow !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+        }
     };
-    InfoWindow.contextType = MapContext;
+    InfoWindow.prototype.render = function () {
+        return this.containerElement
+            ? (react_dom_1.createPortal(React.Children.only(this.props.children), this.containerElement)) : (React.createElement(React.Fragment, null));
+    };
+    InfoWindow.contextType = map_context_1.default;
     return InfoWindow;
 }(React.PureComponent));
-export { InfoWindow };
-export default InfoWindow;
-//# sourceMappingURL=InfoWindow.js.map
+exports.InfoWindow = InfoWindow;
+exports.default = InfoWindow;

lib/components/drawing/Marker.d.ts

@@ -44,17 +44,16 @@ /// <reference types="googlemaps" />
     onZindexChanged?: () => void;
-    onLoad: (marker: google.maps.Marker) => void;
+    onLoad?: (marker: google.maps.Marker) => void;
+    onUnmount?: (marker: google.maps.Marker) => void;
 }
 export declare class Marker extends React.PureComponent<MarkerProps, MarkerState> {
-    static defaultProps: {
-        options: {};
-        onLoad: () => void;
-    };
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: MarkerState;
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: MarkerProps) => void;
-    componentWillUnmount: () => void;
-    render: () => {};
+    setMarkerCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: MarkerProps): void;
+    componentWillUnmount(): void;
+    render(): {};
 }
 export default Marker;
+//# sourceMappingURL=Marker.d.ts.map

lib/components/drawing/Marker.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,5 +26,6 @@ var extendStatics = function (d, b) {
 };
-import * as React from "react";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {
@@ -96,3 +98,3 @@ onAnimationChanged: "animation_changed",
 };
-var Marker = /** @class */ (function (_super) {
+var Marker = (function (_super) {
     __extends(Marker, _super);
@@ -105,61 +107,67 @@ function Marker() {
         };
-        _this.componentDidMount = function () {
-            var markerOptions = __assign({}, _this.props.options, (_this.props.clusterer ? {} : { map: _this.context }), { position: _this.props.position });
-            var marker = new google.maps.Marker(markerOptions);
-            if (_this.props.clusterer) {
-                _this.props.clusterer.addMarker(marker, !!_this.props.noClustererRedraw);
-            }
-            else {
-                marker.setMap(_this.context);
-            }
-            _this.setState(function () { return ({
-                marker: marker
-            }); }, function () {
-                if (_this.state.marker !== null) {
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.marker
-                    });
-                    _this.props.onLoad(_this.state.marker);
-                }
-            });
-        };
-        _this.componentDidUpdate = function (prevProps) {
+        _this.setMarkerCallback = function () {
             if (_this.state.marker !== null) {
-                unregisterEvents(_this.registeredEvents);
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                     updaterMap: updaterMap,
                     eventMap: eventMap,
-                    prevProps: prevProps,
+                    prevProps: {},
                     nextProps: _this.props,
                     instance: _this.state.marker
                 });
-            }
-        };
-        _this.componentWillUnmount = function () {
-            if (_this.state.marker !== null) {
-                unregisterEvents(_this.registeredEvents);
-                if (_this.props.clusterer) {
-                    _this.props.clusterer.removeMarker(_this.state.marker, !!_this.props.noClustererRedraw);
+                if (_this.props.onLoad) {
+                    _this.props.onLoad(_this.state.marker);
                 }
-                else {
-                    _this.state.marker && _this.state.marker.setMap(null);
-                }
             }
         };
-        _this.render = function () { return (_this.props.children ? _this.props.children : null); };
         return _this;
     }
-    Marker.defaultProps = {
-        options: {},
-        onLoad: function () { }
+    Marker.prototype.componentDidMount = function () {
+        var markerOptions = __assign({}, (this.props.options || {}), (this.props.clusterer ? {} : { map: this.context }), { position: this.props.position });
+        var marker = new google.maps.Marker(markerOptions);
+        if (this.props.clusterer) {
+            this.props.clusterer.addMarker(marker, !!this.props.noClustererRedraw);
+        }
+        else {
+            marker.setMap(this.context);
+        }
+        function setMarker() {
+            return {
+                marker: marker
+            };
+        }
+        this.setState(setMarker, this.setMarkerCallback);
     };
-    Marker.contextType = MapContext;
+    Marker.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.marker !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                updaterMap: updaterMap,
+                eventMap: eventMap,
+                prevProps: prevProps,
+                nextProps: this.props,
+                instance: this.state.marker
+            });
+        }
+    };
+    Marker.prototype.componentWillUnmount = function () {
+        if (this.state.marker !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.marker);
+            }
+            helper_1.unregisterEvents(this.registeredEvents);
+            if (this.props.clusterer) {
+                this.props.clusterer.removeMarker(this.state.marker, !!this.props.noClustererRedraw);
+            }
+            else {
+                this.state.marker && this.state.marker.setMap(null);
+            }
+        }
+    };
+    Marker.prototype.render = function () {
+        return this.props.children || React.createElement(React.Fragment, null);
+    };
+    Marker.contextType = map_context_1.default;
     return Marker;
 }(React.PureComponent));
-export { Marker };
-export default Marker;
-//# sourceMappingURL=Marker.js.map
+exports.Marker = Marker;
+exports.default = Marker;

lib/components/drawing/Polygon.d.ts

@@ -24,17 +24,16 @@ /// <reference types="googlemaps" />
     onDrag?: (e: MouseEvent) => void;
-    onLoad: (polygon: google.maps.Polygon) => void;
+    onLoad?: (polygon: google.maps.Polygon) => void;
+    onUnmount?: (polygon: google.maps.Polygon) => void;
 }
 export declare class Polygon extends React.PureComponent<PolygonProps, PolygonState> {
-    static defaultProps: {
-        options: {};
-        onLoad: () => void;
-    };
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: PolygonState;
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: PolygonProps) => void;
-    componentWillUnmount: () => void;
-    render: () => any;
+    setPolygonCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PolygonProps): void;
+    componentWillUnmount(): void;
+    render: () => null;
 }
 export default Polygon;
+//# sourceMappingURL=Polygon.d.ts.map

lib/components/drawing/Polygon.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,6 +26,6 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import * as React from "react";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {
@@ -66,3 +67,3 @@ onClick: "click",
 };
-var Polygon = /** @class */ (function (_super) {
+var Polygon = (function (_super) {
     __extends(Polygon, _super);
@@ -75,45 +76,53 @@ function Polygon() {
         };
-        _this.componentDidMount = function () {
-            var polygon = new google.maps.Polygon(__assign({}, _this.props.options, { map: _this.context }));
-            _this.setState(function () { return ({
-                polygon: polygon
-            }); }, function () {
-                if (_this.state.polygon !== null) {
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.polygon
-                    });
+        _this.setPolygonCallback = function () {
+            if (_this.state.polygon !== null) {
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                    updaterMap: updaterMap,
+                    eventMap: eventMap,
+                    prevProps: {},
+                    nextProps: _this.props,
+                    instance: _this.state.polygon
+                });
+                if (_this.props.onLoad) {
                     _this.props.onLoad(_this.state.polygon);
                 }
-            });
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        _this.render = function () { return null; };
+        return _this;
+    }
+    Polygon.prototype.componentDidMount = function () {
+        var polygon = new google.maps.Polygon(__assign({}, (this.props.options || {}), { map: this.context }));
+        function setPolygon() {
+            return {
+                polygon: polygon
+            };
+        }
+        this.setState(setPolygon, this.setPolygonCallback);
+    };
+    Polygon.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.polygon !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.polygon
+                nextProps: this.props,
+                instance: this.state.polygon
             });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            _this.state.polygon && _this.state.polygon.setMap(null);
-        };
-        _this.render = function () { return null; };
-        return _this;
-    }
-    Polygon.defaultProps = {
-        options: {},
-        onLoad: function () { }
+        }
     };
-    Polygon.contextType = MapContext;
+    Polygon.prototype.componentWillUnmount = function () {
+        if (this.state.polygon !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.polygon);
+            }
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.state.polygon && this.state.polygon.setMap(null);
+        }
+    };
+    Polygon.contextType = map_context_1.default;
     return Polygon;
 }(React.PureComponent));
-export { Polygon };
-export default Polygon;
-//# sourceMappingURL=Polygon.js.map
+exports.Polygon = Polygon;
+exports.default = Polygon;

lib/components/drawing/Polyline.d.ts

@@ -7,33 +7,32 @@ /// <reference types="googlemaps" />
 interface PolylineProps {
-    options: google.maps.PolylineOptions;
-    draggable: boolean;
-    editable: boolean;
-    visible: boolean;
-    path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[];
-    onDblClick: (e: MouseEvent) => void;
-    onDragEnd: (e: MouseEvent) => void;
-    onDragStart: (e: MouseEvent) => void;
-    onMouseDown: (e: MouseEvent) => void;
-    onMouseMove: (e: MouseEvent) => void;
-    onMouseOut: (e: MouseEvent) => void;
-    onMouseOver: (e: MouseEvent) => void;
-    onMouseUp: (e: MouseEvent) => void;
-    onRightClick: (e: MouseEvent) => void;
-    onClick: (e: MouseEvent) => void;
-    onDrag: (e: MouseEvent) => void;
-    onLoad: (polyline: google.maps.Polyline) => void;
+    options?: google.maps.PolylineOptions;
+    draggable?: boolean;
+    editable?: boolean;
+    visible?: boolean;
+    path?: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[];
+    onDblClick?: (e: MouseEvent) => void;
+    onDragEnd?: (e: MouseEvent) => void;
+    onDragStart?: (e: MouseEvent) => void;
+    onMouseDown?: (e: MouseEvent) => void;
+    onMouseMove?: (e: MouseEvent) => void;
+    onMouseOut?: (e: MouseEvent) => void;
+    onMouseOver?: (e: MouseEvent) => void;
+    onMouseUp?: (e: MouseEvent) => void;
+    onRightClick?: (e: MouseEvent) => void;
+    onClick?: (e: MouseEvent) => void;
+    onDrag?: (e: MouseEvent) => void;
+    onLoad?: (polyline: google.maps.Polyline) => void;
+    onUnmount?: (polyline: google.maps.Polyline) => void;
 }
 export declare class Polyline extends React.PureComponent<PolylineProps, PolylineState> {
-    static defaultProps: {
-        options: {};
-        onLoad: () => void;
-    };
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: PolylineState;
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: PolylineProps) => void;
-    componentWillUnmount: () => void;
-    render: () => JSX.Element;
+    setPolylineCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PolylineProps): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
 }
 export default Polyline;
+//# sourceMappingURL=Polyline.d.ts.map

lib/components/drawing/Polyline.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,5 +26,6 @@ var extendStatics = function (d, b) {
 };
-import * as React from "react";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {
@@ -62,3 +64,3 @@ onClick: "click",
 };
-var Polyline = /** @class */ (function (_super) {
+var Polyline = (function (_super) {
     __extends(Polyline, _super);
@@ -71,45 +73,55 @@ function Polyline() {
         };
-        _this.componentDidMount = function () {
-            var polyline = new google.maps.Polyline(__assign({}, _this.props.options, { map: _this.context }));
-            _this.setState(function () { return ({
-                polyline: polyline
-            }); }, function () {
-                if (_this.state.polyline !== null) {
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.polyline
-                    });
+        _this.setPolylineCallback = function () {
+            if (_this.state.polyline !== null) {
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                    updaterMap: updaterMap,
+                    eventMap: eventMap,
+                    prevProps: {},
+                    nextProps: _this.props,
+                    instance: _this.state.polyline
+                });
+                if (_this.props.onLoad) {
                     _this.props.onLoad(_this.state.polyline);
                 }
-            });
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        return _this;
+    }
+    Polyline.prototype.componentDidMount = function () {
+        var polyline = new google.maps.Polyline(__assign({}, (this.props.options || {}), { map: this.context }));
+        function setPolyline() {
+            return {
+                polyline: polyline
+            };
+        }
+        this.setState(setPolyline, this.setPolylineCallback);
+    };
+    Polyline.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.polyline !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.polyline
+                nextProps: this.props,
+                instance: this.state.polyline
             });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            _this.state.polyline && _this.state.polyline.setMap(null);
-        };
-        _this.render = function () { return React.createElement(React.Fragment, null); };
-        return _this;
-    }
-    Polyline.defaultProps = {
-        options: {},
-        onLoad: function () { }
+        }
     };
-    Polyline.contextType = MapContext;
+    Polyline.prototype.componentWillUnmount = function () {
+        if (this.state.polyline !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.polyline);
+            }
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.state.polyline.setMap(null);
+        }
+    };
+    Polyline.prototype.render = function () {
+        return React.createElement(React.Fragment, null);
+    };
+    Polyline.contextType = map_context_1.default;
     return Polyline;
 }(React.PureComponent));
-export { Polyline };
-export default Polyline;
-//# sourceMappingURL=Polyline.js.map
+exports.Polyline = Polyline;
+exports.default = Polyline;

lib/components/drawing/Rectangle.d.ts

@@ -25,14 +25,16 @@ /// <reference types="googlemaps" />
     onBoundsChanged?: () => void;
-    onLoad: (rectangle: google.maps.Rectangle) => void;
+    onLoad?: (rectangle: google.maps.Rectangle) => void;
+    onUnmount?: (rectangle: google.maps.Rectangle) => void;
 }
 export declare class Rectangle extends React.PureComponent<RectangleProps, RectangleState> {
-    static contextType: React.Context<google.maps.Map>;
-    static defaultProps: RectangleProps;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: RectangleState;
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: RectangleProps) => void;
-    componentWillUnmount: () => void;
-    render: () => JSX.Element;
+    setRectangleCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: RectangleProps): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
 }
 export default Rectangle;
+//# sourceMappingURL=Rectangle.d.ts.map

lib/components/drawing/Rectangle.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,5 +26,6 @@ var extendStatics = function (d, b) {
 };
-import * as React from "react";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {
@@ -63,3 +65,3 @@ onBoundsChanged: "bounds_changed",
 };
-var Rectangle = /** @class */ (function (_super) {
+var Rectangle = (function (_super) {
     __extends(Rectangle, _super);
@@ -72,48 +74,55 @@ function Rectangle() {
         };
-        _this.componentDidMount = function () {
-            var rectangle = new google.maps.Rectangle(__assign({}, _this.props.options, { map: _this.context }));
-            _this.setState(function () { return ({
-                rectangle: rectangle
-            }); }, function () {
-                if (_this.state.rectangle !== null) {
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.rectangle
-                    });
+        _this.setRectangleCallback = function () {
+            if (_this.state.rectangle !== null) {
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                    updaterMap: updaterMap,
+                    eventMap: eventMap,
+                    prevProps: {},
+                    nextProps: _this.props,
+                    instance: _this.state.rectangle
+                });
+                if (_this.props.onLoad) {
                     _this.props.onLoad(_this.state.rectangle);
                 }
-            });
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        return _this;
+    }
+    Rectangle.prototype.componentDidMount = function () {
+        var rectangle = new google.maps.Rectangle(__assign({}, (this.props.options || {}), { map: this.context }));
+        function setRectangle() {
+            return {
+                rectangle: rectangle
+            };
+        }
+        this.setState(setRectangle, this.setRectangleCallback);
+    };
+    Rectangle.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.rectangle !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.rectangle
+                nextProps: this.props,
+                instance: this.state.rectangle
             });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            _this.state.rectangle && _this.state.rectangle.setMap(null);
-        };
-        _this.render = function () { return React.createElement(React.Fragment, null); };
-        return _this;
-    }
-    Rectangle.contextType = MapContext;
-    Rectangle.defaultProps = {
-        draggable: false,
-        editable: false,
-        visible: true,
-        options: {},
-        onLoad: function () { }
+        }
     };
+    Rectangle.prototype.componentWillUnmount = function () {
+        if (this.state.rectangle !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.rectangle);
+            }
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.state.rectangle.setMap(null);
+        }
+    };
+    Rectangle.prototype.render = function () {
+        return React.createElement(React.Fragment, null);
+    };
+    Rectangle.contextType = map_context_1.default;
     return Rectangle;
 }(React.PureComponent));
-export { Rectangle };
-export default Rectangle;
-//# sourceMappingURL=Rectangle.js.map
+exports.Rectangle = Rectangle;
+exports.default = Rectangle;

lib/components/heatmap/HeatmapLayer.d.ts

@@ -9,18 +9,16 @@ /// <reference types="googlemaps" />
     options?: google.maps.visualization.HeatmapLayerOptions;
-    onLoad: (heatmapLayer: google.maps.visualization.HeatmapLayer) => void;
+    onLoad?: (heatmapLayer: google.maps.visualization.HeatmapLayer) => void;
+    onUnmount?: (heatmapLayer: google.maps.visualization.HeatmapLayer) => void;
 }
 export declare class HeatmapLayer extends React.PureComponent<HeatmapLayerProps, HeatmapLayerState> {
-    static defaultProps: {
-        options: {};
-        onLoad: () => void;
-    };
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: HeatmapLayerState;
-    constructor(props: HeatmapLayerProps);
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: HeatmapLayerProps) => void;
-    componentWillUnmount: () => void;
-    render: () => any;
+    setHeatmapLayerCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: HeatmapLayerProps): void;
+    componentWillUnmount(): void;
+    render(): null;
 }
 export default HeatmapLayer;
+//# sourceMappingURL=HeatmapLayer.d.ts.map

lib/components/heatmap/HeatmapLayer.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,6 +26,7 @@ var extendStatics = function (d, b) {
 };
-import * as React from "react";
-import * as invariant from "invariant";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var invariant = require("invariant");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {};
@@ -39,11 +41,9 @@ var updaterMap = {
     options: function (instance, options) {
-        // TODO: add to official typings
-        //@ts-ignore
         instance.setOptions(options);
     }
 };
-var HeatmapLayer = /** @class */ (function (_super) {
+var HeatmapLayer = (function (_super) {
     __extends(HeatmapLayer, _super);
-    function HeatmapLayer(props) {
-        var _this = _super.call(this, props) || this;
+    function HeatmapLayer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.registeredEvents = [];
@@ -53,49 +53,55 @@ _this.state = {
         };
-        _this.componentDidMount = function () {
-            var heatmapLayer = new google.maps.visualization.HeatmapLayer(__assign({ data: _this.props.data }, _this.props.options, { map: _this.context }));
-            _this.setState(function () { return ({
-                heatmapLayer: heatmapLayer
-            }); }, function () {
-                if (_this.state.heatmapLayer !== null) {
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.heatmapLayer
-                    });
+        _this.setHeatmapLayerCallback = function () {
+            if (_this.state.heatmapLayer !== null) {
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                    updaterMap: updaterMap,
+                    eventMap: eventMap,
+                    prevProps: {},
+                    nextProps: _this.props,
+                    instance: _this.state.heatmapLayer
+                });
+                if (_this.props.onLoad) {
                     _this.props.onLoad(_this.state.heatmapLayer);
                 }
-            });
-        };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                updaterMap: updaterMap,
-                eventMap: eventMap,
-                prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.heatmapLayer
-            });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            if (_this.state.heatmapLayer) {
-                _this.state.heatmapLayer.setMap(null);
             }
         };
-        _this.render = function () { return null; };
-        invariant(google.maps.visualization, 'Did you include "visualization" in the libraries array prop in <LoadScript />?');
-        invariant(props.data, "data property is required in HeatmapLayer");
         return _this;
     }
-    HeatmapLayer.defaultProps = {
-        options: {},
-        onLoad: function () { }
+    HeatmapLayer.prototype.componentDidMount = function () {
+        invariant(google.maps.visualization, 'Did you include "visualization" in the libraries array prop in <LoadScript />?');
+        invariant(this.props.data, "data property is required in HeatmapLayer");
+        var heatmapLayer = new google.maps.visualization.HeatmapLayer(__assign({ data: this.props.data }, (this.props.options || {}), { map: this.context }));
+        function setHeatmapLayer() {
+            return {
+                heatmapLayer: heatmapLayer
+            };
+        }
+        this.setState(setHeatmapLayer, this.setHeatmapLayerCallback);
     };
-    HeatmapLayer.contextType = MapContext;
+    HeatmapLayer.prototype.componentDidUpdate = function (prevProps) {
+        helper_1.unregisterEvents(this.registeredEvents);
+        this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+            updaterMap: updaterMap,
+            eventMap: eventMap,
+            prevProps: prevProps,
+            nextProps: this.props,
+            instance: this.state.heatmapLayer
+        });
+    };
+    HeatmapLayer.prototype.componentWillUnmount = function () {
+        if (this.state.heatmapLayer !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.heatmapLayer);
+            }
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.state.heatmapLayer.setMap(null);
+        }
+    };
+    HeatmapLayer.prototype.render = function () {
+        return null;
+    };
+    HeatmapLayer.contextType = map_context_1.default;
     return HeatmapLayer;
 }(React.PureComponent));
-export { HeatmapLayer };
-export default HeatmapLayer;
-//# sourceMappingURL=HeatmapLayer.js.map
+exports.HeatmapLayer = HeatmapLayer;
+exports.default = HeatmapLayer;

lib/components/kml/KmlLayer.d.ts

@@ -14,16 +14,15 @@ /// <reference types="googlemaps" />
     onLoad: (kmlLayer: google.maps.KmlLayer) => void;
+    onUnmount: (kmlLayer: google.maps.KmlLayer) => void;
 }
 export declare class KmlLayer extends PureComponent<KmlLayerProps, KmlLayerState> {
-    static defaultProps: {
-        options: {};
-        onLoad: () => void;
-    };
-    static contextType: import("react").Context<google.maps.Map>;
+    static contextType: import("react").Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: KmlLayerState;
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: KmlLayerProps) => void;
-    componentWillUnmount: () => void;
-    render(): any;
+    setKmlLayerCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: KmlLayerProps): void;
+    componentWillUnmount(): void;
+    render(): null;
 }
 export default KmlLayer;
+//# sourceMappingURL=KmlLayer.d.ts.map

lib/components/kml/KmlLayer.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -14,5 +15,6 @@ var extendStatics = function (d, b) {
 })();
-import { PureComponent } from "react";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {
@@ -34,3 +36,3 @@ onClick: "click",
 };
-var KmlLayer = /** @class */ (function (_super) {
+var KmlLayer = (function (_super) {
     __extends(KmlLayer, _super);
@@ -43,48 +45,56 @@ function KmlLayer() {
         };
-        _this.componentDidMount = function () {
-            var kmlLayer = new google.maps.KmlLayer(_this.props.options);
-            _this.setState(function () { return ({
-                kmlLayer: kmlLayer
-            }); }, function () {
-                if (_this.state.kmlLayer !== null) {
-                    _this.state.kmlLayer.setMap(_this.context);
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.kmlLayer
-                    });
+        _this.setKmlLayerCallback = function () {
+            if (_this.state.kmlLayer !== null) {
+                _this.state.kmlLayer.setMap(_this.context);
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                    updaterMap: updaterMap,
+                    eventMap: eventMap,
+                    prevProps: {},
+                    nextProps: _this.props,
+                    instance: _this.state.kmlLayer
+                });
+                if (_this.props.onLoad) {
                     _this.props.onLoad(_this.state.kmlLayer);
                 }
-            });
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        return _this;
+    }
+    KmlLayer.prototype.componentDidMount = function () {
+        var kmlLayer = new google.maps.KmlLayer(this.props.options);
+        function setLmlLayer() {
+            return {
+                kmlLayer: kmlLayer
+            };
+        }
+        this.setState(setLmlLayer, this.setKmlLayerCallback);
+    };
+    KmlLayer.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.kmlLayer !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.kmlLayer
+                nextProps: this.props,
+                instance: this.state.kmlLayer
             });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            _this.state.kmlLayer && _this.state.kmlLayer.setMap(null);
-        };
-        return _this;
-    }
+        }
+    };
+    KmlLayer.prototype.componentWillUnmount = function () {
+        if (this.state.kmlLayer !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.kmlLayer);
+            }
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.state.kmlLayer.setMap(null);
+        }
+    };
     KmlLayer.prototype.render = function () {
         return null;
     };
-    KmlLayer.defaultProps = {
-        options: {},
-        onLoad: function () { }
-    };
-    KmlLayer.contextType = MapContext;
+    KmlLayer.contextType = map_context_1.default;
     return KmlLayer;
-}(PureComponent));
-export { KmlLayer };
-export default KmlLayer;
-//# sourceMappingURL=KmlLayer.js.map
+}(react_1.PureComponent));
+exports.KmlLayer = KmlLayer;
+exports.default = KmlLayer;

lib/components/maps/BicyclingLayer.d.ts

@@ -7,3 +7,4 @@ /// <reference types="googlemaps" />
 interface BicyclingLayerProps {
-    onLoad: (BicyclingLayer: google.maps.BicyclingLayer) => void;
+    onLoad?: (bicyclingLayer: google.maps.BicyclingLayer) => void;
+    onUnmount?: (bicyclingLayer: google.maps.BicyclingLayer) => void;
 }
@@ -14,10 +15,12 @@ export declare class BicyclingLayer extends React.PureComponent<BicyclingLayerProps, BicyclingLayerState> {
     };
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     state: {
-        bicyclingLayer: any;
+        bicyclingLayer: null;
     };
-    componentDidMount: () => void;
-    componentWillUnmount: () => void;
-    render(): any;
+    setBicyclingLayerCallback: () => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): null;
 }
 export default BicyclingLayer;
+//# sourceMappingURL=BicyclingLayer.d.ts.map

lib/components/maps/BicyclingLayer.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -14,5 +15,6 @@ var extendStatics = function (d, b) {
 })();
-import * as React from "react";
-import MapContext from "../../map-context";
-var BicyclingLayer = /** @class */ (function (_super) {
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var map_context_1 = require("../../map-context");
+var BicyclingLayer = (function (_super) {
     __extends(BicyclingLayer, _super);
@@ -24,20 +26,6 @@ function BicyclingLayer() {
         };
-        _this.componentDidMount = function () {
-            var bicyclingLayer = new google.maps.BicyclingLayer();
-            _this.setState(function () { return ({
-                bicyclingLayer: bicyclingLayer
-            }); }, function () {
-                if (_this.state.bicyclingLayer !== null) {
-                    // TODO: how is this possibly null if we're doing a null check
-                    // @ts-ignore
-                    _this.state.bicyclingLayer.setMap(_this.context);
-                    //@ts-ignore
-                    _this.props.onLoad(_this.state.bicyclingLayer);
-                }
-            });
-        };
-        _this.componentWillUnmount = function () {
+        _this.setBicyclingLayerCallback = function () {
             if (_this.state.bicyclingLayer !== null) {
-                // @ts-ignore
-                _this.state.bicyclingLayer.setMap(null);
+                _this.state.bicyclingLayer.setMap(_this.context);
+                _this.props.onLoad(_this.state.bicyclingLayer);
             }
@@ -47,2 +35,19 @@ };
     }
+    BicyclingLayer.prototype.componentDidMount = function () {
+        var bicyclingLayer = new google.maps.BicyclingLayer();
+        function setBicyclingLayer() {
+            return {
+                bicyclingLayer: bicyclingLayer
+            };
+        }
+        this.setState(setBicyclingLayer, this.setBicyclingLayerCallback);
+    };
+    BicyclingLayer.prototype.componentWillUnmount = function () {
+        if (this.state.bicyclingLayer !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.bicyclingLayer);
+            }
+            this.state.bicyclingLayer.setMap(null);
+        }
+    };
     BicyclingLayer.prototype.render = function () {
@@ -54,7 +59,6 @@ return null;
     };
-    BicyclingLayer.contextType = MapContext;
+    BicyclingLayer.contextType = map_context_1.default;
     return BicyclingLayer;
 }(React.PureComponent));
-export { BicyclingLayer };
-export default BicyclingLayer;
-//# sourceMappingURL=BicyclingLayer.js.map
+exports.BicyclingLayer = BicyclingLayer;
+exports.default = BicyclingLayer;

lib/components/maps/TrafficLayer.d.ts

@@ -8,19 +8,18 @@ /// <reference types="googlemaps" />
     options?: google.maps.TrafficLayerOptions;
-    onLoad: (trafficLayer: google.maps.TrafficLayer) => void;
+    onLoad?: (trafficLayer: google.maps.TrafficLayer) => void;
+    onUnmount?: (trafficLayer: google.maps.TrafficLayer) => void;
 }
 export declare class TrafficLayer extends PureComponent<TrafficLayerProps, TrafficLayerState> {
-    static defaultProps: {
-        options: {};
-        onLoad: () => void;
-    };
-    static contextType: import("react").Context<google.maps.Map>;
+    static contextType: import("react").Context<google.maps.Map | null>;
     state: {
-        trafficLayer: any;
+        trafficLayer: null;
     };
+    setTrafficLayerCallback: () => void;
     registeredEvents: google.maps.MapsEventListener[];
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: TrafficLayerProps) => void;
-    componentWillUnmount: () => void;
-    render(): any;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TrafficLayerProps): void;
+    componentWillUnmount(): void;
+    render(): null;
 }
 export default TrafficLayer;
+//# sourceMappingURL=TrafficLayer.d.ts.map

lib/components/maps/TrafficLayer.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,5 +26,6 @@ var extendStatics = function (d, b) {
 };
-import { PureComponent } from "react";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {};
@@ -35,3 +37,3 @@ var updaterMap = {
 };
-var TrafficLayer = /** @class */ (function (_super) {
+var TrafficLayer = (function (_super) {
     __extends(TrafficLayer, _super);
@@ -43,53 +45,56 @@ function TrafficLayer() {
         };
-        _this.registeredEvents = [];
-        _this.componentDidMount = function () {
-            var trafficLayer = new google.maps.TrafficLayer(__assign({}, _this.props.options, { map: _this.context }));
-            _this.setState(function () { return ({
-                trafficLayer: trafficLayer
-            }); }, function () {
-                if (_this.state.trafficLayer !== null) {
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.trafficLayer
-                    });
-                    // TODO
-                    // @ts-ignore
+        _this.setTrafficLayerCallback = function () {
+            if (_this.state.trafficLayer !== null) {
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                    updaterMap: updaterMap,
+                    eventMap: eventMap,
+                    prevProps: {},
+                    nextProps: _this.props,
+                    instance: _this.state.trafficLayer
+                });
+                if (_this.props.onLoad) {
                     _this.props.onLoad(_this.state.trafficLayer);
                 }
-            });
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        _this.registeredEvents = [];
+        return _this;
+    }
+    TrafficLayer.prototype.componentDidMount = function () {
+        var trafficLayer = new google.maps.TrafficLayer(__assign({}, (this.props.options || {}), { map: this.context }));
+        function setTrafficlayer() {
+            return {
+                trafficLayer: trafficLayer
+            };
+        }
+        this.setState(setTrafficlayer, this.setTrafficLayerCallback);
+    };
+    TrafficLayer.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.trafficLayer !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.trafficLayer
+                nextProps: this.props,
+                instance: this.state.trafficLayer
             });
-        };
-        _this.componentWillUnmount = function () {
-            if (_this.state.trafficLayer !== null) {
-                unregisterEvents(_this.registeredEvents);
-                // @ts-ignore
-                _this.state.trafficLayer.setMap(null);
+        }
+    };
+    TrafficLayer.prototype.componentWillUnmount = function () {
+        if (this.state.trafficLayer !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.trafficLayer);
             }
-        };
-        return _this;
-    }
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.state.trafficLayer.setMap(null);
+        }
+    };
     TrafficLayer.prototype.render = function () {
         return null;
     };
-    TrafficLayer.defaultProps = {
-        options: {},
-        onLoad: function () { }
-    };
-    TrafficLayer.contextType = MapContext;
+    TrafficLayer.contextType = map_context_1.default;
     return TrafficLayer;
-}(PureComponent));
-export { TrafficLayer };
-export default TrafficLayer;
-//# sourceMappingURL=TrafficLayer.js.map
+}(react_1.PureComponent));
+exports.TrafficLayer = TrafficLayer;
+exports.default = TrafficLayer;

lib/components/overlays/GroundOverlay.d.ts

@@ -13,3 +13,4 @@ /// <reference types="googlemaps" />
     bounds: google.maps.LatLngBounds;
-    onLoad: (groundOverlay: google.maps.GroundOverlay) => void;
+    onLoad?: (groundOverlay: google.maps.GroundOverlay) => void;
+    onUnmount?: (groundOverlay: google.maps.GroundOverlay) => void;
 }
@@ -20,11 +21,12 @@ export declare class GroundOverlay extends React.PureComponent<GroundOverlayProps, GroundOverlayState> {
     };
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: GroundOverlayState;
-    constructor(props: GroundOverlayProps, context: React.Context<google.maps.Map>);
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: GroundOverlayProps) => void;
-    componentWillUnmount: () => void;
-    render(): any;
+    setGroundOverlayCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: GroundOverlayProps): void;
+    componentWillUnmount(): void;
+    render(): null;
 }
 export default GroundOverlay;
+//# sourceMappingURL=GroundOverlay.d.ts.map

lib/components/overlays/GroundOverlay.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -25,6 +26,7 @@ var extendStatics = function (d, b) {
 };
-import * as React from "react";
-import * as invariant from "invariant";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var invariant = require("invariant");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {
@@ -39,6 +41,6 @@ onDblClick: "dblclick",
 };
-var GroundOverlay = /** @class */ (function (_super) {
+var GroundOverlay = (function (_super) {
     __extends(GroundOverlay, _super);
-    function GroundOverlay(props, context) {
-        var _this = _super.call(this, props, context) || this;
+    function GroundOverlay() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.registeredEvents = [];
@@ -48,30 +50,41 @@ _this.state = {
         };
-        _this.componentDidMount = function () {
-            var groundOverlay = new google.maps.GroundOverlay(_this.props.url, _this.props.bounds, __assign({}, _this.props.options, { map: _this.context }));
-            _this.setState(function () {
-                groundOverlay;
-            }, function () {
-                if (_this.state.groundOverlay !== null) {
+        _this.setGroundOverlayCallback = function () {
+            if (_this.state.groundOverlay !== null) {
+                if (_this.props.onLoad) {
                     _this.props.onLoad(_this.state.groundOverlay);
                 }
-            });
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        return _this;
+    }
+    GroundOverlay.prototype.componentDidMount = function () {
+        invariant(!this.props.url || !this.props.bounds, "For GroundOveray, url and bounds are passed in to constructor and are immutable after instantiated. This is the behavior of Google Maps JavaScript API v3 ( See https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay) Hence, use the corresponding two props provided by `react-google-maps-api`, url and bounds. In some cases, you'll need the GroundOverlay component to reflect the changes of url and bounds. You can leverage the React's key property to remount the component. Typically, just `key={url}` would serve your need. See https://github.com/tomchentw/react-google-maps/issues/655");
+        var groundOverlay = new google.maps.GroundOverlay(this.props.url, this.props.bounds, __assign({}, this.props.options, { map: this.context }));
+        function setGroundOverlay() {
+            return {
+                groundOverlay: groundOverlay
+            };
+        }
+        this.setState(setGroundOverlay, this.setGroundOverlayCallback);
+    };
+    GroundOverlay.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.groundOverlay !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.groundOverlay
+                nextProps: this.props,
+                instance: this.state.groundOverlay
             });
-        };
-        _this.componentWillUnmount = function () {
-            if (_this.state.groundOverlay) {
-                _this.state.groundOverlay.setMap(null);
+        }
+    };
+    GroundOverlay.prototype.componentWillUnmount = function () {
+        if (this.state.groundOverlay) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.groundOverlay);
             }
-        };
-        invariant(!_this.props.url || !_this.props.bounds, "For GroundOveray, url and bounds are passed in to constructor and are immutable after instantiated. This is the behavior of Google Maps JavaScript API v3 ( See https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay) Hence, use the corresponding two props provided by `react-google-maps-api`, url and bounds. In some cases, you'll need the GroundOverlay component to reflect the changes of url and bounds. You can leverage the React's key property to remount the component. Typically, just `key={url}` would serve your need. See https://github.com/tomchentw/react-google-maps/issues/655");
-        return _this;
-    }
+            this.state.groundOverlay.setMap(null);
+        }
+    };
     GroundOverlay.prototype.render = function () {
@@ -83,7 +96,6 @@ return null;
     };
-    GroundOverlay.contextType = MapContext;
+    GroundOverlay.contextType = map_context_1.default;
     return GroundOverlay;
 }(React.PureComponent));
-export { GroundOverlay };
-export default GroundOverlay;
-//# sourceMappingURL=GroundOverlay.js.map
+exports.GroundOverlay = GroundOverlay;
+exports.default = GroundOverlay;

lib/components/places/Autocomplete.d.ts

@@ -7,2 +7,3 @@ /// <reference types="googlemaps" />
 interface AutocompleteProps {
+    children: React.ReactChild;
     bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral;
@@ -14,18 +15,17 @@ restrictions?: google.maps.places.ComponentRestrictions;
     onPlaceChanged?: () => void;
-    onLoad: (autocomplete: google.maps.places.Autocomplete) => void;
+    onLoad?: (autocomplete: google.maps.places.Autocomplete) => void;
+    onUnmount?: (autocomplete: google.maps.places.Autocomplete) => void;
 }
 export declare class Autocomplete extends React.PureComponent<AutocompleteProps, AutocompleteState> {
-    static defaultProps: {
-        onLoad: () => void;
-    };
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     containerElement: React.RefObject<HTMLDivElement>;
     state: AutocompleteState;
-    constructor(props: AutocompleteProps, context: React.Context<google.maps.Map>);
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: AutocompleteProps) => void;
-    componentWillUnmount: () => void;
-    render: () => JSX.Element;
+    setAutocompleteCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: AutocompleteProps): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
 }
 export default Autocomplete;
+//# sourceMappingURL=Autocomplete.d.ts.map

lib/components/places/Autocomplete.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -14,6 +15,7 @@ var extendStatics = function (d, b) {
 })();
-import * as React from "react";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
-import * as invariant from "invariant";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
+var invariant = require("invariant");
 var eventMap = {
@@ -30,9 +32,5 @@ onPlaceChanged: "place_changed"
     fields: function (instance, fields) {
-        // TODO: add to @types/googlemaps
-        // @ts-ignore
         instance.setFields(fields);
     },
     options: function (instance, options) {
-        // TODO: add to @types/googlemaps
-        // @ts-ignore
         instance.setOptions(options);
@@ -44,51 +42,54 @@ },
 };
-var Autocomplete = /** @class */ (function (_super) {
+var Autocomplete = (function (_super) {
     __extends(Autocomplete, _super);
-    function Autocomplete(props, context) {
-        var _this = _super.call(this, props, context) || this;
+    function Autocomplete() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.registeredEvents = [];
+        _this.containerElement = React.createRef();
         _this.state = {
             autocomplete: null
         };
-        _this.componentDidMount = function () {
-            // TODO: why is this possibly null
-            // @ts-ignore
-            var input = _this.containerElement.current.querySelector("input");
-            if (input) {
-                var autocomplete_1 = new google.maps.places.Autocomplete(input, _this.props.options);
-                _this.setState(function () { return ({
-                    autocomplete: autocomplete_1
-                }); }, function () {
-                    if (_this.state.autocomplete !== null) {
-                        _this.props.onLoad(_this.state.autocomplete);
-                    }
-                });
+        _this.setAutocompleteCallback = function () {
+            if (_this.state.autocomplete !== null) {
+                if (_this.props.onLoad) {
+                    _this.props.onLoad(_this.state.autocomplete);
+                }
             }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                updaterMap: updaterMap,
-                eventMap: eventMap,
-                prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.autocomplete
-            });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-        };
-        _this.render = function () { return (React.createElement("div", { ref: _this.containerElement }, React.Children.only(_this.props.children))); };
-        invariant(google.maps.places, 'Did you include "libraries=places" in the URL?', "sdfs");
-        _this.containerElement = React.createRef();
         return _this;
     }
-    Autocomplete.defaultProps = {
-        onLoad: function () { }
+    Autocomplete.prototype.componentDidMount = function () {
+        invariant(google.maps.places, 'Did you include "libraries=places" in the URL?', "sdfs");
+        var input = this.containerElement.current.querySelector("input");
+        if (input) {
+            var autocomplete_1 = new google.maps.places.Autocomplete(input, this.props.options);
+            this.setState(function setAutocomplete() {
+                return {
+                    autocomplete: autocomplete_1
+                };
+            }, this.setAutocompleteCallback);
+        }
     };
-    Autocomplete.contextType = MapContext;
+    Autocomplete.prototype.componentDidUpdate = function (prevProps) {
+        helper_1.unregisterEvents(this.registeredEvents);
+        this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+            updaterMap: updaterMap,
+            eventMap: eventMap,
+            prevProps: prevProps,
+            nextProps: this.props,
+            instance: this.state.autocomplete
+        });
+    };
+    Autocomplete.prototype.componentWillUnmount = function () {
+        if (this.state.autocomplete !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+        }
+    };
+    Autocomplete.prototype.render = function () {
+        return (React.createElement("div", { ref: this.containerElement }, React.Children.only(this.props.children)));
+    };
+    Autocomplete.contextType = map_context_1.default;
     return Autocomplete;
 }(React.PureComponent));
-export { Autocomplete };
-export default Autocomplete;
-//# sourceMappingURL=Autocomplete.js.map
+exports.Autocomplete = Autocomplete;
+exports.default = Autocomplete;

lib/components/places/StandaloneSearchBox.d.ts

@@ -10,18 +10,17 @@ /// <reference types="googlemaps" />
     onPlacesChanged?: () => void;
-    onLoad: (searchBox: google.maps.places.SearchBox) => void;
+    onLoad?: (searchBox: google.maps.places.SearchBox) => void;
+    onUnmount?: (searchBox: google.maps.places.SearchBox) => void;
 }
 declare class StandaloneSearchBox extends React.PureComponent<StandaloneSearchBoxProps, StandaloneSearchBoxState> {
-    static defaultProps: {
-        onLoad: () => void;
-    };
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     containerElement: React.RefObject<HTMLDivElement>;
     state: StandaloneSearchBoxState;
-    constructor(props: StandaloneSearchBoxProps, context: React.Context<google.maps.Map>);
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: StandaloneSearchBoxProps) => void;
-    componentWillUnmount: () => void;
-    render: () => JSX.Element;
+    setSearchBoxCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: StandaloneSearchBoxProps): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
 }
 export default StandaloneSearchBox;
+//# sourceMappingURL=StandaloneSearchBox.d.ts.map

lib/components/places/StandaloneSearchBox.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -14,6 +15,7 @@ var extendStatics = function (d, b) {
 })();
-import * as React from "react";
-import * as invariant from "invariant";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var invariant = require("invariant");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {
@@ -27,59 +29,68 @@ onPlacesChanged: "places_changed"
 };
-var StandaloneSearchBox = /** @class */ (function (_super) {
+var StandaloneSearchBox = (function (_super) {
     __extends(StandaloneSearchBox, _super);
-    function StandaloneSearchBox(props, context) {
-        var _this = _super.call(this, props, context) || this;
+    function StandaloneSearchBox() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.registeredEvents = [];
+        _this.containerElement = React.createRef();
         _this.state = {
             searchBox: null
         };
-        _this.componentDidMount = function () {
-            // TODO
-            // @ts-ignore
-            var input = _this.containerElement.current.querySelector("input");
-            if (input) {
-                var searchBox_1 = new google.maps.places.SearchBox(
-                // @ts-ignore
-                input, _this.props.options);
-                _this.setState(function () { return ({
-                    searchBox: searchBox_1
-                }); }, function () {
-                    if (_this.state.searchBox !== null) {
-                        _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                            updaterMap: updaterMap,
-                            eventMap: eventMap,
-                            prevProps: {},
-                            nextProps: _this.props,
-                            instance: _this.state.searchBox
-                        });
-                        _this.props.onLoad(_this.state.searchBox);
-                    }
+        _this.setSearchBoxCallback = function () {
+            if (_this.state.searchBox !== null) {
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                    updaterMap: updaterMap,
+                    eventMap: eventMap,
+                    prevProps: {},
+                    nextProps: _this.props,
+                    instance: _this.state.searchBox
                 });
+                if (_this.props.onLoad) {
+                    _this.props.onLoad(_this.state.searchBox);
+                }
             }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        return _this;
+    }
+    StandaloneSearchBox.prototype.componentDidMount = function () {
+        invariant(google.maps.places, 'Did you include "libraries=places" in the URL?');
+        if (this.containerElement !== null &&
+            this.containerElement.current !== null) {
+            var input = this.containerElement.current.querySelector("input");
+            if (input) {
+                var searchBox_1 = new google.maps.places.SearchBox(input, this.props.options);
+                this.setState(function setSearchBox() {
+                    return {
+                        searchBox: searchBox_1
+                    };
+                }, this.setSearchBoxCallback);
+            }
+        }
+    };
+    StandaloneSearchBox.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.searchBox !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.searchBox
+                nextProps: this.props,
+                instance: this.state.searchBox
             });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-        };
-        _this.render = function () { return (React.createElement("div", { ref: _this.containerElement }, React.Children.only(_this.props.children))); };
-        invariant(google.maps.places, 'Did you include "libraries=places" in the URL?');
-        _this.containerElement = React.createRef();
-        return _this;
-    }
-    StandaloneSearchBox.defaultProps = {
-        onLoad: function () { }
+        }
     };
-    StandaloneSearchBox.contextType = MapContext;
+    StandaloneSearchBox.prototype.componentWillUnmount = function () {
+        if (this.state.searchBox !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.searchBox);
+            }
+            helper_1.unregisterEvents(this.registeredEvents);
+        }
+    };
+    StandaloneSearchBox.prototype.render = function () {
+        return (React.createElement("div", { ref: this.containerElement }, React.Children.only(this.props.children)));
+    };
+    StandaloneSearchBox.contextType = map_context_1.default;
     return StandaloneSearchBox;
 }(React.PureComponent));
-export default StandaloneSearchBox;
-//# sourceMappingURL=StandaloneSearchBox.js.map
+exports.default = StandaloneSearchBox;

lib/components/streetview/StreetViewPanorama.d.ts

@@ -7,3 +7,2 @@ /// <reference types="googlemaps" />
 interface StreetViewPanoramaProps {
-    containerElement: Element;
     options?: google.maps.StreetViewPanoramaOptions;
@@ -18,16 +17,16 @@ onCloseclick?: (event: google.maps.event) => void;
     onZoomChange?: () => void;
-    onLoad: (streetViewPanorama: google.maps.StreetViewPanorama) => void;
+    onLoad?: (streetViewPanorama: google.maps.StreetViewPanorama) => void;
+    onUnmount?: (streetViewPanorama: google.maps.StreetViewPanorama) => void;
 }
 export declare class StreetViewPanorama extends React.PureComponent<StreetViewPanoramaProps, StreetViewPanoramaState> {
-    static defaultProps: {
-        onLoad: () => void;
-    };
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: StreetViewPanoramaState;
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: StreetViewPanoramaProps) => void;
-    componentWillUnmount: () => void;
-    render(): any;
+    setStreetViewPanoramaCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: StreetViewPanoramaProps): void;
+    componentWillUnmount(): void;
+    render(): null;
 }
 export default StreetViewPanorama;
+//# sourceMappingURL=StreetViewPanorama.d.ts.map

lib/components/streetview/StreetViewPanorama.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -14,5 +15,6 @@ var extendStatics = function (d, b) {
 })();
-import * as React from "react";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "../../utils/helper";
-import MapContext from "../../map-context";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var helper_1 = require("../../utils/helper");
+var map_context_1 = require("../../map-context");
 var eventMap = {
@@ -30,4 +32,2 @@ onCloseClick: "closeclick",
     register: function (instance, provider, options) {
-        // TODO: fix googlemaps typings
-        // @ts-ignore
         instance.registerPanoProvider(provider, options);
@@ -60,3 +60,3 @@ },
 };
-var StreetViewPanorama = /** @class */ (function (_super) {
+var StreetViewPanorama = (function (_super) {
     __extends(StreetViewPanorama, _super);
@@ -69,48 +69,55 @@ function StreetViewPanorama() {
         };
-        _this.componentDidMount = function () {
-            var streetViewPanorama = _this.context.getStreetView();
-            _this.setState(function () { return ({
-                streetViewPanorama: streetViewPanorama
-            }); }, function () {
-                if (_this.state.streetViewPanorama !== null) {
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.streetViewPanorama
-                    });
+        _this.setStreetViewPanoramaCallback = function () {
+            if (_this.state.streetViewPanorama !== null) {
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                    updaterMap: updaterMap,
+                    eventMap: eventMap,
+                    prevProps: {},
+                    nextProps: _this.props,
+                    instance: _this.state.streetViewPanorama
+                });
+                if (_this.props.onLoad) {
                     _this.props.onLoad(_this.state.streetViewPanorama);
                 }
-            });
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        return _this;
+    }
+    StreetViewPanorama.prototype.componentDidMount = function () {
+        var streetViewPanorama = this.context.getStreetView();
+        function setStreetViewPanorama() {
+            return {
+                streetViewPanorama: streetViewPanorama
+            };
+        }
+        this.setState(setStreetViewPanorama, this.setStreetViewPanoramaCallback);
+    };
+    StreetViewPanorama.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.streetViewPanorama !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
                 eventMap: eventMap,
                 prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.streetViewPanorama
+                nextProps: this.props,
+                instance: this.state.streetViewPanorama
             });
-        };
-        _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            if (_this.state.streetViewPanorama) {
-                _this.state.streetViewPanorama.setVisible(false);
+        }
+    };
+    StreetViewPanorama.prototype.componentWillUnmount = function () {
+        if (this.state.streetViewPanorama !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.streetViewPanorama);
             }
-        };
-        return _this;
-    }
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.state.streetViewPanorama.setVisible(false);
+        }
+    };
     StreetViewPanorama.prototype.render = function () {
         return null;
     };
-    StreetViewPanorama.defaultProps = {
-        onLoad: function () { }
-    };
-    StreetViewPanorama.contextType = MapContext;
+    StreetViewPanorama.contextType = map_context_1.default;
     return StreetViewPanorama;
 }(React.PureComponent));
-export { StreetViewPanorama };
-export default StreetViewPanorama;
-//# sourceMappingURL=StreetViewPanorama.js.map
+exports.StreetViewPanorama = StreetViewPanorama;
+exports.default = StreetViewPanorama;

lib/components/streetview/StreetViewService.d.ts

 /// <reference types="googlemaps" />
 import * as React from "react";
 interface StreetViewServiceProps {
-    onLoad: (streetViewService: google.maps.StreetViewService) => void;
+    onLoad?: (streetViewService: google.maps.StreetViewService | null) => void;
+    onUnmount?: (streetViewService: google.maps.StreetViewService | null) => void;
 }
@@ -10,9 +11,12 @@ interface StreetViewServiceState {
 export declare class StreetViewService extends React.PureComponent<StreetViewServiceProps, StreetViewServiceState> {
-    static contextType: React.Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     state: {
-        streetViewService: any;
+        streetViewService: null;
     };
-    componentDidMount: () => void;
-    render(): any;
+    setStreetViewServiceCallback: () => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): null;
 }
 export default StreetViewService;
+//# sourceMappingURL=StreetViewService.d.ts.map

lib/components/streetview/StreetViewService.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -14,5 +15,6 @@ var extendStatics = function (d, b) {
 })();
-import * as React from "react";
-import MapContext from "../../map-context";
-var StreetViewService = /** @class */ (function (_super) {
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var map_context_1 = require("../../map-context");
+var StreetViewService = (function (_super) {
     __extends(StreetViewService, _super);
@@ -24,24 +26,34 @@ function StreetViewService() {
         };
-        _this.componentDidMount = function () {
-            var streetViewService = new google.maps.StreetViewService();
-            _this.setState(function () { return ({
-                streetViewService: streetViewService
-            }); }, function () {
-                if (_this.state.streetViewService !== null &&
-                    _this.props.onLoad) {
-                    // @ts-ignore
+        _this.setStreetViewServiceCallback = function () {
+            if (_this.state.streetViewService !== null) {
+                if (_this.props.onLoad) {
                     _this.props.onLoad(_this.state.streetViewService);
                 }
-            });
+            }
         };
         return _this;
     }
+    StreetViewService.prototype.componentDidMount = function () {
+        var streetViewService = new google.maps.StreetViewService();
+        function setStreetViewService() {
+            return {
+                streetViewService: streetViewService
+            };
+        }
+        this.setState(setStreetViewService);
+    };
+    StreetViewService.prototype.componentWillUnmount = function () {
+        if (this.state.streetViewService !== null) {
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.streetViewService);
+            }
+        }
+    };
     StreetViewService.prototype.render = function () {
         return null;
     };
-    StreetViewService.contextType = MapContext;
+    StreetViewService.contextType = map_context_1.default;
     return StreetViewService;
 }(React.PureComponent));
-export { StreetViewService };
-export default StreetViewService;
-//# sourceMappingURL=StreetViewService.js.map
+exports.StreetViewService = StreetViewService;
+exports.default = StreetViewService;

lib/GoogleMap.d.ts

@@ -7,3 +7,3 @@ /// <reference types="googlemaps" />
 interface GoogleMapProps {
-    id: string;
+    id?: string;
     reuseSameInstance?: boolean;
@@ -40,17 +40,18 @@ mapContainerStyle?: React.CSSProperties;
     onZoomChanged?: () => void;
-    onLoad: (map: google.maps.Map) => void | Promise<void>;
+    onLoad?: (map: google.maps.Map) => void | Promise<void>;
+    onUnmount?: (map: google.maps.Map) => void | Promise<void>;
 }
 export declare class GoogleMap extends React.PureComponent<GoogleMapProps, GoogleMapState> {
-    static defaultProps: GoogleMapProps;
-    constructor(props: GoogleMapProps);
     state: GoogleMapState;
     registeredEvents: google.maps.MapsEventListener[];
     mapRef: HTMLElement | null;
-    getInstance: () => google.maps.Map;
-    componentDidMount: () => void;
-    componentDidUpdate: (prevProps: GoogleMapProps) => void;
-    componentWillUnmount: () => void;
-    getRef: (ref: HTMLDivElement) => void;
-    render: () => JSX.Element;
+    getInstance: () => google.maps.Map | null;
+    setMapCallback: () => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: GoogleMapProps): void;
+    componentWillUnmount(): void;
+    getRef: (ref: HTMLDivElement | null) => void;
+    render(): JSX.Element;
 }
 export default GoogleMap;
+//# sourceMappingURL=GoogleMap.d.ts.map

lib/GoogleMap.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -14,2 +15,13 @@ var extendStatics = function (d, b) {
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __rest = (this && this.__rest) || function (s, e) {
@@ -24,6 +36,7 @@ var t = {};
 };
-import * as React from "react";
-import MapContext from "./map-context";
-import { saveInstance, restoreInstance } from "./utils/instance-persistance";
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from "./utils/helper";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var map_context_1 = require("./map-context");
+var instance_persistance_1 = require("./utils/instance-persistance");
+var helper_1 = require("./utils/helper");
 var eventMap = {
@@ -52,3 +65,3 @@ onDblClick: "dblclick",
     extraMapTypes: function (map, extra) {
-        extra.forEach(function (it, i) {
+        extra.forEach(function forEachExtra(it, i) {
             map.mapTypes.set(String(i), it);
@@ -82,6 +95,6 @@ });
 };
-var GoogleMap = /** @class */ (function (_super) {
+var GoogleMap = (function (_super) {
     __extends(GoogleMap, _super);
-    function GoogleMap(props) {
-        var _this = _super.call(this, props) || this;
+    function GoogleMap() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {
@@ -91,5 +104,6 @@ map: null
         _this.registeredEvents = [];
+        _this.mapRef = null;
         _this.getInstance = function () {
-            var _a = _this.props, reuseSameInstance = _a.reuseSameInstance, rest = __rest(_a, ["reuseSameInstance"]);
-            var instance = reuseSameInstance && restoreInstance(rest);
+            var _a = _this.props, reuseSameInstance = _a.reuseSameInstance, id = _a.id, rest = __rest(_a, ["reuseSameInstance", "id"]);
+            var instance = reuseSameInstance && instance_persistance_1.restoreInstance(__assign({}, rest, { id: id || "defaultMapId" }));
             return instance
@@ -99,58 +113,62 @@ ? instance
         };
-        _this.componentDidMount = function () {
-            _this.setState(function () { return ({
-                map: _this.getInstance()
-            }); }, function () {
-                if (_this.state.map !== null) {
-                    _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                        updaterMap: updaterMap,
-                        eventMap: eventMap,
-                        prevProps: {},
-                        nextProps: _this.props,
-                        instance: _this.state.map
-                    });
-                    _this.props.onLoad(_this.state.map);
-                }
-            });
-        };
-        _this.componentDidUpdate = function (prevProps) {
+        _this.setMapCallback = function () {
             if (_this.state.map !== null) {
-                unregisterEvents(_this.registeredEvents);
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                     updaterMap: updaterMap,
                     eventMap: eventMap,
-                    prevProps: prevProps,
+                    prevProps: {},
                     nextProps: _this.props,
                     instance: _this.state.map
                 });
+                if (_this.props.onLoad) {
+                    _this.props.onLoad(_this.state.map);
+                }
             }
         };
-        _this.componentWillUnmount = function () {
-            if (_this.state.map) {
-                var _a = _this.props, reuseSameInstance = _a.reuseSameInstance, id = _a.id;
-                reuseSameInstance && saveInstance(id, _this.state.map);
-                unregisterEvents(_this.registeredEvents);
-            }
-        };
         _this.getRef = function (ref) {
             _this.mapRef = ref;
         };
-        _this.render = function () {
-            var _a = _this.props, id = _a.id, mapContainerStyle = _a.mapContainerStyle, mapContainerClassName = _a.mapContainerClassName, children = _a.children;
-            var map = _this.state.map;
-            return (React.createElement("div", { id: id, ref: _this.getRef, style: mapContainerStyle, className: mapContainerClassName },
-                React.createElement(MapContext.Provider, { value: map }, map !== null ? children : React.createElement(React.Fragment, null))));
-        };
-        _this.mapRef = null;
         return _this;
     }
-    GoogleMap.defaultProps = {
-        id: "defaultMapId",
-        reuseSameInstance: false,
-        onLoad: function () { }
+    GoogleMap.prototype.componentDidMount = function () {
+        var map = this.getInstance();
+        function setMap() {
+            return {
+                map: map
+            };
+        }
+        this.setState(setMap, this.setMapCallback);
     };
+    GoogleMap.prototype.componentDidUpdate = function (prevProps) {
+        if (this.state.map !== null) {
+            helper_1.unregisterEvents(this.registeredEvents);
+            this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                updaterMap: updaterMap,
+                eventMap: eventMap,
+                prevProps: prevProps,
+                nextProps: this.props,
+                instance: this.state.map
+            });
+        }
+    };
+    GoogleMap.prototype.componentWillUnmount = function () {
+        if (this.state.map !== null) {
+            if (this.props.reuseSameInstance) {
+                instance_persistance_1.saveInstance(this.props.id || "defaultMapId", this.state.map);
+            }
+            if (this.props.onUnmount) {
+                this.props.onUnmount(this.state.map);
+            }
+            helper_1.unregisterEvents(this.registeredEvents);
+        }
+    };
+    GoogleMap.prototype.render = function () {
+        return (React.createElement("div", { id: this.props.id, ref: this.getRef, style: this.props.mapContainerStyle, className: this.props.mapContainerClassName },
+            React.createElement(map_context_1.default.Provider, { value: this.state.map }, this.state.map !== null
+                ? this.props.children
+                : React.createElement(React.Fragment, null))));
+    };
     return GoogleMap;
 }(React.PureComponent));
-export { GoogleMap };
-export default GoogleMap;
-//# sourceMappingURL=GoogleMap.js.map
+exports.GoogleMap = GoogleMap;
+exports.default = GoogleMap;

lib/index.d.ts

@@ -24,1 +24,2 @@ export { default as GoogleMap } from "./GoogleMap";
 export { default as Autocomplete } from "./components/places/Autocomplete";
+//# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -1,24 +0,48 @@
-export { default as GoogleMap } from "./GoogleMap";
-export { default as LoadScript } from "./LoadScript";
-export { default as TrafficLayer } from "./components/maps/TrafficLayer";
-export { default as BicyclingLayer } from "./components/maps/BicyclingLayer";
-export { default as DrawingManager } from "./components/drawing/DrawingManager";
-export { default as Marker } from "./components/drawing/Marker";
-export { default as MarkerClusterer } from "./components/addons/MarkerClusterer";
-export { default as InfoWindow } from "./components/drawing/InfoWindow";
-export { default as Polyline } from "./components/drawing/Polyline";
-export { default as Polygon } from "./components/drawing/Polygon";
-export { default as Rectangle } from "./components/drawing/Rectangle";
-export { default as Circle } from "./components/drawing/Circle";
-export { default as Data } from "./components/drawing/Data";
-export { default as KmlLayer } from "./components/kml/KmlLayer";
-export { default as OverlayView } from "./components/dom/OverlayView";
-export { default as GroundOverlay } from "./components/overlays/GroundOverlay";
-export { default as HeatmapLayer } from "./components/heatmap/HeatmapLayer";
-export { default as StreetViewPanorama } from "./components/streetview/StreetViewPanorama";
-export { default as StreetViewService } from "./components/streetview/StreetViewService";
-export { default as DirectionsService } from "./components/directions/DirectionsService";
-export { default as DirectionsRenderer } from "./components/directions/DirectionsRenderer";
-export { default as StandaloneSearchBox } from "./components/places/StandaloneSearchBox";
-export { default as Autocomplete } from "./components/places/Autocomplete";
-//# sourceMappingURL=index.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var GoogleMap_1 = require("./GoogleMap");
+exports.GoogleMap = GoogleMap_1.default;
+var LoadScript_1 = require("./LoadScript");
+exports.LoadScript = LoadScript_1.default;
+var TrafficLayer_1 = require("./components/maps/TrafficLayer");
+exports.TrafficLayer = TrafficLayer_1.default;
+var BicyclingLayer_1 = require("./components/maps/BicyclingLayer");
+exports.BicyclingLayer = BicyclingLayer_1.default;
+var DrawingManager_1 = require("./components/drawing/DrawingManager");
+exports.DrawingManager = DrawingManager_1.default;
+var Marker_1 = require("./components/drawing/Marker");
+exports.Marker = Marker_1.default;
+var MarkerClusterer_1 = require("./components/addons/MarkerClusterer");
+exports.MarkerClusterer = MarkerClusterer_1.default;
+var InfoWindow_1 = require("./components/drawing/InfoWindow");
+exports.InfoWindow = InfoWindow_1.default;
+var Polyline_1 = require("./components/drawing/Polyline");
+exports.Polyline = Polyline_1.default;
+var Polygon_1 = require("./components/drawing/Polygon");
+exports.Polygon = Polygon_1.default;
+var Rectangle_1 = require("./components/drawing/Rectangle");
+exports.Rectangle = Rectangle_1.default;
+var Circle_1 = require("./components/drawing/Circle");
+exports.Circle = Circle_1.default;
+var Data_1 = require("./components/drawing/Data");
+exports.Data = Data_1.default;
+var KmlLayer_1 = require("./components/kml/KmlLayer");
+exports.KmlLayer = KmlLayer_1.default;
+var OverlayView_1 = require("./components/dom/OverlayView");
+exports.OverlayView = OverlayView_1.default;
+var GroundOverlay_1 = require("./components/overlays/GroundOverlay");
+exports.GroundOverlay = GroundOverlay_1.default;
+var HeatmapLayer_1 = require("./components/heatmap/HeatmapLayer");
+exports.HeatmapLayer = HeatmapLayer_1.default;
+var StreetViewPanorama_1 = require("./components/streetview/StreetViewPanorama");
+exports.StreetViewPanorama = StreetViewPanorama_1.default;
+var StreetViewService_1 = require("./components/streetview/StreetViewService");
+exports.StreetViewService = StreetViewService_1.default;
+var DirectionsService_1 = require("./components/directions/DirectionsService");
+exports.DirectionsService = DirectionsService_1.default;
+var DirectionsRenderer_1 = require("./components/directions/DirectionsRenderer");
+exports.DirectionsRenderer = DirectionsRenderer_1.default;
+var StandaloneSearchBox_1 = require("./components/places/StandaloneSearchBox");
+exports.StandaloneSearchBox = StandaloneSearchBox_1.default;
+var Autocomplete_1 = require("./components/places/Autocomplete");
+exports.Autocomplete = Autocomplete_1.default;

lib/LoadScript.d.ts

@@ -1,2 +0,2 @@
-import { Component, RefObject, ReactNode } from "react";
+import * as React from "react";
 interface LoadScriptState {
@@ -8,23 +8,21 @@ loaded: boolean;
     googleMapsApiKey: string;
-    language?: string;
-    region?: string;
-    version?: string;
-    loadingElement: ReactNode;
-    onLoad: () => void;
-    onError: (error: Error) => void;
-    onUnmount: () => void;
+    language: string;
+    region: string;
+    version: string;
+    loadingElement?: React.ReactNode;
+    onLoad?: () => void;
+    onError?: (error: Error) => void;
+    onUnmount?: () => void;
     libraries: string[];
-    preventGoogleFontsLoading: boolean;
+    preventGoogleFontsLoading?: boolean;
 }
-declare class LoadScript extends Component<LoadScriptProps, LoadScriptState> {
+declare class LoadScript extends React.PureComponent<LoadScriptProps, LoadScriptState> {
     static defaultProps: {
-        onLoad: () => void;
-        onError: () => void;
-        onUnmount: () => void;
-        loadingElement: JSX.Element;
-        preventGoogleFontsLoading: boolean;
-        libraries: any[];
+        libraries: never[];
     };
-    check: RefObject<HTMLDivElement>;
-    constructor(props: LoadScriptProps);
+    check: React.RefObject<HTMLDivElement>;
+    state: {
+        loaded: boolean;
+    };
+    cleanupCallback: () => void;
     componentDidMount(): void;
@@ -39,1 +37,2 @@ componentDidUpdate(prevProps: LoadScriptProps): void;
 export default LoadScript;
+//# sourceMappingURL=LoadScript.d.ts.map

lib/LoadScript.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -49,29 +50,39 @@ var extendStatics = function (d, b) {
 };
-import * as React from "react";
-import { Component, createRef } from "react";
-import { injectScript } from "./utils/injectscript";
-import { preventGoogleFonts } from "./utils/prevent-google-fonts";
-import { isBrowser } from "./utils/isbrowser";
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var injectscript_1 = require("./utils/injectscript");
+var prevent_google_fonts_1 = require("./utils/prevent-google-fonts");
+var isbrowser_1 = require("./utils/isbrowser");
 var cleaningUp = false;
-var LoadScript = /** @class */ (function (_super) {
+var DefaultLoadingElement = function () { return (React.createElement("div", null, "Loading...")); };
+var LoadScript = (function (_super) {
     __extends(LoadScript, _super);
-    function LoadScript(props) {
-        var _this = _super.call(this, props) || this;
+    function LoadScript() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.check = React.createRef();
+        _this.state = {
+            loaded: false
+        };
+        _this.cleanupCallback = function () {
+            delete window.google;
+            _this.injectScript();
+        };
         _this.isCleaningUp = function () { return __awaiter(_this, void 0, void 0, function () {
+            function promiseCallback(resolve) {
+                if (!cleaningUp) {
+                    resolve();
+                }
+                else {
+                    if (isbrowser_1.isBrowser) {
+                        var timer_1 = window.setInterval(function interval() {
+                            if (!cleaningUp) {
+                                window.clearInterval(timer_1);
+                                resolve();
+                            }
+                        }, 1);
+                    }
+                }
+            }
             return __generator(this, function (_a) {
-                return [2 /*return*/, new Promise(function (resolve) {
-                        if (!cleaningUp) {
-                            resolve();
-                        }
-                        else {
-                            if (isBrowser) {
-                                var timer_1 = window.setInterval(function () {
-                                    if (!cleaningUp) {
-                                        window.clearInterval(timer_1);
-                                        resolve();
-                                    }
-                                }, 1);
-                            }
-                        }
-                    })];
+                return [2, new Promise(promiseCallback)];
             });
@@ -87,6 +98,6 @@ }); };
                 .call(document.getElementsByTagName("script"))
-                .filter(function (script) {
+                .filter(function filter(script) {
                 return script.src.includes("maps.googleapis");
             })
-                .forEach(function (script) {
+                .forEach(function forEach(script) {
                 if (script.parentNode) {
@@ -98,7 +109,7 @@ script.parentNode.removeChild(script);
                 .call(document.getElementsByTagName("link"))
-                .filter(function (link) {
-                return link.href ===
+                .filter(function filter(link) {
+                link.href ===
                     "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans";
             })
-                .forEach(function (link) {
+                .forEach(function forEach(link) {
                 if (link.parentNode) {
@@ -110,4 +121,6 @@ link.parentNode.removeChild(link);
                 .call(document.getElementsByTagName("style"))
-                .filter(function (style) { return style.innerText.includes(".gm-"); })
-                .forEach(function (style) {
+                .filter(function filter(style) {
+                return style.innerText.includes(".gm-");
+            })
+                .forEach(function forEach(style) {
                 if (style.parentNode) {
@@ -119,30 +132,31 @@ style.parentNode.removeChild(style);
         _this.injectScript = function () {
-            var _a = _this.props, id = _a.id, googleMapsApiKey = _a.googleMapsApiKey, language = _a.language, region = _a.region, version = _a.version, libraries = _a.libraries, preventGoogleFontsLoading = _a.preventGoogleFontsLoading;
-            if (preventGoogleFontsLoading) {
-                preventGoogleFonts();
+            if (_this.props.preventGoogleFontsLoading) {
+                prevent_google_fonts_1.preventGoogleFonts();
             }
-            injectScript({
-                id: id,
-                url: "https://maps.googleapis.com/maps/api/js?v=" + version + "&key=" + googleMapsApiKey + "&language=" + language + "&region=" + region + (libraries ? "&libraries=" + libraries.join(",") : "")
-            })
+            var injectScriptOptions = {
+                id: _this.props.id,
+                url: "https://maps.googleapis.com/maps/api/js?v=" + _this.props.version + "&key=" + _this.props.googleMapsApiKey + "&language=" + _this.props.language + "&region=" + _this.props.region + (_this.props.libraries ? "&libraries=" + _this.props.libraries.join(",") : "")
+            };
+            injectscript_1.injectScript(injectScriptOptions)
                 .then(function () {
-                _this.props.onLoad();
-                _this.setState(function () { return ({
-                    loaded: true
-                }); });
+                if (_this.props.onLoad) {
+                    _this.props.onLoad();
+                }
+                _this.setState(function setLoaded() {
+                    return {
+                        loaded: true
+                    };
+                });
             })
                 .catch(function (err) {
-                _this.props.onError(err);
-                throw new Error("\nThere has been an Error with loading Google Maps API script, please check that you provided all required props to <LoadScript />\nProps you have provided:\ngoogleMapsApiKey: " + _this.props.googleMapsApiKey + "\nlanguage: " + _this.props.language + "\nregion: " + _this.props.region + "\nversion: " + _this.props.version + "\nlibraries: " + (_this.props.libraries || []).join(",") + "\nOtherwise it is a Network issues.\n");
+                if (_this.props.onError) {
+                    _this.props.onError(err);
+                }
+                console.error("\n          There has been an Error with loading Google Maps API script, please check that you provided all required props to <LoadScript />\n          Props you have provided:\n          googleMapsApiKey: " + _this.props.googleMapsApiKey + "\n          language: " + _this.props.language + "\n          region: " + _this.props.region + "\n          version: " + _this.props.version + "\n          libraries: " + (_this.props.libraries || []).join(",") + "\n          Otherwise it is a Network issues.\n        ");
             });
         };
-        _this.state = {
-            loaded: false
-        };
-        _this.check = createRef();
         return _this;
     }
     LoadScript.prototype.componentDidMount = function () {
-        if (isBrowser) {
-            // @ts-ignore
+        if (isbrowser_1.isBrowser) {
             if (window.google && !cleaningUp) {
@@ -156,14 +170,13 @@ console.error("google api is already presented");
     LoadScript.prototype.componentDidUpdate = function (prevProps) {
-        var _this = this;
-        if (isBrowser && prevProps.language !== this.props.language) {
+        if (this.props.libraries !== prevProps.libraries) {
+            console.warn('Performance warning! Loadscript has been reloaded unintentionally! You should not pass `libraries` prop as new array. Please keep an array of libraries as static class property for Components and PureComponents, or just a const variable ounside of component, or somwhere in config files or ENV variables');
+        }
+        if (isbrowser_1.isBrowser &&
+            prevProps.language !== this.props.language) {
             this.cleanup();
-            // TODO: refactor to use gDSFP
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState(function () { return ({
-                loaded: false
-            }); }, function () {
-                //@ts-ignore
-                delete window.google;
-                _this.injectScript();
-            });
+            this.setState(function setLoaded() {
+                return {
+                    loaded: false
+                };
+            }, this.cleanupCallback);
         }
@@ -173,28 +186,28 @@ };
         var _this = this;
-        if (isBrowser) {
+        if (isbrowser_1.isBrowser) {
             this.cleanup();
-            setTimeout(function () {
+            var timeoutCallback = function () {
                 if (!_this.check.current) {
-                    //@ts-ignore
                     delete window.google;
                     cleaningUp = false;
                 }
-            }, 1);
-            this.props.onUnmount();
+            };
+            setTimeout(timeoutCallback, 1);
+            if (this.props.onUnmount) {
+                this.props.onUnmount();
+            }
         }
     };
     LoadScript.prototype.render = function () {
-        return (React.createElement("div", { ref: this.check }, this.state.loaded ? this.props.children : this.props.loadingElement));
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { ref: this.check }),
+            this.state.loaded
+                ? this.props.children
+                : (this.props.loadingElement || React.createElement(DefaultLoadingElement, null))));
     };
     LoadScript.defaultProps = {
-        onLoad: function () { },
-        onError: function () { },
-        onUnmount: function () { },
-        loadingElement: React.createElement("div", null, "Loading..."),
-        preventGoogleFontsLoading: false,
         libraries: []
     };
     return LoadScript;
-}(Component));
-export default LoadScript;
-//# sourceMappingURL=LoadScript.js.map
+}(React.PureComponent));
+exports.default = LoadScript;

lib/map-context.d.ts

 /// <reference types="googlemaps" />
 /// <reference types="react" />
-declare const MapContext: import("react").Context<google.maps.Map>;
+declare const MapContext: import("react").Context<google.maps.Map | null>;
 export default MapContext;
+//# sourceMappingURL=map-context.d.ts.map

lib/map-context.js

@@ -1,4 +0,5 @@
-import { createContext } from "react";
-var MapContext = createContext(null);
-export default MapContext;
-//# sourceMappingURL=map-context.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var MapContext = react_1.createContext(null);
+exports.default = MapContext;

lib/utils/foreach.d.ts

@@ -1,1 +0,2 @@
-export declare const forEach: (obj: any, fn: any) => any;
+export declare function forEach(obj: any, fn: any): any;
+//# sourceMappingURL=foreach.d.ts.map

lib/utils/foreach.js

@@ -1,4 +0,8 @@
-export var forEach = function (obj, fn) {
-    Object.keys(obj).forEach(function (key) { return fn(obj[key], key); });
-};
-//# sourceMappingURL=foreach.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function forEach(obj, fn) {
+    Object.keys(obj).forEach(function iterator(key) {
+        return fn(obj[key], key);
+    });
+}
+exports.forEach = forEach;

lib/utils/helper.d.ts

@@ -11,1 +11,2 @@ /// <reference types="googlemaps" />
 }): google.maps.MapsEventListener[];
+//# sourceMappingURL=helper.d.ts.map

lib/utils/helper.js

@@ -1,4 +0,5 @@
-/* eslint-disable filenames/match-regex */
-import { reduce } from "./reduce";
-import { forEach } from "./foreach";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var reduce_1 = require("./reduce");
+var foreach_1 = require("./foreach");
 var applyUpdaterToNextProps = function (updaterMap, prevProps, nextProps, instance) {
@@ -13,7 +14,7 @@ var map = {};
     };
-    forEach(updaterMap, iter);
+    foreach_1.forEach(updaterMap, iter);
     return map;
 };
-export function registerEvents(props, instance, eventMap) {
-    var registeredList = reduce(eventMap, function (acc, googleEventName, onEventName) {
+function registerEvents(props, instance, eventMap) {
+    var registeredList = reduce_1.reduce(eventMap, function reducer(acc, googleEventName, onEventName) {
         if (typeof props[onEventName] === "function") {
@@ -26,10 +27,12 @@ acc.push(google.maps.event.addListener(instance, googleEventName, props[onEventName]));
 }
+exports.registerEvents = registerEvents;
 function unregisterEvent(registered) {
     google.maps.event.removeListener(registered);
 }
-export function unregisterEvents(events) {
+function unregisterEvents(events) {
     if (events === void 0) { events = []; }
     events.map(unregisterEvent);
 }
-export function applyUpdatersToPropsAndRegisterEvents(_a) {
+exports.unregisterEvents = unregisterEvents;
+function applyUpdatersToPropsAndRegisterEvents(_a) {
     var updaterMap = _a.updaterMap, eventMap = _a.eventMap, prevProps = _a.prevProps, nextProps = _a.nextProps, instance = _a.instance;
@@ -39,2 +42,2 @@ applyUpdaterToNextProps(updaterMap, prevProps, nextProps, instance);
 }
-//# sourceMappingURL=helper.js.map
+exports.applyUpdatersToPropsAndRegisterEvents = applyUpdatersToPropsAndRegisterEvents;

lib/utils/injectscript.d.ts

@@ -7,1 +7,2 @@ interface InjectScriptArg {
 export {};
+//# sourceMappingURL=injectscript.d.ts.map

lib/utils/injectscript.js

@@ -1,8 +0,10 @@
-import { isBrowser } from "./isbrowser";
-export var injectScript = function (_a) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var isbrowser_1 = require("./isbrowser");
+exports.injectScript = function (_a) {
     var url = _a.url, id = _a.id;
-    if (!isBrowser) {
+    if (!isbrowser_1.isBrowser) {
         return Promise.reject(new Error("document is undefined"));
     }
-    return new Promise(function (resolve, reject) {
+    return new Promise(function injectScriptCallback(resolve, reject) {
         if (document.getElementById(id)) {
@@ -16,3 +18,3 @@ return resolve(id);
         script.async = true;
-        script.onload = function () {
+        script.onload = function onload() {
             resolve(id);
@@ -24,2 +26,1 @@ };
 };
-//# sourceMappingURL=injectscript.js.map

lib/utils/instance-persistance.d.ts

@@ -13,1 +13,2 @@ /// <reference types="googlemaps" />
 export declare const saveInstance: (id: string, map: google.maps.Map) => void;
+//# sourceMappingURL=instance-persistance.d.ts.map

lib/utils/instance-persistance.js

@@ -0,1 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 var clearChildren = function (node) {
@@ -22,5 +24,4 @@ if (node) {
 };
-export var restoreInstance = function (_a) {
+exports.restoreInstance = function (_a) {
     var id = _a.id, zoom = _a.zoom, center = _a.center, mapContainerStyle = _a.mapContainerStyle, options = _a.options;
-    // @ts-ignore
     var map = window[getMapInstanceId(id)];
@@ -42,5 +43,4 @@ var hiddenContainer = getHiddenMapContainer(id);
             mapContainer_1.appendChild(hiddenContainer.children[0]);
-            if (mapContainerStyle) {
-                Object.keys(mapContainerStyle).forEach(function (styleKey) {
-                    // TODO
+            if (typeof mapContainerStyle === 'object') {
+                Object.keys(mapContainerStyle).forEach(function forEachStyle(styleKey) {
                     mapContainer_1.style[styleKey] = mapContainerStyle[styleKey];
@@ -54,3 +54,3 @@ });
 };
-export var saveInstance = function (id, map) {
+exports.saveInstance = function (id, map) {
     var hiddenContainer = getHiddenMapContainer(id);
@@ -62,5 +62,3 @@ clearChildren(hiddenContainer);
     }
-    // @ts-ignore
     window[getMapInstanceId(id)] = map;
 };
-//# sourceMappingURL=instance-persistance.js.map

lib/utils/isbrowser.d.ts

 export declare const isBrowser: boolean;
+//# sourceMappingURL=isbrowser.d.ts.map

lib/utils/isbrowser.js

@@ -1,2 +0,3 @@
-export var isBrowser = typeof document !== "undefined";
-//# sourceMappingURL=isbrowser.js.map
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBrowser = typeof document !== "undefined";

lib/utils/prevent-google-fonts.d.ts

 export declare const preventGoogleFonts: () => void;
+//# sourceMappingURL=prevent-google-fonts.d.ts.map

lib/utils/prevent-google-fonts.js

@@ -1,5 +0,5 @@
-// Preventing the Google Maps libary from downloading an extra font
-export var preventGoogleFonts = function () {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.preventGoogleFonts = function () {
     var isRobotoStyle = function (element) {
-        // roboto font download
         if (element.href &&
@@ -9,15 +9,9 @@ element.href.indexOf("https://fonts.googleapis.com/css?family=Roboto") === 0) {
         }
-        // roboto style elements
         if (element.tagName.toLowerCase() === "style" &&
-            // @ts-ignore
             element.styleSheet &&
-            // @ts-ignore
             element.styleSheet.cssText &&
-            // @ts-ignore
             element.styleSheet.cssText.replace("\r\n", "").indexOf(".gm-style") === 0) {
-            // @ts-ignore
             element.styleSheet.cssText = "";
             return true;
         }
-        // roboto style elements for other browsers
         if (element.tagName.toLowerCase() === "style" &&
@@ -29,5 +23,3 @@ element.innerHTML &&
         }
-        // when google tries to add empty style
         if (element.tagName.toLowerCase() === "style" &&
-            // @ts-ignore
             !element.styleSheet &&
@@ -39,22 +31,13 @@ !element.innerHTML) {
     };
-    // we override these methods only for one particular head element
-    // default methods for other elements are not affected
     var head = document.getElementsByTagName("head")[0];
-    var insertBefore = head.insertBefore;
-    // TODO: adding return before reflect solves the TS issue
-    //@ts-ignore
-    head.insertBefore = function (newElement, referenceElement) {
+    head.insertBefore = function insertBefore(newElement, referenceElement) {
         if (!isRobotoStyle(newElement)) {
-            Reflect.apply(insertBefore, head, [newElement, referenceElement]);
+            Reflect.apply(head.insertBefore, head, [newElement, referenceElement]);
         }
     };
-    var appendChild = head.appendChild;
-    // TODO: adding return before reflect solves the TS issue
-    //@ts-ignore
-    head.appendChild = function (textNode) {
+    head.appendChild = function appendChild(textNode) {
         if (!isRobotoStyle(textNode)) {
-            Reflect.apply(appendChild, head, [textNode]);
+            Reflect.apply(head.appendChild, head, [textNode]);
         }
     };
 };
-//# sourceMappingURL=prevent-google-fonts.js.map

lib/utils/reduce.d.ts

 export declare const reduce: (obj: any, fn: any, acc: any) => any;
+//# sourceMappingURL=reduce.d.ts.map

lib/utils/reduce.js

@@ -1,4 +0,8 @@
-export var reduce = function (obj, fn, acc) {
-    return Object.keys(obj).reduce(function (newAcc, key) { return fn(newAcc, obj[key], key); }, acc);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reduce = function (obj, fn, acc) {
+    return Object.keys(obj)
+        .reduce(function reducer(newAcc, key) {
+        return fn(newAcc, obj[key], key);
+    }, acc);
 };
-//# sourceMappingURL=reduce.js.map

package.json

 {
   "name": "@react-google-maps/api",
-  "version": "1.2.0-alpha.4",
+  "version": "1.2.0-alpha.6",
   "description": "React.js Google Maps API integration",
@@ -34,16 +34,24 @@ "license": "MIT",
     "Google",
+    "Google Maps",
+    "google maps",
+    "google-maps",
+    "@google-maps",
+    "google-maps-api",
+    "@google-maps-api",
     "Map",
+    "Maps",
     "API",
+    "GoogleMap",
     "react-component",
-    "addons/InfoBox",
     "addons/MarkerClusterer",
-    "Circle",
-    "DirectionsRenderer",
+    "directions/DirectionsRenderer",
+    "directions/DirectionsService",
     "drawing/DrawingManager",
-    "GoogleMap",
+    "places/SearchBox",
     "InfoWindow",
     "KmlLayer",
     "Marker",
+    "MarkerClusterer",
     "OverlayView",
-    "places/SearchBox",
+    "Circle",
     "Polygon",
@@ -56,3 +64,4 @@ "Polyline",
     "withGoogleMap",
-    "ScriptLoader"
+    "ScriptLoader",
+    "Typescript"
   ],
@@ -71,7 +80,8 @@ "scripts": {
   "dependencies": {
+    "@react-google-maps/marker-clusterer": "1.2.0-alpha.5",
     "@types/googlemaps": "3.30.19",
-    "@types/markerclustererplus": "2.1.33",
-    "google-maps-infobox": "2.0.0",
-    "invariant": "2.2.4",
-    "marker-clusterer-plus": "2.1.4"
+    "@types/invariant": "^2.2.29",
+    "@types/react": "16.8.10",
+    "@types/react-dom": "16.8.3",
+    "invariant": "^2.2.4"
   },
@@ -83,11 +93,9 @@ "peerDependencies": {
   "devDependencies": {
+    "@getify/eslint-plugin-proper-arrows": "7.1.0",
     "@types/babel-types": "7.0.6",
-    "@types/invariant": "2.2.29",
-    "@types/react": "16.8.7",
-    "@typescript-eslint/eslint-plugin": "1.4.2",
-    "@typescript-eslint/parser": "1.4.2",
+    "@typescript-eslint/eslint-plugin": "1.5.0",
+    "@typescript-eslint/parser": "1.5.0",
     "acorn": "6.1.1",
     "awesome-typescript-loader": "5.2.1",
     "eslint": "5.15.3",
-    "eslint-config-prettier": "4.1.0",
     "eslint-config-standard": "12.0.0",
@@ -107,5 +115,3 @@ "eslint-config-standard-react": "7.0.2",
     "eslint-plugin-optimize-regex": "1.1.6",
-    "eslint-plugin-prettier": "3.0.1",
     "eslint-plugin-promise": "4.0.1",
-    "eslint-plugin-promiseparams": "1.0.8",
     "eslint-plugin-react": "7.12.4",
@@ -117,12 +123,11 @@ "eslint-plugin-react-functional-set-state": "1.2.1",
     "husky": "1.3.1",
-    "prettier": "1.16.4",
-    "react": "16.8.4",
+    "react": "16.8.5",
     "react-docgen-typescript": "1.12.3",
-    "react-dom": "16.8.4",
-    "react-styleguidist": "9.0.4",
+    "react-dom": "16.8.5",
+    "react-styleguidist": "8.0.6",
     "rimraf": "2.6.3",
-    "typescript": "3.3.3333",
+    "typescript": "3.3.4000",
     "webpack": "4.29.6"
   },
-  "gitHead": "6a912d4e4ae5a883c106548b54250fc754a22f0a"
+  "gitHead": "4c487da5fec5e5d9e86f8d445248353b1f532a59"
 }

src/components/addons/MarkerClusterer.md

@@ -6,27 +6,2 @@ # MarkerClusterer example
 const ScriptLoaded = require("../../docs/ScriptLoaded").default;
-const locations = [
-        {lat: -31.563910, lng: 147.154312},
-        {lat: -33.718234, lng: 150.363181},
-        {lat: -33.727111, lng: 150.371124},
-        {lat: -33.848588, lng: 151.209834},
-        {lat: -33.851702, lng: 151.216968},
-        {lat: -34.671264, lng: 150.863657},
-        {lat: -35.304724, lng: 148.662905},
-        {lat: -36.817685, lng: 175.699196},
-        {lat: -36.828611, lng: 175.790222},
-        {lat: -37.750000, lng: 145.116667},
-        {lat: -37.759859, lng: 145.128708},
-        {lat: -37.765015, lng: 145.133858},
-        {lat: -37.770104, lng: 145.143299},
-        {lat: -37.773700, lng: 145.145187},
-        {lat: -37.774785, lng: 145.137978},
-        {lat: -37.819616, lng: 144.968119},
-        {lat: -38.330766, lng: 144.695692},
-        {lat: -39.927193, lng: 175.053218},
-        {lat: -41.330162, lng: 174.865694},
-        {lat: -42.734358, lng: 147.439506},
-        {lat: -42.734358, lng: 147.501315},
-        {lat: -42.735258, lng: 147.438000},
-        {lat: -43.999792, lng: 170.463352}
-      ];
 
@@ -43,6 +18,37 @@ <ScriptLoaded>
   >
-    <MarkerClusterer imagePath="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m">
-    {
-      (clusterer) => locations.map(location => <Marker position={location} clusterer={clusterer}/>)
-    }
+    <MarkerClusterer
+      imagePath="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
+    >
+      {
+        (clusterer) => [
+          {lat: -31.563910, lng: 147.154312},
+          {lat: -33.718234, lng: 150.363181},
+          {lat: -33.727111, lng: 150.371124},
+          {lat: -33.848588, lng: 151.209834},
+          {lat: -33.851702, lng: 151.216968},
+          {lat: -34.671264, lng: 150.863657},
+          {lat: -35.304724, lng: 148.662905},
+          {lat: -36.817685, lng: 175.699196},
+          {lat: -36.828611, lng: 175.790222},
+          {lat: -37.750000, lng: 145.116667},
+          {lat: -37.759859, lng: 145.128708},
+          {lat: -37.765015, lng: 145.133858},
+          {lat: -37.770104, lng: 145.143299},
+          {lat: -37.773700, lng: 145.145187},
+          {lat: -37.774785, lng: 145.137978},
+          {lat: -37.819616, lng: 144.968119},
+          {lat: -38.330766, lng: 144.695692},
+          {lat: -39.927193, lng: 175.053218},
+          {lat: -41.330162, lng: 174.865694},
+          {lat: -42.734358, lng: 147.439506},
+          {lat: -42.734358, lng: 147.501315},
+          {lat: -42.735258, lng: 147.438000},
+          {lat: -43.999792, lng: 170.463352}
+        ].map(location => (
+          <Marker
+            position={location}
+            clusterer={clusterer}
+          />
+        ))
+      }
     </MarkerClusterer>
@@ -49,0 +55,0 @@ </GoogleMap>

src/components/dom/dom-helper.ts

 /* eslint-disable filenames/match-regex */
-export const getOffsetOverride = (
+export function getOffsetOverride(
   containerElement: HTMLElement,
@@ -8,9 +8,10 @@ getPixelPositionOffset?: (
   ) => { x: number; y: number }
-) =>
-  typeof getPixelPositionOffset === "function"
+) {
+  return typeof getPixelPositionOffset === "function"
     ? getPixelPositionOffset(
-        containerElement.offsetWidth,
-        containerElement.offsetHeight
-      )
+      containerElement.offsetWidth,
+      containerElement.offsetHeight
+    )
     : {}
+}
 
@@ -25,4 +26,5 @@ const createLatLng = (inst: any, Type: any): any => new Type(inst.lat, inst.lng)
 
-const ensureOfType = (inst: any, type: any, factory: any) =>
-  inst instanceof type ? inst : factory(inst, type)
+const ensureOfType = (inst: any, type: any, factory: any) => {
+  return inst instanceof type ? inst : factory(inst, type)
+}
 
@@ -79,14 +81,16 @@ const getLayoutStylesByBounds = (
   bounds?: google.maps.LatLngBounds,
+  // eslint-disable-next-line @getify/proper-arrows/params
   position?: google.maps.LatLng
-) =>
-  bounds !== undefined
+) => {
+  return bounds !== undefined
     ? getLayoutStylesByBounds(
-        mapCanvasProjection,
-        offset,
-        ensureOfType(bounds, google.maps.LatLngBounds, createLatLngBounds)
-      )
+      mapCanvasProjection,
+      offset,
+      ensureOfType(bounds, google.maps.LatLngBounds, createLatLngBounds)
+    )
     : getLayoutStylesByPosition(
-        mapCanvasProjection,
-        offset,
-        ensureOfType(position, google.maps.LatLng, createLatLng)
-      )
+      mapCanvasProjection,
+      offset,
+      ensureOfType(position, google.maps.LatLng, createLatLng)
+    )
+}

src/components/drawing/Polygon.md

@@ -7,44 +7,46 @@ # Polygon example
 
-const SYDNEY_COORDS = [
-  { lat: -33.858, lng: 151.213 },
-  { lat: -33.859, lng: 151.222 },
-  { lat: -33.866, lng: 151.215 }
-]
-
-const sydneyPolygonOptions = {
-  fillColor: 'lightblue',
-  fillOpacity: 1,
-  strokeColor: 'red',
-  strokeOpacity: 1,
-  strokeWeight: 2,
-  clickable: false,
-  draggable: false,
-  editable: false,
-  geodesic: false,
-  paths: SYDNEY_COORDS,
-  zIndex: 1
-}
-
-<ScriptLoaded>
-  <GoogleMap
-    id="marker-example"
-    mapContainerStyle={{
-      height: "400px",
-      width: "800px"
-    }}
-    zoom={2}
-    center={{
-      lat: 0,
-      lng: -180
-    }}
-  >
-    <Polygon
-      onLoad={polygon => {
-        console.log('polygon: ', polygon)
+<>
+  <ScriptLoaded>
+    <GoogleMap
+      id="marker-example"
+      mapContainerStyle={{
+        height: "400px",
+        width: "800px"
       }}
-      path={SYDNEY_COORDS}
-      options={sydneyPolygonOptions}
-    />
-  </GoogleMap>
-</ScriptLoaded>
+      zoom={2}
+      center={{
+        lat: 0,
+        lng: -180
+      }}
+    >
+      <Polygon
+        onLoad={polygon => {
+          console.log('polygon: ', polygon)
+        }}
+        path={[
+          { lat: -33.858, lng: 151.213 },
+          { lat: -33.859, lng: 151.222 },
+          { lat: -33.866, lng: 151.215 }
+        ]}
+        options={{
+          fillColor: 'lightblue',
+          fillOpacity: 1,
+          strokeColor: 'red',
+          strokeOpacity: 1,
+          strokeWeight: 2,
+          clickable: false,
+          draggable: false,
+          editable: false,
+          geodesic: false,
+          paths: [
+            { lat: -33.858, lng: 151.213 },
+            { lat: -33.859, lng: 151.222 },
+            { lat: -33.866, lng: 151.215 }
+          ],
+          zIndex: 1
+        }}
+      />
+    </GoogleMap>
+  </ScriptLoaded>
+</>
 ```

src/components/drawing/Polyline.md

@@ -7,23 +7,2 @@ # Polyline example
 
-const POLYLINE_COORD = [
-  {lat: 37.772, lng: -122.214},
-  {lat: 21.291, lng: -157.821},
-  {lat: -18.142, lng: 178.431},
-  {lat: -27.467, lng: 153.027}
-]
-
-const polylineOptions = {
-  strokeColor: '#FF0000',
-  strokeOpacity: 0.8,
-  strokeWeight: 2,
-  fillColor: '#FF0000',
-  fillOpacity: 0.35,
-  clickable: false,
-  draggable: false,
-  editable: false,
-  visible: true,
-  radius: 30000,
-  paths: POLYLINE_COORD,
-  zIndex: 1
-}
 <ScriptLoaded>
@@ -46,4 +25,27 @@ <GoogleMap
       }}
-      path={POLYLINE_COORD}
-      options={polylineOptions}
+      path={[
+        {lat: 37.772, lng: -122.214},
+        {lat: 21.291, lng: -157.821},
+        {lat: -18.142, lng: 178.431},
+        {lat: -27.467, lng: 153.027}
+      ]}
+      options={{
+        strokeColor: '#FF0000',
+        strokeOpacity: 0.8,
+        strokeWeight: 2,
+        fillColor: '#FF0000',
+        fillOpacity: 0.35,
+        clickable: false,
+        draggable: false,
+        editable: false,
+        visible: true,
+        radius: 30000,
+        paths: [
+          {lat: 37.772, lng: -122.214},
+          {lat: 21.291, lng: -157.821},
+          {lat: -18.142, lng: 178.431},
+          {lat: -27.467, lng: 153.027}
+        ],
+        zIndex: 1
+      }}
     />
@@ -50,0 +52,0 @@ </GoogleMap>

src/components/places/Autocomplete.md

@@ -15,5 +15,8 @@ # Autocomplete example
     this.autocomplete = null
+
+    this.onLoad = this.onLoad.bind(this)
+    this.onPlaceChanged = this.onPlaceChanged(this)
   }
 
-  onLoad = autocomplete => {
+  onLoad (autocomplete) {
     console.log('autocomplete: ', autocomplete)
@@ -24,3 +27,3 @@
 
-  onPlaceChanged = () => {
+  onPlaceChanged () {
     if (this.autocomplete !== null) {
@@ -77,2 +80,4 @@ console.log(this.autocomplete.getPlace())
 }
+
+<MyMapWithAutocomplete />
 ```

src/utils/foreach.ts

@@ -1,3 +0,5 @@
-export const forEach = (obj: any, fn: any): any => {
-  Object.keys(obj).forEach(key => fn(obj[key], key))
+export function forEach (obj: any, fn: any): any {
+  Object.keys(obj).forEach(function iterator(key) {
+    return fn(obj[key], key)
+  })
 }

src/utils/helper.ts

@@ -9,4 +9,5 @@ /* eslint-disable filenames/match-regex */
   nextProps: any,
+  // eslint-disable-next-line @getify/proper-arrows/params
   instance: any
-) => {
+): any => {
   let map: any = {}
@@ -35,7 +36,7 @@
     eventMap,
-    (
+    function reducer(
       acc: google.maps.MapsEventListener[],
       googleEventName: string,
       onEventName: any
-    ) => {
+    ): google.maps.MapsEventListener[] {
       if (typeof props[onEventName] === "function") {
@@ -73,7 +74,7 @@ acc.push(
 }: {
-  updaterMap: any
-  eventMap: Record<string, string>
-  prevProps: any
-  nextProps: any
-  instance: any
+  updaterMap: any;
+  eventMap: Record<string, string>;
+  prevProps: any;
+  nextProps: any;
+  instance: any;
 }) {
@@ -80,0 +81,0 @@ applyUpdaterToNextProps(updaterMap, prevProps, nextProps, instance)

src/utils/injectscript.ts

 import { isBrowser } from "./isbrowser"
 
 interface InjectScriptArg {
-  url: string
-  id: string
+  url: string;
+  id: string;
 }
@@ -13,3 +13,3 @@
 
-  return new Promise((resolve, reject) => {
+  return new Promise(function injectScriptCallback(resolve, reject) {
     if (document.getElementById(id)) {
@@ -25,3 +25,3 @@ return resolve(id)
     script.async = true
-    script.onload = () => {
+    script.onload = function onload() {
       resolve(id)
@@ -28,0 +28,0 @@ }

src/utils/instance-persistance.ts

 export interface RestoreInstanceArg {
-  id: string
-  zoom?: number
-  center?: google.maps.LatLng | google.maps.LatLngLiteral
-  mapContainerStyle?: { [key: string]: any }
-  options?: google.maps.MapOptions
+  id: string;
+  zoom?: number;
+  center?: google.maps.LatLng | google.maps.LatLngLiteral;
+  mapContainerStyle?: { [key: string]: any };
+  options?: google.maps.MapOptions;
 }
@@ -17,7 +17,7 @@
 
-const getMapInstanceId = (id: string) => {
+const getMapInstanceId = (id: string): string => {
   return `google-map-${id}`
 }
 
-const getHiddenMapContainer = (id: string) => {
+const getHiddenMapContainer = (id: string): HTMLElement => {
   const hiddenMapContainer = `hidden-container-${id}`
@@ -44,5 +44,7 @@
   center,
+  // eslint-disable-next-line @getify/proper-arrows/params
   mapContainerStyle,
   options
 }: RestoreInstanceArg): google.maps.Map | false => {
+  // TODO: extend WindowType and refactor for better type support.
   // @ts-ignore
@@ -73,4 +75,4 @@ const map: google.maps.Map = window[getMapInstanceId(id)]
 
-      if (mapContainerStyle) {
-        Object.keys(mapContainerStyle).forEach(styleKey => {
+      if (typeof mapContainerStyle === 'object') {
+        Object.keys(mapContainerStyle).forEach(function forEachStyle(styleKey) {
           // TODO
@@ -77,0 +79,0 @@ mapContainer.style[styleKey as any] = mapContainerStyle[styleKey]

src/utils/prevent-google-fonts.ts

@@ -53,24 +53,20 @@ // Preventing the Google Maps libary from downloading an extra font
 
-  const insertBefore = head.insertBefore
-
   // TODO: adding return before reflect solves the TS issue
   //@ts-ignore
-  head.insertBefore = (
+  head.insertBefore = function insertBefore(
     newElement: HTMLElement,
     referenceElement: HTMLElement
-  ): void => {
+  ): void {
     if (!isRobotoStyle(newElement)) {
-      Reflect.apply(insertBefore, head, [newElement, referenceElement])
+      Reflect.apply(head.insertBefore, head, [newElement, referenceElement])
     }
   }
 
-  const appendChild = head.appendChild
-
   // TODO: adding return before reflect solves the TS issue
   //@ts-ignore
-  head.appendChild = (textNode: HTMLElement): void => {
+  head.appendChild = function appendChild(textNode: HTMLElement): void {
     if (!isRobotoStyle(textNode)) {
-      Reflect.apply(appendChild, head, [textNode])
+      Reflect.apply(head.appendChild, head, [textNode])
     }
   }
 }

src/utils/reduce.ts

@@ -1,2 +0,6 @@
-export const reduce = (obj: any, fn: any, acc: any): any =>
-  Object.keys(obj).reduce((newAcc, key) => fn(newAcc, obj[key], key), acc)
+export const reduce = (obj: any, fn: any, acc: any): any => {
+  return Object.keys(obj)
+    .reduce(function reducer(newAcc, key) {
+      return fn(newAcc, obj[key], key)
+    }, acc)
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

35

decreased by-12.5%

Number of package files

173

increased by7.45%

Lines of code

7379

increased by9.64%

Worsened metrics

Total package byte prevSize

319620

decreased by-2.74%

Dependency count

8

increased by14.29%

Dependency changes

• + Added@react-google-maps/marker-clusterer@1.2.0-alpha.5

• + Added@types/invariant@^2.2.29

• + Added@types/react@16.8.10

• + Added@types/react-dom@16.8.3

• + Added@react-google-maps/marker-clusterer@1.2.0-alpha.5(transitive)

• + Added@types/invariant@2.2.37(transitive)

• + Added@types/prop-types@15.7.13(transitive)

• + Added@types/react@16.8.10(transitive)

• + Added@types/react-dom@16.8.3(transitive)

• + Addedcsstype@2.6.21(transitive)

• - Removed@types/markerclustererplus@2.1.33

• - Removedgoogle-maps-infobox@2.0.0

• - Removedmarker-clusterer-plus@2.1.4

• - Removed@types/google-maps@3.2.6(transitive)

• - Removed@types/google.maps@3.58.1(transitive)

• - Removed@types/markerclustererplus@2.1.33(transitive)

• - Removedgoogle-maps-infobox@2.0.0(transitive)

• - Removedmarker-clusterer-plus@2.1.4(transitive)

• Updatedinvariant@^2.2.4