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

Comparing version 1.1.0 to 1.2.0-alpha.0

CHANGELOG.md

 # Changelog
 
+## 1.1.1-alpha Additional component support
+
+** StreetViewPanorama
+** StreetViewService
+** MarkerClusterer
+
 ## 1.1.0
@@ -4,0 +10,0 @@

lib/components/directions/DirectionsRenderer.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
+import * as React from "react";
 interface DirectionsRendererState {
-    directionsRenderer?: google.maps.DirectionsRenderer;
+    directionsRenderer: google.maps.DirectionsRenderer | null;
 }
@@ -12,5 +12,6 @@ interface DirectionsRendererProps {
     onDirectionsChanged?: () => void;
+    onLoad?: (directionsRenderer: google.maps.DirectionsRenderer) => void;
 }
-export declare class DirectionsRenderer extends PureComponent<DirectionsRendererProps, DirectionsRendererState> {
-    static contextType: import("react").Context<google.maps.Map>;
+export declare class DirectionsRenderer extends React.PureComponent<DirectionsRendererProps, DirectionsRendererState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
@@ -21,8 +22,5 @@ state: DirectionsRendererState;
     componentWillUnmount: () => void;
-    render: () => any;
-    getDirections: () => google.maps.DirectionsResult;
-    getMap: () => google.maps.Map;
-    getPanel: () => Element;
-    getRouteIndex: () => number;
+    render(): null;
 }
 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,8 +15,8 @@ var extendStatics = function (d, b) {
 })();
-/* global google */
-import { PureComponent } 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 = {
-    onDirectionsChanged: 'directions_changed'
+    onDirectionsChanged: "directions_changed"
 };
@@ -39,3 +40,3 @@ var updaterMap = {
 };
-var DirectionsRenderer = /** @class */ (function (_super) {
+var DirectionsRenderer = (function (_super) {
     __extends(DirectionsRenderer, _super);
@@ -49,19 +50,26 @@ function DirectionsRenderer() {
         _this.componentDidMount = function () {
-            var directionsRenderer = new google.maps.DirectionsRenderer(_this.props.options);
+            var directionsRenderer = new google.maps.DirectionsRenderer(typeof _this.props.options === 'object'
+                ? _this.props.options
+                : undefined);
             _this.setState(function () { return ({
                 directionsRenderer: directionsRenderer
             }); }, function () {
-                _this.state.directionsRenderer.setMap(_this.context);
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                    updaterMap: updaterMap,
-                    eventMap: eventMap,
-                    prevProps: {},
-                    nextProps: _this.props,
-                    instance: _this.state.directionsRenderer
-                });
+                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({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -75,3 +83,3 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
             if (_this.state.directionsRenderer) {
@@ -81,14 +89,11 @@ _this.state.directionsRenderer.setMap(null);
         };
-        _this.render = function () { return null; };
-        _this.getDirections = function () { return _this.state.directionsRenderer.getDirections(); };
-        _this.getMap = function () { return _this.state.directionsRenderer.getMap(); };
-        _this.getPanel = function () { return _this.state.directionsRenderer.getPanel(); };
-        _this.getRouteIndex = function () { return _this.state.directionsRenderer.getRouteIndex(); };
         return _this;
     }
-    DirectionsRenderer.contextType = MapContext;
+    DirectionsRenderer.prototype.render = function () {
+        return null;
+    };
+    DirectionsRenderer.contextType = map_context_1.default;
     return DirectionsRenderer;
-}(PureComponent));
-export { DirectionsRenderer };
-export default DirectionsRenderer;
-//# sourceMappingURL=DirectionsRenderer.js.map
+}(React.PureComponent));
+exports.DirectionsRenderer = DirectionsRenderer;
+exports.default = DirectionsRenderer;

lib/components/directions/DirectionsService.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
+import * as React from "react";
 interface DirectionsServiceState {
-    directionsService?: google.maps.DirectionsService;
+    directionsService: google.maps.DirectionsService | null;
 }
 interface DirectionsServiceProps {
-    options?: google.maps.DirectionsRequest;
-    callback?: (result: google.maps.DirectionsResult, status: google.maps.DirectionsStatus) => void;
+    options: google.maps.DirectionsRequest;
+    callback: (result: google.maps.DirectionsResult, status: google.maps.DirectionsStatus) => void;
+    onLoad: (directionsService: google.maps.DirectionsService) => void;
 }
-export declare class DirectionsService extends PureComponent<DirectionsServiceProps, DirectionsServiceState> {
+export declare class DirectionsService extends React.PureComponent<DirectionsServiceProps, DirectionsServiceState> {
     state: DirectionsServiceState;
     componentDidMount: () => void;
     componentDidUpdate: () => void;
-    render: () => any;
+    render(): null;
 }
 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) {
 })();
-/* global google */
-import { PureComponent } from 'react';
-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);
@@ -25,2 +27,3 @@ 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();
@@ -30,15 +33,20 @@ _this.setState(function () { return ({
             }); }, function () {
-                _this.state.directionsService.route(_this.props.options, _this.props.callback);
+                if (_this.state.directionsService !== null) {
+                    _this.state.directionsService.route(_this.props.options, _this.props.callback);
+                }
             });
         };
         _this.componentDidUpdate = function () {
-            _this.state.directionsService.route(_this.props.options, _this.props.callback);
+            if (_this.state.directionsService !== null) {
+                _this.state.directionsService.route(_this.props.options, _this.props.callback);
+            }
         };
-        _this.render = function () { return null; };
         return _this;
     }
+    DirectionsService.prototype.render = function () {
+        return null;
+    };
     return DirectionsService;
-}(PureComponent));
-export { DirectionsService };
-export default DirectionsService;
-//# sourceMappingURL=DirectionsService.js.map
+}(React.PureComponent));
+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 const 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) => {
+}) | undefined) => {};
+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,11 +0,9 @@
-/* eslint-disable filenames/match-regex */
-/* global google */
-export var getOffsetOverride = function (containerElement, getPixelPositionOffset) {
-    return typeof getPixelPositionOffset === 'function'
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOffsetOverride = function (containerElement, getPixelPositionOffset) {
+    return typeof getPixelPositionOffset === "function"
         ? getPixelPositionOffset(containerElement.offsetWidth, containerElement.offsetHeight)
         : {};
 };
-var createLatLng = function (inst, Type) {
-    return new Type(inst.lat, inst.lng);
-};
+var createLatLng = function (inst, Type) { return new Type(inst.lat, inst.lng); };
 var createLatLngBounds = function (inst, Type) {
@@ -15,5 +13,3 @@ return new Type(new google.maps.LatLng(inst.ne.lat, inst.ne.lng), new google.maps.LatLng(inst.sw.lat, inst.sw.lng));
 var ensureOfType = function (inst, type, factory) {
-    return inst instanceof type
-        ? inst
-        : factory(inst, type);
+    return inst instanceof type ? inst : factory(inst, type);
 };
@@ -28,8 +24,8 @@ var getLayoutStylesByBounds = function (mapCanvasProjection, offset, bounds) {
             width: ne.x - sw.x - offset.x + "px",
-            height: sw.y - ne.y - offset.y + "px",
+            height: sw.y - ne.y - offset.y + "px"
         };
     }
     return {
-        left: '-9999px',
-        top: '-9999px',
+        left: "-9999px",
+        top: "-9999px"
     };
@@ -43,11 +39,11 @@ };
             left: x + offset.x + "px",
-            top: y + offset.y + "px",
+            top: y + offset.y + "px"
         };
     }
     return {
-        left: '-9999px',
-        top: '-9999px',
+        left: "-9999px",
+        top: "-9999px"
     };
 };
-export var getLayoutStyles = function (mapCanvasProjection, offset, bounds, position) {
+exports.getLayoutStyles = function (mapCanvasProjection, offset, bounds, position) {
     return bounds !== undefined
@@ -57,2 +53,1 @@ ? getLayoutStylesByBounds(mapCanvasProjection, offset, ensureOfType(bounds, google.maps.LatLngBounds, createLatLngBounds))
 };
-//# sourceMappingURL=dom-helper.js.map

lib/components/dom/OverlayView.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
+import * as React from "react";
 interface OverlayViewState {
-    overlayView?: google.maps.OverlayView;
+    overlayView: google.maps.OverlayView | null;
 }
@@ -14,4 +14,5 @@ interface OverlayViewProps {
     position?: google.maps.LatLng;
+    onLoad?: (overlayView: google.maps.OverlayView) => void;
 }
-export declare class OverlayView extends PureComponent<OverlayViewProps, OverlayViewState> {
+export declare class OverlayView extends React.PureComponent<OverlayViewProps, OverlayViewState> {
     static FLOAT_PANE: string;
@@ -22,16 +23,12 @@ static MAP_PANE: string;
     static OVERLAY_MOUSE_TARGET: string;
-    static contextType: import("react").Context<google.maps.Map>;
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: OverlayViewState;
-    containerElement: HTMLElement;
+    containerElement: HTMLElement | null;
     componentDidMount: () => void;
-    componentDidUpdate: (prevProps: OverlayViewProps) => void;
     componentWillUnmount: () => void;
-    render: () => import("react").ReactPortal;
+    render: () => any;
     preventMapHitsAndGesturesFrom: (element: HTMLElement) => any;
     preventMapHitsFrom: (element: HTMLElement) => any;
     draw: () => void;
-    getMap: () => google.maps.Map | google.maps.StreetViewPanorama;
-    getPanes: () => google.maps.MapPanes;
-    getProjection: () => google.maps.MapCanvasProjection;
     onAdd: () => void;
@@ -42,1 +39,2 @@ onPositionElement: () => void;
 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,13 +26,9 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import { PureComponent, Children } from 'react';
-import { createPortal } from 'react-dom';
-//@ts-ignore
-import invariant from 'invariant'; // Do wee really need this dependency?
-import { unregisterEvents, applyUpdatersToPropsAndRegisterEvents } from '../../utils/helper';
-import MapContext from '../../map-context';
-import { getOffsetOverride, getLayoutStyles } from './dom-helper';
-var eventMap = {};
-var updaterMap = {};
-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);
@@ -44,5 +41,5 @@ 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;
@@ -52,49 +49,30 @@ overlayView.draw = _this.draw;
             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 () {
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                    updaterMap: updaterMap,
-                    eventMap: eventMap,
-                    prevProps: {},
-                    nextProps: _this.props,
-                    instance: _this.state.overlayView
-                });
+                if (_this.state.overlayView !== null && _this.props.onLoad) {
+                    _this.props.onLoad(_this.state.overlayView);
+                }
             });
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                updaterMap: updaterMap,
-                eventMap: eventMap,
-                prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.overlayView
-            });
-        };
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            _this.state.overlayView && _this.state.overlayView.setMap(null);
+            _this.state.overlayView !== null && _this.state.overlayView.setMap(null);
         };
         _this.render = function () {
-            return _this.containerElement
-                ? createPortal(Children.only(_this.props.children), _this.containerElement)
-                : null;
+            return _this.containerElement !== null
+                ? react_dom_1.createPortal(React.Children.only(_this.props.children), _this.containerElement)
+                : (React.createElement(React.Fragment, null));
         };
         _this.preventMapHitsAndGesturesFrom = function (element) {
-            //@ts-ignore
             return _this.state.overlayView.preventMapHitsAndGesturesFrom(element);
         };
-        //@ts-ignore
-        _this.preventMapHitsFrom = function (element) { return _this.state.overlayView.preventMapHitsFrom(element); };
+        _this.preventMapHitsFrom = function (element) {
+            return _this.state.overlayView.preventMapHitsFrom(element);
+        };
         _this.draw = function () {
-            var mapPaneName = _this.props.mapPaneName;
-            invariant(!!mapPaneName, "OverlayView requires props.mapPaneName but got %s", mapPaneName);
+            invariant(!!_this.props.mapPaneName, "OverlayView requires props.mapPaneName but got %s", _this.props.mapPaneName);
             var overlayView = _this.state.overlayView;
-            if (!overlayView) {
+            if (overlayView === null) {
                 return;
             }
-            // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes
             var mapPanes = overlayView.getPanes();
@@ -104,24 +82,25 @@ if (!mapPanes) {
             }
-            mapPanes[mapPaneName].appendChild(_this.containerElement);
+            mapPanes[_this.props.mapPaneName].appendChild(_this.containerElement);
             _this.onPositionElement();
             _this.forceUpdate();
         };
-        _this.getMap = function () { return _this.state.overlayView.getMap(); };
-        _this.getPanes = function () { return _this.state.overlayView.getPanes(); };
-        _this.getProjection = function () { return _this.state.overlayView.getProjection(); };
         _this.onAdd = function () {
-            _this.containerElement = document.createElement('div');
-            _this.containerElement.style.position = 'absolute';
+            _this.containerElement = document.createElement("div");
+            _this.containerElement.style.position = "absolute";
         };
         _this.onPositionElement = function () {
-            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);
+            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.onRemove = function () {
-            if (_this.containerElement) {
+            if (_this.containerElement !== null &&
+                _this.containerElement.parentNode) {
                 _this.containerElement.parentNode.removeChild(_this.containerElement);
+                delete _this.containerElement;
             }
-            _this.containerElement = null;
         };
@@ -135,7 +114,6 @@ return _this;
     OverlayView.OVERLAY_MOUSE_TARGET = "overlayMouseTarget";
-    OverlayView.contextType = MapContext;
+    OverlayView.contextType = map_context_1.default;
     return OverlayView;
-}(PureComponent));
-export { OverlayView };
-export default OverlayView;
-//# sourceMappingURL=OverlayView.js.map
+}(React.PureComponent));
+exports.OverlayView = OverlayView;
+exports.default = OverlayView;

lib/components/drawing/Circle.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
-import { LatLng } from '../../types';
+import * as React from "react";
 interface CircleState {
-    circle?: google.maps.Circle;
+    circle: google.maps.Circle | null;
 }
 interface CircleProps {
     options: google.maps.CircleOptions;
-    center: LatLng;
+    center: google.maps.LatLng | google.maps.LatLngLiteral;
     radius: number;
@@ -27,5 +26,6 @@ draggable: boolean;
     onRadiusChanged: () => void;
+    onLoad: (circle: google.maps.Circle) => void;
 }
-export declare class Circle extends PureComponent<CircleProps, CircleState> {
-    static contextType: import("react").Context<google.maps.Map>;
+export declare class Circle extends React.PureComponent<CircleProps, CircleState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
@@ -46,1 +46,2 @@ state: CircleState;
 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,20 +26,20 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import { PureComponent } 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 = {
-    onCenterChanged: 'center_changed',
-    onClick: 'click',
-    onDblClick: 'dblclick',
-    onDrag: 'drag',
-    onDragEnd: 'dragend',
-    onDragStart: 'dragstart',
-    onMouseDown: 'mousedown',
-    onMouseMove: 'mousemove',
-    onMouseOut: 'mouseout',
-    onMouseOver: 'mouseover',
-    onMouseUp: 'mouseup',
-    onRadiusChanged: 'radius_changed',
-    onRightClick: 'rightclick'
+    onCenterChanged: "center_changed",
+    onClick: "click",
+    onDblClick: "dblclick",
+    onDrag: "drag",
+    onDragEnd: "dragend",
+    onDragStart: "dragstart",
+    onMouseDown: "mousedown",
+    onMouseMove: "mousemove",
+    onMouseOut: "mouseout",
+    onMouseOver: "mouseover",
+    onMouseUp: "mouseup",
+    onRadiusChanged: "radius_changed",
+    onRightClick: "rightclick"
 };
@@ -68,3 +69,3 @@ var updaterMap = {
 };
-var Circle = /** @class */ (function (_super) {
+var Circle = (function (_super) {
     __extends(Circle, _super);
@@ -82,14 +83,19 @@ function Circle() {
             }); }, function () {
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                    updaterMap: updaterMap,
-                    eventMap: eventMap,
-                    prevProps: {},
-                    nextProps: _this.props,
-                    instance: _this.state.circle
-                });
+                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({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -103,3 +109,3 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
             _this.state.circle && _this.state.circle.setMap(null);
@@ -117,7 +123,6 @@ };
     }
-    Circle.contextType = MapContext;
+    Circle.contextType = map_context_1.default;
     return Circle;
-}(PureComponent));
-export { Circle };
-export default Circle;
-//# sourceMappingURL=Circle.js.map
+}(React.PureComponent));
+exports.Circle = Circle;
+exports.default = Circle;

lib/components/drawing/Data.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
+import * as React from "react";
 interface DataState {
-    data?: google.maps.Data;
+    data: google.maps.Data | null;
 }
@@ -20,5 +20,6 @@ interface DataProps {
     onSetProperty?: (e: google.maps.Data.SetPropertyEvent) => void;
+    onLoad?: (data: google.maps.Data) => void;
 }
-export declare class Data extends PureComponent<DataProps, DataState> {
-    static contextType: import("react").Context<google.maps.Map>;
+export declare class Data extends React.PureComponent<DataProps, DataState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
@@ -29,10 +30,5 @@ state: DataState;
     componentWillUnmount: () => void;
-    render: () => any;
-    getControlPosition: () => google.maps.ControlPosition;
-    getControls: () => google.maps.DrawingMode[];
-    getDrawingMode: () => google.maps.DrawingMode;
-    getFeatureById: (id: import("react").ReactText) => google.maps.Data.Feature;
-    getMap: () => google.maps.Map;
-    getStyle: () => google.maps.Data.StyleOptions | google.maps.Data.StylingFunction;
+    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,19 +26,19 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import { PureComponent } 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 = {
-    onAddFeature: 'addfeature',
-    onClick: 'click',
-    onDblClick: 'dblclick',
-    onMouseDown: 'mousedown',
-    onMouseOut: 'mouseout',
-    onMouseOver: 'mouseover',
-    onMouseUp: 'mouseup',
-    onRemoveFeature: 'removefeature',
-    onRemoveProperty: 'removeproperty',
-    onRightClick: 'rightclick',
-    onSetGeometry: 'setgeometry',
-    onSetProperty: 'setproperty'
+    onAddFeature: "addfeature",
+    onClick: "click",
+    onDblClick: "dblclick",
+    onMouseDown: "mousedown",
+    onMouseOut: "mouseout",
+    onMouseOver: "mouseover",
+    onMouseUp: "mouseup",
+    onRemoveFeature: "removefeature",
+    onRemoveProperty: "removeproperty",
+    onRightClick: "rightclick",
+    onSetGeometry: "setgeometry",
+    onSetProperty: "setproperty"
 };
@@ -69,4 +70,3 @@ var updaterMap = {
     },
-    controlposition: function (instance, controlPosition // TODO: ???
-    ) {
+    controlposition: function (instance, controlPosition) {
         instance.setControlPosition(controlPosition);
@@ -90,3 +90,3 @@ },
 };
-var Data = /** @class */ (function (_super) {
+var Data = (function (_super) {
     __extends(Data, _super);
@@ -100,8 +100,17 @@ function Data() {
         _this.componentDidMount = function () {
-            var data = new google.maps.Data(__assign({}, _this.props.options, { map: _this.context }));
-            _this.setState({ data: data });
+            var data = new google.maps.Data(typeof _this.props.options === 'object'
+                ? __assign({}, _this.props.options, { map: _this.context }) : {
+                map: _this.context
+            });
+            _this.setState(function () {
+                data;
+            }, 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({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -115,3 +124,3 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
             if (_this.state.data) {
@@ -121,16 +130,11 @@ _this.state.data.setMap(null);
         };
-        _this.render = function () { return null; };
-        _this.getControlPosition = function () { return _this.state.data.getControlPosition(); };
-        _this.getControls = function () { return _this.state.data.getControls(); };
-        _this.getDrawingMode = function () { return _this.state.data.getDrawingMode(); };
-        _this.getFeatureById = function (id) { return _this.state.data.getFeatureById(id); };
-        _this.getMap = function () { return _this.state.data.getMap(); };
-        _this.getStyle = function () { return _this.state.data.getStyle(); };
         return _this;
     }
-    Data.contextType = MapContext;
+    Data.prototype.render = function () {
+        return null;
+    };
+    Data.contextType = map_context_1.default;
     return Data;
-}(PureComponent));
-export { Data };
-export default Data;
-//# sourceMappingURL=Data.js.map
+}(React.PureComponent));
+exports.Data = Data;
+exports.default = Data;

lib/components/drawing/DrawingManager.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
+import * as React from "react";
 interface DrawingManagerState {
-    drawingManager?: google.maps.drawing.DrawingManager;
+    drawingManager: google.maps.drawing.DrawingManager | null;
 }
@@ -15,5 +15,6 @@ interface DrawingManagerProps {
     onRectangleComplete?: (rectangle: google.maps.Rectangle) => void;
+    onLoad?: (drawingManager: google.maps.drawing.DrawingManager) => void;
 }
-export declare class DrawingManager extends PureComponent<DrawingManagerProps, DrawingManagerState> {
-    static contextType: import("react").Context<google.maps.Map>;
+export declare class DrawingManager extends React.PureComponent<DrawingManagerProps, DrawingManagerState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
@@ -25,3 +26,3 @@ state: DrawingManagerState;
     componentWillUnmount: () => void;
-    render: () => any;
+    render: () => JSX.Element;
     getDrawingMode: () => google.maps.drawing.OverlayType;
@@ -31,1 +32,2 @@ getMap: () => google.maps.Map;
 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,15 +26,14 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import { PureComponent } from 'react';
-// @ts-ignore
-import 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 = {
-    onCircleComplete: 'circlecomplete',
-    onMarkerComplete: 'markercomplete',
-    onOverlayComplete: 'overlaycomplete',
-    ondrawingManagerComplete: 'drawingManagercomplete',
-    onPolylineComplete: 'polylinecomplete',
-    onRectangleComplete: 'rectanglecomplete'
+    onCircleComplete: "circlecomplete",
+    onMarkerComplete: "markercomplete",
+    onOverlayComplete: "overlaycomplete",
+    ondrawingManagerComplete: "drawingManagercomplete",
+    onPolylineComplete: "polylinecomplete",
+    onRectangleComplete: "rectanglecomplete"
 };
@@ -48,3 +48,3 @@ var updaterMap = {
 };
-var DrawingManager = /** @class */ (function (_super) {
+var DrawingManager = (function (_super) {
     __extends(DrawingManager, _super);
@@ -58,18 +58,26 @@ function DrawingManager(props) {
         _this.componentDidMount = function () {
-            var drawingManager = new google.maps.drawing.DrawingManager(__assign({}, _this.props.options, { map: _this.context }));
+            var drawingManager = new google.maps.drawing.DrawingManager(typeof _this.props.options === 'object'
+                ? __assign({}, _this.props.options, { map: _this.context }) : {
+                map: _this.context
+            });
             _this.setState(function () { return ({
                 drawingManager: drawingManager
             }); }, function () {
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                    updaterMap: updaterMap,
-                    eventMap: eventMap,
-                    prevProps: {},
-                    nextProps: _this.props,
-                    instance: _this.state.drawingManager
-                });
+                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({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -83,6 +91,6 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
             _this.state.drawingManager && _this.state.drawingManager.setMap(null);
         };
-        _this.render = function () { return null; };
+        _this.render = function () { return (React.createElement(React.Fragment, null)); };
         _this.getDrawingMode = function () { return _this.state.drawingManager.getDrawingMode(); };
@@ -93,7 +101,6 @@ _this.getMap = function () { return _this.state.drawingManager.getMap(); };
     }
-    DrawingManager.contextType = MapContext;
+    DrawingManager.contextType = map_context_1.default;
     return DrawingManager;
-}(PureComponent));
-export { DrawingManager };
-export default DrawingManager;
-//# sourceMappingURL=DrawingManager.js.map
+}(React.PureComponent));
+exports.DrawingManager = DrawingManager;
+exports.default = DrawingManager;

lib/components/drawing/InfoWindow.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
-import { LatLng } from '../../types';
+import * as React from "react";
 interface InfoWindowState {
-    infoWindow?: google.maps.InfoWindow;
+    infoWindow: google.maps.InfoWindow | null;
 }
 interface InfoWindowProps {
-    anchor?: google.maps.MVCObject;
+    anchor: google.maps.MVCObject | null;
     options?: google.maps.InfoWindowOptions;
-    position: LatLng;
+    position: google.maps.LatLng | google.maps.LatLngLiteral;
     zIndex?: number;
@@ -17,7 +16,8 @@ onCloseClick?: () => void;
     onZindexChanged?: () => void;
+    onLoad?: (infoWindow: google.maps.InfoWindow) => void;
 }
-export declare class InfoWindow extends PureComponent<InfoWindowProps, InfoWindowState> {
-    static contextType: import("react").Context<google.maps.Map>;
+export declare class InfoWindow extends React.PureComponent<InfoWindowProps, InfoWindowState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
-    containerElement: HTMLElement;
+    containerElement: HTMLElement | null;
     state: InfoWindowState;
@@ -27,3 +27,3 @@ componentDidMount: () => void;
     componentWillUnmount: () => void;
-    render: () => import("react").ReactPortal;
+    render: () => any;
     open: (infoWindow: google.maps.InfoWindow, anchor: google.maps.MVCObject) => void;
@@ -35,1 +35,2 @@ getContent: () => string | 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 () {
@@ -14,15 +15,14 @@ var extendStatics = function (d, b) {
 })();
-/* global google */
-import { PureComponent, Children } from 'react';
-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 = {
-    onCloseClick: 'closeclick',
-    onContentChanged: 'content_changed',
-    onDomReady: 'domready',
-    onPositionChanged: 'position_changed',
-    onZindexChanged: 'zindex_changed'
+    onCloseClick: "closeclick",
+    onContentChanged: "content_changed",
+    onDomReady: "domready",
+    onPositionChanged: "position_changed",
+    onZindexChanged: "zindex_changed"
 };
@@ -40,3 +40,3 @@ var updaterMap = {
 };
-var InfoWindow = /** @class */ (function (_super) {
+var InfoWindow = (function (_super) {
     __extends(InfoWindow, _super);
@@ -46,2 +46,3 @@ function InfoWindow() {
         _this.registeredEvents = [];
+        _this.containerElement = null;
         _this.state = {
@@ -51,25 +52,34 @@ infoWindow: null
         _this.componentDidMount = function () {
-            var infoWindow = new google.maps.InfoWindow(_this.props.options);
-            _this.containerElement = document.createElement('div');
+            var infoWindow = new google.maps.InfoWindow(typeof _this.props.options === 'object'
+                ? _this.props.options
+                : undefined);
+            _this.containerElement = document.createElement("div");
             _this.setState(function () { return ({
                 infoWindow: infoWindow
             }); }, function () {
-                _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);
+                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);
+                    }
+                }
             });
         };
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
         };
         _this.render = function () {
             return _this.containerElement
-                ? createPortal(Children.only(_this.props.children), _this.containerElement)
-                : null;
+                ? react_dom_1.createPortal(React.Children.only(_this.props.children), _this.containerElement)
+                : (React.createElement(React.Fragment, null));
         };
@@ -84,3 +94,3 @@ _this.open = function (infoWindow, 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>.");
             }
@@ -94,4 +104,4 @@ };
     InfoWindow.prototype.componentDidUpdate = function (prevProps) {
-        unregisterEvents(this.registeredEvents);
-        this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+        helper_1.unregisterEvents(this.registeredEvents);
+        this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
             updaterMap: updaterMap,
@@ -104,7 +114,6 @@ eventMap: eventMap,
     };
-    InfoWindow.contextType = MapContext;
+    InfoWindow.contextType = map_context_1.default;
     return InfoWindow;
-}(PureComponent));
-export { InfoWindow };
-export default InfoWindow;
-//# sourceMappingURL=InfoWindow.js.map
+}(React.PureComponent));
+exports.InfoWindow = InfoWindow;
+exports.default = InfoWindow;

lib/components/drawing/Marker.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
-import { LatLng } from '../../types';
+import * as React from "react";
+import MarkerClusterer from "markerclustererplus";
 interface MarkerState {
-    marker?: google.maps.Marker;
+    marker: google.maps.Marker | null;
 }
@@ -16,3 +16,3 @@ interface MarkerProps {
     opacity?: number;
-    position: LatLng;
+    position: google.maps.LatLng | google.maps.LatLngLiteral;
     shape?: google.maps.MarkerShape;
@@ -22,2 +22,4 @@ title?: string;
     zIndex?: number;
+    clusterer?: MarkerClusterer;
+    noClustererRedraw?: boolean;
     onClick?: (e: MouseEvent) => void;
@@ -44,5 +46,6 @@ onClickableChanged?: () => void;
     onZindexChanged?: () => void;
+    onLoad?: (marker: google.maps.Marker) => void;
 }
-export declare class Marker extends PureComponent<MarkerProps, MarkerState> {
-    static contextType: import("react").Context<google.maps.Map>;
+export declare class Marker extends React.PureComponent<MarkerProps, MarkerState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
@@ -53,17 +56,5 @@ state: MarkerState;
     componentWillUnmount: () => void;
-    render: () => {};
-    getAnimation: () => google.maps.Animation;
-    getClickable: () => boolean;
-    getCursor: () => string;
-    getDraggable: () => boolean;
-    getIcon: () => string | google.maps.Icon | google.maps.Symbol;
-    getLabel: () => google.maps.MarkerLabel;
-    getMap: () => google.maps.Map | google.maps.StreetViewPanorama;
-    getOpacity: () => number;
-    getPosition: () => google.maps.LatLng;
-    getShape: () => google.maps.MarkerShape;
-    getTitle: () => string;
-    getVisible: () => boolean;
-    getZIndex: () => number;
+    render: () => {} | null;
 }
 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,28 +26,28 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import { PureComponent } 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 = {
-    onAnimationChanged: 'animation_changed',
-    onClick: 'click',
-    onClickableChanged: 'clickable_changed',
-    onCursorChanged: 'cursor_changed',
-    onDblClick: 'dblclick',
-    onDrag: 'drag',
-    onDragEnd: 'dragend',
-    onDraggableChanged: 'draggable_changed',
-    onDragStart: 'dragstart',
-    onFlatChanged: 'flat_changed',
-    onIconChanged: 'icon_changed',
-    onMouseDown: 'mousedown',
-    onMouseOut: 'mouseout',
-    onMouseOver: 'mouseover',
-    onMouseUp: 'mouseup',
-    onPositionChanged: 'position_changed',
-    onRightClick: 'rightclick',
-    onShapeChanged: 'shape_changed',
-    onTitleChanged: 'title_changed',
-    onVisibleChanged: 'visible_changed',
-    onZindexChanged: 'zindex_changed'
+    onAnimationChanged: "animation_changed",
+    onClick: "click",
+    onClickableChanged: "clickable_changed",
+    onCursorChanged: "cursor_changed",
+    onDblClick: "dblclick",
+    onDrag: "drag",
+    onDragEnd: "dragend",
+    onDraggableChanged: "draggable_changed",
+    onDragStart: "dragstart",
+    onFlatChanged: "flat_changed",
+    onIconChanged: "icon_changed",
+    onMouseDown: "mousedown",
+    onMouseOut: "mouseout",
+    onMouseOver: "mouseover",
+    onMouseUp: "mouseup",
+    onPositionChanged: "position_changed",
+    onRightClick: "rightclick",
+    onShapeChanged: "shape_changed",
+    onTitleChanged: "title_changed",
+    onVisibleChanged: "visible_changed",
+    onZindexChanged: "zindex_changed"
 };
@@ -97,3 +98,3 @@ var updaterMap = {
 };
-var Marker = /** @class */ (function (_super) {
+var Marker = (function (_super) {
     __extends(Marker, _super);
@@ -107,50 +108,60 @@ function Marker() {
         _this.componentDidMount = function () {
-            var marker = new google.maps.Marker(__assign({}, _this.props.options, { map: _this.context, position: _this.props.position }));
+            var markerOptions = typeof _this.props.options === 'object'
+                ? __assign({}, _this.props.options, (_this.props.clusterer ? {} : { map: _this.context }), { position: _this.props.position }) : __assign({}, (_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 () {
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+                if (_this.state.marker !== null) {
+                    _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                        updaterMap: updaterMap,
+                        eventMap: eventMap,
+                        prevProps: {},
+                        nextProps: _this.props,
+                        instance: _this.state.marker
+                    });
+                    if (_this.props.onLoad) {
+                        _this.props.onLoad(_this.state.marker);
+                    }
+                }
+            });
+        };
+        _this.componentDidUpdate = function (prevProps) {
+            if (_this.state.marker !== null) {
+                helper_1.unregisterEvents(_this.registeredEvents);
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                     updaterMap: updaterMap,
                     eventMap: eventMap,
-                    prevProps: {},
+                    prevProps: prevProps,
                     nextProps: _this.props,
                     instance: _this.state.marker
                 });
-            });
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                updaterMap: updaterMap,
-                eventMap: eventMap,
-                prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.marker
-            });
-        };
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            _this.state.marker && _this.state.marker.setMap(null);
+            if (_this.state.marker !== null) {
+                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);
+                }
+            }
         };
-        _this.render = function () { return (_this.props.children ? _this.props.children : null); };
-        _this.getAnimation = function () { return _this.state.marker.getAnimation(); };
-        _this.getClickable = function () { return _this.state.marker.getClickable(); };
-        _this.getCursor = function () { return _this.state.marker.getCursor(); };
-        _this.getDraggable = function () { return _this.state.marker.getDraggable(); };
-        _this.getIcon = function () { return _this.state.marker.getIcon(); };
-        _this.getLabel = function () { return _this.state.marker.getLabel(); };
-        _this.getMap = function () { return _this.state.marker.getMap(); };
-        _this.getOpacity = function () { return _this.state.marker.getOpacity(); };
-        _this.getPosition = function () { return _this.state.marker.getPosition(); };
-        _this.getShape = function () { return _this.state.marker.getShape(); };
-        _this.getTitle = function () { return _this.state.marker.getTitle(); };
-        _this.getVisible = function () { return _this.state.marker.getVisible(); };
-        _this.getZIndex = function () { return _this.state.marker.getZIndex(); };
+        _this.render = function () { return (_this.props.children
+            ? _this.props.children
+            : null); };
         return _this;
     }
-    Marker.contextType = MapContext;
+    Marker.contextType = map_context_1.default;
     return Marker;
-}(PureComponent));
-export { Marker };
-export default Marker;
-//# sourceMappingURL=Marker.js.map
+}(React.PureComponent));
+exports.Marker = Marker;
+exports.default = Marker;

lib/components/drawing/Polygon.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
-import { PolygonPath, PolygonPaths } from '../../types';
+import * as React from "react";
 interface PolygonState {
-    polygon?: google.maps.Polygon;
+    polygon: google.maps.Polygon | null;
 }
 interface PolygonProps {
-    options: google.maps.PolygonOptions;
-    draggable: boolean;
-    editable: boolean;
-    visible: boolean;
-    path: PolygonPath;
-    paths: PolygonPaths;
-    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;
+    options?: google.maps.PolygonOptions;
+    draggable?: boolean;
+    editable?: boolean;
+    visible?: boolean;
+    path?: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[];
+    paths?: google.maps.MVCArray<google.maps.LatLng> | google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>> | google.maps.LatLng[] | google.maps.LatLng[][] | google.maps.LatLngLiteral[] | 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?: (polygon: google.maps.Polygon) => void;
 }
-export declare class Polygon extends PureComponent<PolygonProps, PolygonState> {
-    static contextType: import("react").Context<google.maps.Map>;
+export declare class Polygon extends React.PureComponent<PolygonProps, PolygonState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
@@ -33,10 +33,5 @@ state: PolygonState;
     componentWillUnmount: () => void;
-    render: () => any;
-    getDraggable: () => boolean;
-    getEditable: () => boolean;
-    getMap: () => boolean;
-    getPath: () => google.maps.Map;
-    getPaths: () => google.maps.MVCArray<google.maps.MVCArray<google.maps.LatLng>>;
-    getVisible: () => boolean;
+    render: () => JSX.Element;
 }
 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,18 +26,18 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import { PureComponent } 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 = {
-    onClick: 'click',
-    onDblClick: 'dblclick',
-    onDrag: 'drag',
-    onDragEnd: 'dragend',
-    onDragStart: 'dragstart',
-    onMouseDown: 'mousedown',
-    onMouseMove: 'mousemove',
-    onMouseOut: 'mouseout',
-    onMouseOver: 'mouseover',
-    onMouseUp: 'mouseup',
-    onRightClick: 'rightclick'
+    onClick: "click",
+    onDblClick: "dblclick",
+    onDrag: "drag",
+    onDragEnd: "dragend",
+    onDragStart: "dragstart",
+    onMouseDown: "mousedown",
+    onMouseMove: "mousemove",
+    onMouseOut: "mouseout",
+    onMouseOver: "mouseover",
+    onMouseUp: "mouseup",
+    onRightClick: "rightclick"
 };
@@ -66,3 +67,3 @@ var updaterMap = {
 };
-var Polygon = /** @class */ (function (_super) {
+var Polygon = (function (_super) {
     __extends(Polygon, _super);
@@ -76,18 +77,26 @@ function Polygon() {
         _this.componentDidMount = function () {
-            var polygon = new google.maps.Polygon(__assign({}, _this.props.options, { map: _this.context }));
+            var polygon = new google.maps.Polygon(typeof _this.props.options === 'object'
+                ? __assign({}, _this.props.options, { map: _this.context }) : {
+                map: _this.context
+            });
             _this.setState(function () { return ({
                 polygon: polygon
             }); }, function () {
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                    updaterMap: updaterMap,
-                    eventMap: eventMap,
-                    prevProps: {},
-                    nextProps: _this.props,
-                    instance: _this.state.polygon
-                });
+                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({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -101,19 +110,12 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
             _this.state.polygon && _this.state.polygon.setMap(null);
         };
-        _this.render = function () { return null; };
-        _this.getDraggable = function () { return _this.state.polygon.getDraggable(); };
-        _this.getEditable = function () { return _this.state.polygon.getEditable(); };
-        _this.getMap = function () { return _this.state.polygon.getEditable(); };
-        _this.getPath = function () { return _this.state.polygon.getMap(); };
-        _this.getPaths = function () { return _this.state.polygon.getPaths(); };
-        _this.getVisible = function () { return _this.state.polygon.getVisible(); };
+        _this.render = function () { return (React.createElement(React.Fragment, null)); };
         return _this;
     }
-    Polygon.contextType = MapContext;
+    Polygon.contextType = map_context_1.default;
     return Polygon;
-}(PureComponent));
-export { Polygon };
-export default Polygon;
-//# sourceMappingURL=Polygon.js.map
+}(React.PureComponent));
+exports.Polygon = Polygon;
+exports.default = Polygon;

lib/components/drawing/Polyline.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
+import * as React from "react";
 interface PolylineState {
-    polyline?: google.maps.Polyline;
+    polyline: google.maps.Polyline | null;
 }
@@ -23,5 +23,6 @@ interface PolylineProps {
     onDrag: (e: MouseEvent) => void;
+    onLoad?: (polyline: google.maps.Polyline) => void;
 }
-export declare class Polyline extends PureComponent<PolylineProps, PolylineState> {
-    static contextType: import("react").Context<google.maps.Map>;
+export declare class Polyline extends React.PureComponent<PolylineProps, PolylineState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
@@ -32,9 +33,5 @@ state: PolylineState;
     componentWillUnmount: () => void;
-    render: () => any;
-    getDraggable: () => boolean;
-    getEditable: () => boolean;
-    getPath: () => google.maps.MVCArray<google.maps.LatLng>;
-    getVisible: () => boolean;
-    getMap: () => google.maps.Map;
+    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,18 +26,18 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import { PureComponent } 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 = {
-    onClick: 'click',
-    onDblClick: 'dblclick',
-    onDrag: 'drag',
-    onDragEnd: 'dragend',
-    onDragStart: 'dragstart',
-    onMouseDown: 'mousedown',
-    onMouseMove: 'mousemove',
-    onMouseOut: 'mouseout',
-    onMouseOver: 'mouseover',
-    onMouseUp: 'mouseup',
-    onRightClick: 'rightclick'
+    onClick: "click",
+    onDblClick: "dblclick",
+    onDrag: "drag",
+    onDragEnd: "dragend",
+    onDragStart: "dragstart",
+    onMouseDown: "mousedown",
+    onMouseMove: "mousemove",
+    onMouseOut: "mouseout",
+    onMouseOver: "mouseover",
+    onMouseUp: "mouseup",
+    onRightClick: "rightclick"
 };
@@ -63,3 +64,3 @@ var updaterMap = {
 };
-var Polyline = /** @class */ (function (_super) {
+var Polyline = (function (_super) {
     __extends(Polyline, _super);
@@ -73,18 +74,26 @@ function Polyline() {
         _this.componentDidMount = function () {
-            var polyline = new google.maps.Polyline(__assign({}, _this.props.options, { map: _this.context }));
+            var polyline = new google.maps.Polyline(typeof _this.props.options === 'object'
+                ? __assign({}, _this.props.options, { map: _this.context }) : {
+                map: _this.context
+            });
             _this.setState(function () { return ({
                 polyline: polyline
             }); }, function () {
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                    updaterMap: updaterMap,
-                    eventMap: eventMap,
-                    prevProps: {},
-                    nextProps: _this.props,
-                    instance: _this.state.polyline
-                });
+                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({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -98,18 +107,12 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
             _this.state.polyline && _this.state.polyline.setMap(null);
         };
-        _this.render = function () { return null; };
-        _this.getDraggable = function () { return _this.state.polyline.getDraggable(); };
-        _this.getEditable = function () { return _this.state.polyline.getEditable(); };
-        _this.getPath = function () { return _this.state.polyline.getPath(); };
-        _this.getVisible = function () { return _this.state.polyline.getVisible(); };
-        _this.getMap = function () { return _this.state.polyline.getMap(); };
+        _this.render = function () { return (React.createElement(React.Fragment, null)); };
         return _this;
     }
-    Polyline.contextType = MapContext;
+    Polyline.contextType = map_context_1.default;
     return Polyline;
-}(PureComponent));
-export { Polyline };
-export default Polyline;
-//# sourceMappingURL=Polyline.js.map
+}(React.PureComponent));
+exports.Polyline = Polyline;
+exports.default = Polyline;

lib/components/drawing/Rectangle.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
-import { Bounds } from '../../types';
+import * as React from "react";
 interface RectangleState {
-    rectangle?: google.maps.Rectangle;
+    rectangle: google.maps.Rectangle | null;
 }
 interface RectangleProps {
     options?: google.maps.RectangleOptions;
-    bounds?: Bounds;
+    bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral;
     draggable?: boolean;
@@ -26,5 +25,6 @@ editable?: boolean;
     onBoundsChanged?: () => void;
+    onLoad?: (rectangle: google.maps.Rectangle) => void;
 }
-export declare class Rectangle extends PureComponent<RectangleProps, RectangleState> {
-    static contextType: import("react").Context<google.maps.Map>;
+export declare class Rectangle extends React.PureComponent<RectangleProps, RectangleState> {
+    static contextType: React.Context<google.maps.Map | null>;
     static defaultProps: RectangleProps;
@@ -36,9 +36,5 @@ registeredEvents: google.maps.MapsEventListener[];
     componentWillUnmount: () => void;
-    render: () => any;
-    getBounds: () => google.maps.LatLngBounds;
-    getDraggable: () => boolean;
-    getEditable: () => boolean;
-    getMap: () => google.maps.Map;
-    getVisible: () => boolean;
+    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,19 +26,19 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import { PureComponent } 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 = {
-    onBoundsChanged: 'bounds_changed',
-    onClick: 'click',
-    onDblClick: 'dblclick',
-    onDrag: 'drag',
-    onDragEnd: 'dragend',
-    onDragStart: 'dragstart',
-    onMouseDown: 'mousedown',
-    onMouseMove: 'mousemove',
-    onMouseOut: 'mouseout',
-    onMouseOver: 'mouseover',
-    onMouseUp: 'mouseup',
-    onRightClick: 'rightclick'
+    onBoundsChanged: "bounds_changed",
+    onClick: "click",
+    onDblClick: "dblclick",
+    onDrag: "drag",
+    onDragEnd: "dragend",
+    onDragStart: "dragstart",
+    onMouseDown: "mousedown",
+    onMouseMove: "mousemove",
+    onMouseOut: "mouseout",
+    onMouseOver: "mouseover",
+    onMouseUp: "mouseup",
+    onRightClick: "rightclick"
 };
@@ -64,3 +65,3 @@ var updaterMap = {
 };
-var Rectangle = /** @class */ (function (_super) {
+var Rectangle = (function (_super) {
     __extends(Rectangle, _super);
@@ -74,18 +75,26 @@ function Rectangle() {
         _this.componentDidMount = function () {
-            var rectangle = new google.maps.Rectangle(__assign({}, _this.props.options, { map: _this.context }));
+            var rectangle = new google.maps.Rectangle(typeof _this.props.options === 'object'
+                ? __assign({}, _this.props.options, { map: _this.context }) : {
+                map: _this.context
+            });
             _this.setState(function () { return ({
                 rectangle: rectangle
             }); }, function () {
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                    updaterMap: updaterMap,
-                    eventMap: eventMap,
-                    prevProps: {},
-                    nextProps: _this.props,
-                    instance: _this.state.rectangle
-                });
+                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({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -99,14 +108,9 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
             _this.state.rectangle && _this.state.rectangle.setMap(null);
         };
-        _this.render = function () { return null; };
-        _this.getBounds = function () { return _this.state.rectangle.getBounds(); };
-        _this.getDraggable = function () { return _this.state.rectangle.getDraggable(); };
-        _this.getEditable = function () { return _this.state.rectangle.getEditable(); };
-        _this.getMap = function () { return _this.state.rectangle.getMap(); };
-        _this.getVisible = function () { return _this.state.rectangle.getVisible(); };
+        _this.render = function () { return (React.createElement(React.Fragment, null)); };
         return _this;
     }
-    Rectangle.contextType = MapContext;
+    Rectangle.contextType = map_context_1.default;
     Rectangle.defaultProps = {
@@ -118,5 +122,4 @@ draggable: false,
     return Rectangle;
-}(PureComponent));
-export { Rectangle };
-export default Rectangle;
-//# sourceMappingURL=Rectangle.js.map
+}(React.PureComponent));
+exports.Rectangle = Rectangle;
+exports.default = Rectangle;

lib/components/heatmap/HeatmapLayer.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
-import { HeatmapLayerData } from '../../types';
+import * as React from "react";
 interface HeatmapLayerState {
-    heatmapLayer?: google.maps.visualization.HeatmapLayer;
+    heatmapLayer: google.maps.visualization.HeatmapLayer | null;
 }
 interface HeatmapLayerProps {
-    data?: HeatmapLayerData;
+    data?: google.maps.MVCArray<google.maps.LatLng | google.maps.visualization.WeightedLocation> | google.maps.LatLng[] | google.maps.visualization.WeightedLocation[];
     options?: google.maps.visualization.HeatmapLayerOptions;
+    onLoad?: (heatmapLayer: google.maps.visualization.HeatmapLayer) => void;
 }
-export declare class HeatmapLayer extends PureComponent<HeatmapLayerProps, HeatmapLayerState> {
-    static contextType: import("react").Context<google.maps.Map>;
+export declare class HeatmapLayer extends React.PureComponent<HeatmapLayerProps, HeatmapLayerState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
@@ -19,6 +19,5 @@ state: HeatmapLayerState;
     componentWillUnmount: () => void;
-    render: () => any;
-    getData: () => google.maps.MVCArray<google.maps.LatLng | google.maps.visualization.WeightedLocation>;
-    getMap: () => google.maps.Map;
+    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,8 +26,7 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import { PureComponent } from 'react';
-//@ts-ignore
-import 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 = {};
@@ -41,8 +41,6 @@ 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);
@@ -56,18 +54,26 @@ function HeatmapLayer(props) {
         _this.componentDidMount = function () {
-            var heatmapLayer = new google.maps.visualization.HeatmapLayer(__assign({}, _this.props.options, { map: _this.context }));
+            var heatmapLayer = new google.maps.visualization.HeatmapLayer(typeof _this.props.options === 'object'
+                ? __assign({}, _this.props.options, { map: _this.context }) : {
+                map: _this.context
+            });
             _this.setState(function () { return ({
                 heatmapLayer: heatmapLayer
             }); }, function () {
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                    updaterMap: updaterMap,
-                    eventMap: eventMap,
-                    prevProps: {},
-                    nextProps: _this.props,
-                    instance: _this.state.heatmapLayer
-                });
+                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({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -81,3 +87,3 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
             if (_this.state.heatmapLayer) {
@@ -88,12 +94,9 @@ _this.state.heatmapLayer.setMap(null);
         _this.render = function () { return null; };
-        _this.getData = function () { return _this.state.heatmapLayer.getData(); };
-        _this.getMap = function () { return _this.state.heatmapLayer.getMap(); };
         invariant(google.maps.visualization, 'Did you include "visualization" in the libraries array prop in <LoadScript />?');
         return _this;
     }
-    HeatmapLayer.contextType = MapContext;
+    HeatmapLayer.contextType = map_context_1.default;
     return HeatmapLayer;
-}(PureComponent));
-export { HeatmapLayer };
-export default HeatmapLayer;
-//# sourceMappingURL=HeatmapLayer.js.map
+}(React.PureComponent));
+exports.HeatmapLayer = HeatmapLayer;
+exports.default = HeatmapLayer;

lib/components/kml/KmlLayer.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
+import { PureComponent } from "react";
 interface KmlLayerState {
-    kmlLayer?: google.maps.KmlLayer;
+    kmlLayer: google.maps.KmlLayer | null;
 }
@@ -13,5 +13,6 @@ interface KmlLayerProps {
     onStatusChanged?: () => void;
+    onLoad: (kmlLayer: google.maps.KmlLayer) => void;
 }
 export declare class KmlLayer extends PureComponent<KmlLayerProps, KmlLayerState> {
-    static contextType: import("react").Context<google.maps.Map>;
+    static contextType: import("react").Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
@@ -22,10 +23,5 @@ state: KmlLayerState;
     componentWillUnmount: () => void;
-    render: () => any;
-    getDefaultViewport: () => google.maps.LatLngBounds;
-    getMap: () => google.maps.Map;
-    getMetadata: () => google.maps.KmlLayerMetadata;
-    getStatus: () => google.maps.KmlLayerStatus;
-    getUrl: () => string;
-    getZIndex: () => number;
+    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,10 +15,10 @@ var extendStatics = function (d, b) {
 })();
-/* global google */
-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 = {
-    onClick: 'click',
-    onDefaultViewportChanged: 'defaultviewport_changed',
-    onStatusChanged: 'status_changed'
+    onClick: "click",
+    onDefaultViewportChanged: "defaultviewport_changed",
+    onStatusChanged: "status_changed"
 };
@@ -35,3 +36,3 @@ var updaterMap = {
 };
-var KmlLayer = /** @class */ (function (_super) {
+var KmlLayer = (function (_super) {
     __extends(KmlLayer, _super);
@@ -49,15 +50,20 @@ function KmlLayer() {
             }); }, function () {
-                _this.state.kmlLayer.setMap(_this.context);
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                    updaterMap: updaterMap,
-                    eventMap: eventMap,
-                    prevProps: {},
-                    nextProps: _this.props,
-                    instance: _this.state.kmlLayer
-                });
+                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({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -71,19 +77,14 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
             _this.state.kmlLayer && _this.state.kmlLayer.setMap(null);
         };
-        _this.render = function () { return null; };
-        _this.getDefaultViewport = function () { return _this.state.kmlLayer.getDefaultViewport(); };
-        _this.getMap = function () { return _this.state.kmlLayer.getMap(); };
-        _this.getMetadata = function () { return _this.state.kmlLayer.getMetadata(); };
-        _this.getStatus = function () { return _this.state.kmlLayer.getStatus(); };
-        _this.getUrl = function () { return _this.state.kmlLayer.getUrl(); };
-        _this.getZIndex = function () { return _this.state.kmlLayer.getZIndex(); };
         return _this;
     }
-    KmlLayer.contextType = MapContext;
+    KmlLayer.prototype.render = function () {
+        return null;
+    };
+    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

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
-export declare class BicyclingLayer extends PureComponent {
-    static contextType: import("react").Context<google.maps.Map>;
+import * as React from "react";
+interface BicyclingLayerState {
+    bicyclingLayer: google.maps.BicyclingLayer | null;
+}
+interface BicyclingLayerProps {
+    onLoad: (BicyclingLayer: google.maps.BicyclingLayer) => void;
+}
+export declare class BicyclingLayer extends React.PureComponent<BicyclingLayerProps, BicyclingLayerState> {
+    static contextType: React.Context<google.maps.Map | null>;
     state: {
-        bicyclingLayer: any;
+        bicyclingLayer: null;
     };
     componentDidMount: () => void;
     componentWillUnmount: () => void;
-    render: () => any;
-    getMap: () => any;
+    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,6 +15,6 @@ var extendStatics = function (d, b) {
 })();
-/* global google */
-import { PureComponent } 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);
@@ -30,19 +31,24 @@ function BicyclingLayer() {
             }); }, function () {
-                bicyclingLayer.setMap(_this.context);
+                if (_this.state.bicyclingLayer !== null) {
+                    _this.state.bicyclingLayer.setMap(_this.context);
+                    if (_this.props.onLoad) {
+                        _this.props.onLoad(_this.state.bicyclingLayer);
+                    }
+                }
             });
         };
         _this.componentWillUnmount = function () {
-            if (_this.state.bicyclingLayer) {
+            if (_this.state.bicyclingLayer !== null) {
                 _this.state.bicyclingLayer.setMap(null);
             }
         };
-        _this.render = function () { return null; };
-        _this.getMap = function () { return _this.state.bicyclingLayer.getMap(); };
         return _this;
     }
-    BicyclingLayer.contextType = MapContext;
+    BicyclingLayer.prototype.render = function () {
+        return null;
+    };
+    BicyclingLayer.contextType = map_context_1.default;
     return BicyclingLayer;
-}(PureComponent));
-export { BicyclingLayer };
-export default BicyclingLayer;
-//# sourceMappingURL=BicyclingLayer.js.map
+}(React.PureComponent));
+exports.BicyclingLayer = BicyclingLayer;
+exports.default = BicyclingLayer;

lib/components/maps/TrafficLayer.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
+import { PureComponent } from "react";
 interface TrafficLayerState {
-    trafficLayer?: google.maps.TrafficLayer;
+    trafficLayer: google.maps.TrafficLayer | null;
 }
 interface TrafficLayerProps {
     options?: google.maps.TrafficLayerOptions;
+    onLoad?: (trafficLayer: google.maps.TrafficLayer) => void;
 }
 export declare class TrafficLayer extends PureComponent<TrafficLayerProps, TrafficLayerState> {
-    static contextType: import("react").Context<google.maps.Map>;
+    static contextType: import("react").Context<google.maps.Map | null>;
     state: {
-        trafficLayer: any;
+        trafficLayer: null;
     };
@@ -18,5 +19,5 @@ registeredEvents: google.maps.MapsEventListener[];
     componentWillUnmount: () => void;
-    render: () => any;
-    getMap: () => any;
+    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,6 +26,6 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-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 = {};
@@ -36,3 +37,3 @@ var updaterMap = {
 };
-var TrafficLayer = /** @class */ (function (_super) {
+var TrafficLayer = (function (_super) {
     __extends(TrafficLayer, _super);
@@ -46,18 +47,26 @@ function TrafficLayer() {
         _this.componentDidMount = function () {
-            var trafficLayer = new google.maps.TrafficLayer(__assign({}, _this.props.options, { map: _this.context }));
+            var trafficLayer = new google.maps.TrafficLayer(typeof _this.props.options === 'object'
+                ? __assign({}, _this.props.options, { map: _this.context }) : {
+                map: _this.context
+            });
             _this.setState(function () { return ({
                 trafficLayer: trafficLayer
             }); }, function () {
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                    updaterMap: updaterMap,
-                    eventMap: eventMap,
-                    prevProps: {},
-                    nextProps: _this.props,
-                    instance: _this.state.trafficLayer
-                });
+                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({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -71,14 +80,16 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
-            _this.state.trafficLayer && _this.state.trafficLayer.setMap(null);
+            if (_this.state.trafficLayer !== null) {
+                helper_1.unregisterEvents(_this.registeredEvents);
+                _this.state.trafficLayer.setMap(null);
+            }
         };
-        _this.render = function () { return null; };
-        _this.getMap = function () { return _this.state.trafficLayer.getMap(); };
         return _this;
     }
-    TrafficLayer.contextType = MapContext;
+    TrafficLayer.prototype.render = function () {
+        return null;
+    };
+    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

 /// <reference types="googlemaps" />
-import { PureComponent, Context } from 'react';
+import * as React from "react";
 interface GroundOverlayState {
-    groundOverlay?: google.maps.GroundOverlay;
+    groundOverlay: google.maps.GroundOverlay | null;
 }
@@ -11,19 +11,17 @@ interface GroundOverlayProps {
     onClick?: (e: MouseEvent) => void;
-    url?: string;
+    url: string;
     bounds: google.maps.LatLngBounds;
+    onLoad: (groundOverlay: google.maps.GroundOverlay) => void;
 }
-export declare class GroundOverlay extends PureComponent<GroundOverlayProps, GroundOverlayState> {
-    static contextType: Context<google.maps.Map>;
+export declare class GroundOverlay extends React.PureComponent<GroundOverlayProps, GroundOverlayState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: GroundOverlayState;
-    constructor(props: GroundOverlayProps, context: Context<google.maps.Map>);
+    constructor(props: GroundOverlayProps, context: React.Context<google.maps.Map>);
     componentDidMount: () => void;
     componentDidUpdate: (prevProps: GroundOverlayProps) => void;
     componentWillUnmount: () => void;
-    render: () => any;
-    getBounds: () => google.maps.LatLngBounds;
-    getMap: () => google.maps.Map;
-    getOpacity: () => number;
-    getUrl: () => string;
+    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,11 +26,10 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import { PureComponent } from 'react';
-// @ts-ignore
-import warning from 'warning';
-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 = {
-    onDblClick: 'dblclick',
-    onClick: 'click'
+    onDblClick: "dblclick",
+    onClick: "click"
 };
@@ -41,3 +41,3 @@ var updaterMap = {
 };
-var GroundOverlay = /** @class */ (function (_super) {
+var GroundOverlay = (function (_super) {
     __extends(GroundOverlay, _super);
@@ -52,7 +52,13 @@ function GroundOverlay(props, context) {
             var groundOverlay = new google.maps.GroundOverlay(_this.props.url, _this.props.bounds, __assign({}, _this.props.options, { map: _this.context }));
-            _this.setState({ groundOverlay: groundOverlay });
+            _this.setState(function () {
+                groundOverlay;
+            }, function () {
+                if (_this.state.groundOverlay !== null && _this.props.onLoad) {
+                    _this.props.onLoad(_this.state.groundOverlay);
+                }
+            });
         };
         _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -70,15 +76,12 @@ eventMap: eventMap,
         };
-        _this.render = function () { return null; };
-        _this.getBounds = function () { return _this.state.groundOverlay.getBounds(); };
-        _this.getMap = function () { return _this.state.groundOverlay.getMap(); };
-        _this.getOpacity = function () { return _this.state.groundOverlay.getOpacity(); };
-        _this.getUrl = function () { return _this.state.groundOverlay.getUrl(); };
-        warning(!_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");
+        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;
     }
-    GroundOverlay.contextType = MapContext;
+    GroundOverlay.prototype.render = function () {
+        return null;
+    };
+    GroundOverlay.contextType = map_context_1.default;
     return GroundOverlay;
-}(PureComponent));
-export { GroundOverlay };
-export default GroundOverlay;
-//# sourceMappingURL=GroundOverlay.js.map
+}(React.PureComponent));
+exports.GroundOverlay = GroundOverlay;
+exports.default = GroundOverlay;

lib/components/places/Autocomplete.d.ts

 /// <reference types="googlemaps" />
-import * as React from 'react';
-import { PureComponent, RefObject, Context } from 'react';
-import { Bounds } from '../../types';
+import * as React from "react";
 interface AutocompleteState {
-    autocomplete?: google.maps.places.Autocomplete;
+    autocomplete: google.maps.places.Autocomplete | null;
 }
 interface AutocompleteProps {
-    bounds?: Bounds;
+    bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral;
     restrictions?: google.maps.places.ComponentRestrictions;
@@ -15,9 +13,10 @@ fields?: string[];
     onPlaceChanged?: () => void;
+    onLoad?: (autocomplete: google.maps.places.Autocomplete) => void;
 }
-export declare class Autocomplete extends PureComponent<AutocompleteProps, AutocompleteState> {
-    static contextType: React.Context<google.maps.Map>;
+export declare class Autocomplete extends React.PureComponent<AutocompleteProps, AutocompleteState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
-    containerElement: RefObject<HTMLDivElement>;
+    containerElement: React.RefObject<HTMLDivElement>;
     state: AutocompleteState;
-    constructor(props: AutocompleteProps, context: Context<google.maps.Map>);
+    constructor(props: AutocompleteProps, context: React.Context<google.maps.Map>);
     componentDidMount: () => void;
@@ -27,6 +26,4 @@ componentDidUpdate: (prevProps: AutocompleteProps) => void;
     render: () => JSX.Element;
-    getBounds: () => google.maps.LatLngBounds;
-    getFields: () => any;
-    getPlace: () => google.maps.places.PlaceResult;
 }
 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,10 +15,9 @@ var extendStatics = function (d, b) {
 })();
-/* global google */
-import * as React from 'react';
-import { PureComponent, Children, createRef } 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 = {
-    onPlaceChanged: 'place_changed'
+    onPlaceChanged: "place_changed"
 };
@@ -32,9 +32,5 @@ var updaterMap = {
     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);
@@ -46,3 +42,3 @@ },
 };
-var Autocomplete = /** @class */ (function (_super) {
+var Autocomplete = (function (_super) {
     __extends(Autocomplete, _super);
@@ -56,10 +52,17 @@ function Autocomplete(props, context) {
         _this.componentDidMount = function () {
-            var autocomplete = new google.maps.places.Autocomplete(_this.containerElement.current.querySelector('input'), _this.props.options);
-            _this.setState(function () { return ({
-                autocomplete: autocomplete
-            }); });
+            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.props.onLoad(_this.state.autocomplete);
+                    }
+                });
+            }
         };
         _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -73,19 +76,13 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
         };
-        _this.render = function () { return React.createElement("div", { ref: _this.containerElement }, Children.only(_this.props.children)); };
-        _this.getBounds = function () { return _this.state.autocomplete.getBounds(); };
-        // TODO: add to @types/googlemaps
-        // @ts-ignore
-        _this.getFields = function () { return _this.state.autocomplete.getFields(); };
-        _this.getPlace = function () { return _this.state.autocomplete.getPlace(); };
-        invariant(google.maps.places, 'Did you include "libraries=places" in the URL?');
-        _this.containerElement = createRef();
+        _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.contextType = MapContext;
+    Autocomplete.contextType = map_context_1.default;
     return Autocomplete;
-}(PureComponent));
-export { Autocomplete };
-export default Autocomplete;
-//# sourceMappingURL=Autocomplete.js.map
+}(React.PureComponent));
+exports.Autocomplete = Autocomplete;
+exports.default = Autocomplete;

lib/components/places/StandaloneSearchBox.d.ts

 /// <reference types="googlemaps" />
-import * as React from 'react';
-import { Context, PureComponent, RefObject } from 'react';
-import { Bounds } from '../../types';
+import * as React from "react";
 interface StandaloneSearchBoxState {
-    searchBox?: google.maps.places.SearchBox;
+    searchBox: google.maps.places.SearchBox | null;
 }
 interface StandaloneSearchBoxProps {
-    bounds?: Bounds;
+    bounds?: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral;
     options?: google.maps.places.SearchBoxOptions;
     onPlacesChanged?: () => void;
+    onLoad?: (searchBox: google.maps.places.SearchBox) => void;
 }
-declare class StandaloneSearchBox extends PureComponent<StandaloneSearchBoxProps, StandaloneSearchBoxState> {
-    static contextType: React.Context<google.maps.Map>;
+declare class StandaloneSearchBox extends React.PureComponent<StandaloneSearchBoxProps, StandaloneSearchBoxState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
-    containerElement: RefObject<HTMLDivElement>;
+    containerElement: React.RefObject<HTMLDivElement>;
     state: StandaloneSearchBoxState;
-    constructor(props: StandaloneSearchBoxProps, context: Context<google.maps.Map>);
+    constructor(props: StandaloneSearchBoxProps, context: React.Context<google.maps.Map>);
     componentDidMount: () => void;
@@ -23,5 +22,4 @@ componentDidUpdate: (prevProps: StandaloneSearchBoxProps) => void;
     render: () => JSX.Element;
-    getBounds: () => google.maps.LatLngBounds;
-    getPlaces: () => google.maps.places.PlaceResult[];
 }
 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,11 +15,9 @@ var extendStatics = function (d, b) {
 })();
-/* global google */
-import * as React from 'react';
-import { createRef, Children, PureComponent } from 'react';
-//@ts-ignore
-import invariant from 'invariant'; // Do we need this dependency?
-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 = {
-    onPlacesChanged: 'places_changed'
+    onPlacesChanged: "places_changed"
 };
@@ -30,3 +29,3 @@ var updaterMap = {
 };
-var StandaloneSearchBox = /** @class */ (function (_super) {
+var StandaloneSearchBox = (function (_super) {
     __extends(StandaloneSearchBox, _super);
@@ -40,18 +39,26 @@ function StandaloneSearchBox(props, context) {
         _this.componentDidMount = function () {
-            var searchBox = new google.maps.places.SearchBox(_this.containerElement.current.querySelector('input'), _this.props.options);
-            _this.setState(function () { return ({
-                searchBox: searchBox
-            }); }, function () {
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                    updaterMap: updaterMap,
-                    eventMap: eventMap,
-                    prevProps: {},
-                    nextProps: _this.props,
-                    instance: _this.state.searchBox
+            var input = _this.containerElement.current.querySelector("input");
+            if (input) {
+                var searchBox_1 = new google.maps.places.SearchBox(input, _this.props.options);
+                _this.setState(function () { return ({
+                    searchBox: searchBox_1
+                }); }, 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({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -65,15 +72,12 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
         };
-        _this.render = function () { return React.createElement("div", { ref: _this.containerElement }, Children.only(_this.props.children)); };
-        _this.getBounds = function () { return _this.state.searchBox.getBounds(); };
-        _this.getPlaces = function () { return _this.state.searchBox.getPlaces(); };
+        _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 = createRef();
+        _this.containerElement = React.createRef();
         return _this;
     }
-    StandaloneSearchBox.contextType = MapContext;
+    StandaloneSearchBox.contextType = map_context_1.default;
     return StandaloneSearchBox;
-}(PureComponent));
-export default StandaloneSearchBox;
-//# sourceMappingURL=StandaloneSearchBox.js.map
+}(React.PureComponent));
+exports.default = StandaloneSearchBox;

lib/components/streetview/StreetViewPanorama.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
+import * as React from "react";
 interface StreetViewPanoramaState {
-    streetViewPanorama?: google.maps.StreetViewPanorama;
+    streetViewPanorama: google.maps.StreetViewPanorama | null;
 }
@@ -17,22 +17,14 @@ interface StreetViewPanoramaProps {
     onZoomChange?: () => void;
+    onLoad?: (streetViewPanorama: any) => void;
 }
-export declare class StreetViewPanorama extends PureComponent<StreetViewPanoramaProps, StreetViewPanoramaState> {
-    static contextType: import("react").Context<google.maps.Map>;
+export declare class StreetViewPanorama extends React.PureComponent<StreetViewPanoramaProps, StreetViewPanoramaState> {
+    static contextType: React.Context<google.maps.Map | null>;
     registeredEvents: google.maps.MapsEventListener[];
     state: StreetViewPanoramaState;
     componentDidMount: () => void;
-    componentDidUpdate: (prevProps: any) => void;
+    componentDidUpdate: (prevProps: StreetViewPanoramaProps) => void;
     componentWillUnmount: () => void;
-    render: () => any;
-    getLinks: () => google.maps.StreetViewLink[];
-    getLocation: () => google.maps.StreetViewLocation;
-    getMotionTracking: () => boolean;
-    getPano: () => string;
-    getPhotographerPov: () => google.maps.StreetViewPov;
-    getPosition: () => google.maps.LatLng;
-    getPov: () => google.maps.StreetViewPov;
-    getStatus: () => google.maps.StreetViewStatus;
-    getVisible: () => boolean;
-    getZoom: () => number;
+    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,19 +15,18 @@ var extendStatics = function (d, b) {
 })();
-/* global google */
-import { PureComponent } 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 = {
-    onCloseClick: 'closeclick',
-    onPanoChanged: 'pano_changed',
-    onPositionChanged: 'position_changed',
-    onPovChanged: 'pov_changed',
-    onResize: 'resize',
-    onStatusChanged: 'status_changed',
-    onVisibleChanged: 'visible_changed',
-    onZoomChanged: 'zoom_changed'
+    onCloseClick: "closeclick",
+    onPanoChanged: "pano_changed",
+    onPositionChanged: "position_changed",
+    onPovChanged: "pov_changed",
+    onResize: "resize",
+    onStatusChanged: "status_changed",
+    onVisibleChanged: "visible_changed",
+    onZoomChanged: "zoom_changed"
 };
 var updaterMap = {
     register: function (instance, provider, options) {
-        // @ts-ignore
         instance.registerPanoProvider(provider, options);
@@ -59,3 +59,3 @@ },
 };
-var StreetViewPanorama = /** @class */ (function (_super) {
+var StreetViewPanorama = (function (_super) {
     __extends(StreetViewPanorama, _super);
@@ -72,7 +72,20 @@ function StreetViewPanorama() {
                 streetViewPanorama: streetViewPanorama
-            }); }, function () { });
+            }); }, 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({
+            helper_1.unregisterEvents(_this.registeredEvents);
+            _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                 updaterMap: updaterMap,
@@ -86,3 +99,3 @@ eventMap: eventMap,
         _this.componentWillUnmount = function () {
-            unregisterEvents(_this.registeredEvents);
+            helper_1.unregisterEvents(_this.registeredEvents);
             if (_this.state.streetViewPanorama) {
@@ -92,20 +105,11 @@ _this.state.streetViewPanorama.setVisible(false);
         };
-        _this.render = function () { return null; };
-        _this.getLinks = function () { return _this.state.streetViewPanorama.getLinks(); };
-        _this.getLocation = function () { return _this.state.streetViewPanorama.getLocation(); };
-        _this.getMotionTracking = function () { return _this.state.streetViewPanorama.getMotionTracking(); };
-        _this.getPano = function () { return _this.state.streetViewPanorama.getPano(); };
-        _this.getPhotographerPov = function () { return _this.state.streetViewPanorama.getPhotographerPov(); };
-        _this.getPosition = function () { return _this.state.streetViewPanorama.getPosition(); };
-        _this.getPov = function () { return _this.state.streetViewPanorama.getPov(); };
-        _this.getStatus = function () { return _this.state.streetViewPanorama.getStatus(); };
-        _this.getVisible = function () { return _this.state.streetViewPanorama.getVisible(); };
-        _this.getZoom = function () { return _this.state.streetViewPanorama.getZoom(); };
         return _this;
     }
-    StreetViewPanorama.contextType = MapContext;
+    StreetViewPanorama.prototype.render = function () {
+        return null;
+    };
+    StreetViewPanorama.contextType = map_context_1.default;
     return StreetViewPanorama;
-}(PureComponent));
-export { StreetViewPanorama };
-export default StreetViewPanorama;
-//# sourceMappingURL=StreetViewPanorama.js.map
+}(React.PureComponent));
+exports.StreetViewPanorama = StreetViewPanorama;
+exports.default = StreetViewPanorama;

lib/components/streetview/StreetViewService.d.ts

 /// <reference types="googlemaps" />
-import { PureComponent } from 'react';
-export declare class StreetViewService extends PureComponent {
-    static contextType: import("react").Context<google.maps.Map>;
+import * as React from "react";
+interface StreetViewServiceProps {
+    onLoad: (streetViewService: google.maps.StreetViewService) => void;
+}
+interface StreetViewServiceState {
+    streetViewService: google.maps.StreetViewService | null;
+}
+export declare class StreetViewService extends React.PureComponent<StreetViewServiceProps, StreetViewServiceState> {
+    static contextType: React.Context<google.maps.Map | null>;
     state: {
-        streetViewService: any;
+        streetViewService: null;
     };
     componentDidMount: () => void;
-    render: () => any;
-    getPanorama: () => any;
+    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,7 +15,6 @@ var extendStatics = function (d, b) {
 })();
-/* global google */
-import { PureComponent } from 'react';
-// TODO: next line is broken import
-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);
@@ -30,15 +30,18 @@ function StreetViewService() {
                 streetViewService: streetViewService
-            }); });
+            }); }, function () {
+                if (_this.state.streetViewService !== null &&
+                    _this.props.onLoad) {
+                    _this.props.onLoad(_this.state.streetViewService);
+                }
+            });
         };
-        _this.render = function () { return null; };
-        _this.getPanorama = function () {
-            return _this.state.streetViewService.getPanorama();
-        };
         return _this;
     }
-    StreetViewService.contextType = MapContext;
+    StreetViewService.prototype.render = function () {
+        return null;
+    };
+    StreetViewService.contextType = map_context_1.default;
     return StreetViewService;
-}(PureComponent));
-export { StreetViewService };
-export default StreetViewService;
-//# sourceMappingURL=StreetViewService.js.map
+}(React.PureComponent));
+exports.StreetViewService = StreetViewService;
+exports.default = StreetViewService;

lib/GoogleMap.d.ts

 /// <reference types="googlemaps" />
-import { CSSProperties, PureComponent } from 'react';
-import { Bounds, LatLng } from './types';
+import * as React from "react";
 interface GoogleMapState {
-    map: google.maps.Map;
+    map: google.maps.Map | null;
 }
@@ -10,7 +9,7 @@ interface GoogleMapProps {
     reuseSameInstance?: boolean;
-    mapContainerStyle?: CSSProperties;
+    mapContainerStyle?: React.CSSProperties;
     mapContainerClassName?: string;
     options?: google.maps.MapOptions;
     extraMapTypes?: google.maps.MapType[];
-    center?: LatLng;
+    center?: google.maps.LatLng | google.maps.LatLngLiteral;
     clickableIcons?: boolean;
@@ -43,28 +42,16 @@ heading?: number;
 }
-export declare class GoogleMap extends PureComponent<GoogleMapProps, GoogleMapState> {
+export declare class GoogleMap extends React.PureComponent<GoogleMapProps, GoogleMapState> {
     static defaultProps: GoogleMapProps;
+    constructor(props: GoogleMapProps);
     state: GoogleMapState;
     registeredEvents: google.maps.MapsEventListener[];
-    mapRef: HTMLElement;
-    getInstance: () => google.maps.Map;
+    mapRef: HTMLElement | null;
+    getInstance: () => google.maps.Map | null;
     componentDidMount: () => void;
     componentDidUpdate: (prevProps: GoogleMapProps) => void;
     componentWillUnmount: () => void;
-    getRef: (ref: HTMLElement) => void;
+    getRef: (ref: HTMLDivElement | null) => void;
     render: () => JSX.Element;
-    fitBounds: (bounds: Bounds, padding?: number | google.maps.Padding) => void;
-    panBy: (x: number, y: number) => void;
-    panTo: (latLng: LatLng) => void;
-    panToBounds: (latLngBounds: Bounds, padding?: number | google.maps.Padding) => void;
-    getBounds: () => google.maps.LatLngBounds;
-    getCenter: () => google.maps.LatLng;
-    getClickableIcons: () => any;
-    getDiv: () => Element;
-    getHeading: () => number;
-    getMapTypeId: () => string | google.maps.MapTypeId;
-    getProjection: () => google.maps.Projection;
-    getStreetView: () => google.maps.StreetViewPanorama;
-    getTilt: () => number;
-    getZoom: () => number;
 }
 export default GoogleMap;
+//# sourceMappingURL=GoogleMap.d.ts.map

lib/GoogleMap.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -23,28 +24,27 @@ var extendStatics = function (d, b) {
 };
-/* global google */
-import * as React from 'react';
-import { PureComponent } 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 = {
-    onDblClick: 'dblclick',
-    onDragEnd: 'dragend',
-    onDragStart: 'dragstart',
-    onMapTypeIdChanged: 'maptypeid_changed',
-    onMouseMove: 'mousemove',
-    onMouseOut: 'mouseout',
-    onMouseOver: 'mouseover',
-    onRightClick: 'rightclick',
-    onTilesLoaded: 'tilesloaded',
-    onBoundsChanged: 'bounds_changed',
-    onCenterChanged: 'center_changed',
-    onClick: 'click',
-    onDrag: 'drag',
-    onHeadingChanged: 'heading_changed',
-    onIdle: 'idle',
-    onProjectionChanged: 'projection_changed',
-    onResize: 'resize',
-    onTiltChanged: 'tilt_changed',
-    onZoomChanged: 'zoom_changed'
+    onDblClick: "dblclick",
+    onDragEnd: "dragend",
+    onDragStart: "dragstart",
+    onMapTypeIdChanged: "maptypeid_changed",
+    onMouseMove: "mousemove",
+    onMouseOut: "mouseout",
+    onMouseOver: "mouseover",
+    onRightClick: "rightclick",
+    onTilesLoaded: "tilesloaded",
+    onBoundsChanged: "bounds_changed",
+    onCenterChanged: "center_changed",
+    onClick: "click",
+    onDrag: "drag",
+    onHeadingChanged: "heading_changed",
+    onIdle: "idle",
+    onProjectionChanged: "projection_changed",
+    onResize: "resize",
+    onTiltChanged: "tilt_changed",
+    onZoomChanged: "zoom_changed"
 };
@@ -82,6 +82,6 @@ var updaterMap = {
 };
-var GoogleMap = /** @class */ (function (_super) {
+var GoogleMap = (function (_super) {
     __extends(GoogleMap, _super);
-    function GoogleMap() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function GoogleMap(props) {
+        var _this = _super.call(this, props) || this;
         _this.state = {
@@ -93,4 +93,6 @@ map: null
             var _a = _this.props, reuseSameInstance = _a.reuseSameInstance, rest = __rest(_a, ["reuseSameInstance"]);
-            var map = reuseSameInstance && restoreInstance(rest);
-            return map || new google.maps.Map(_this.mapRef, _this.props.options);
+            var instance = reuseSameInstance && instance_persistance_1.restoreInstance(rest);
+            return instance
+                ? instance
+                : new google.maps.Map(_this.mapRef, _this.props.options);
         };
@@ -101,26 +103,34 @@ _this.componentDidMount = function () {
             }); }, function () {
-                _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+                if (_this.state.map !== null) {
+                    _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
+                        updaterMap: updaterMap,
+                        eventMap: eventMap,
+                        prevProps: {},
+                        nextProps: _this.props,
+                        instance: _this.state.map
+                    });
+                    if (_this.props.onLoad) {
+                        _this.props.onLoad(_this.state.map);
+                    }
+                }
+            });
+        };
+        _this.componentDidUpdate = function (prevProps) {
+            if (_this.state.map !== null) {
+                helper_1.unregisterEvents(_this.registeredEvents);
+                _this.registeredEvents = helper_1.applyUpdatersToPropsAndRegisterEvents({
                     updaterMap: updaterMap,
                     eventMap: eventMap,
-                    prevProps: {},
+                    prevProps: prevProps,
                     nextProps: _this.props,
                     instance: _this.state.map
                 });
-                _this.props.onLoad(_this.state.map);
-            });
+            }
         };
-        _this.componentDidUpdate = function (prevProps) {
-            unregisterEvents(_this.registeredEvents);
-            _this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-                updaterMap: updaterMap,
-                eventMap: eventMap,
-                prevProps: prevProps,
-                nextProps: _this.props,
-                instance: _this.state.map
-            });
-        };
         _this.componentWillUnmount = function () {
-            var _a = _this.props, reuseSameInstance = _a.reuseSameInstance, id = _a.id;
-            reuseSameInstance && saveInstance(id, _this.state.map);
-            unregisterEvents(_this.registeredEvents);
+            if (_this.state.map) {
+                var _a = _this.props, reuseSameInstance = _a.reuseSameInstance, id = _a.id;
+                reuseSameInstance && instance_persistance_1.saveInstance(id, _this.state.map);
+                helper_1.unregisterEvents(_this.registeredEvents);
+            }
         };
@@ -134,35 +144,17 @@ _this.getRef = function (ref) {
             return (React.createElement("div", { id: id, ref: _this.getRef, style: mapContainerStyle, className: mapContainerClassName },
-                React.createElement(MapContext.Provider, { value: map }, map !== null ? children : null)));
+                React.createElement(map_context_1.default.Provider, { value: map }, map !== null
+                    ? children
+                    : (React.createElement(React.Fragment, null)))));
         };
-        _this.fitBounds = function (bounds, padding) {
-            return _this.state.map.fitBounds(bounds, padding);
-        };
-        _this.panBy = function (x, y) { return _this.state.map.panBy(x, y); };
-        _this.panTo = function (latLng) { return _this.state.map.panTo(latLng); };
-        _this.panToBounds = function (latLngBounds, padding) {
-            return _this.state.map.panToBounds(latLngBounds, padding);
-        };
-        _this.getBounds = function () { return _this.state.map.getBounds(); };
-        _this.getCenter = function () { return _this.state.map.getCenter(); };
-        // Function exists but it missing in typings
-        //@ts-ignore Function exists but it missing in typings
-        _this.getClickableIcons = function () { return _this.state.map.getClickableIcons(); };
-        _this.getDiv = function () { return _this.state.map.getDiv(); };
-        _this.getHeading = function () { return _this.state.map.getHeading(); };
-        _this.getMapTypeId = function () { return _this.state.map.getMapTypeId(); };
-        _this.getProjection = function () { return _this.state.map.getProjection(); };
-        _this.getStreetView = function () { return _this.state.map.getStreetView(); };
-        _this.getTilt = function () { return _this.state.map.getTilt(); };
-        _this.getZoom = function () { return _this.state.map.getZoom(); };
+        _this.mapRef = null;
         return _this;
     }
     GoogleMap.defaultProps = {
-        id: 'defaultMapId',
+        id: "defaultMapId",
         reuseSameInstance: false,
-        onLoad: function (map) { }
+        onLoad: function () { }
     };
     return GoogleMap;
-}(PureComponent));
-export { GoogleMap };
-export default GoogleMap;
-//# sourceMappingURL=GoogleMap.js.map
+}(React.PureComponent));
+exports.GoogleMap = GoogleMap;
+exports.default = GoogleMap;

lib/index.d.ts

@@ -1,23 +0,24 @@
-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 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 StreetViewCoverageLayer } from './components/streetview/StreetViewCoverageLayer';
-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';
+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.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 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 StreetViewCoverageLayer } from './components/streetview/StreetViewCoverageLayer';
-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 { Component, RefObject, ReactNode } from "react";
 interface LoadScriptState {
@@ -25,3 +25,3 @@ loaded: boolean;
         preventGoogleFontsLoading: boolean;
-        libraries: any[];
+        libraries: never[];
     };
@@ -31,3 +31,3 @@ check: RefObject<HTMLDivElement>;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: any): void;
+    componentDidUpdate(prevProps: LoadScriptProps): void;
     componentWillUnmount(): void;
@@ -40,1 +40,2 @@ isCleaningUp: () => Promise<{}>;
 export default LoadScript;
+//# sourceMappingURL=LoadScript.d.ts.map

lib/LoadScript.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -49,9 +50,10 @@ 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 react_1 = 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 LoadScript = (function (_super) {
     __extends(LoadScript, _super);
@@ -62,3 +64,3 @@ function LoadScript(props) {
             return __generator(this, function (_a) {
-                return [2 /*return*/, new Promise(function (resolve) {
+                return [2, new Promise(function (resolve) {
                         if (!cleaningUp) {
@@ -68,3 +70,3 @@ resolve();
                         else {
-                            if (isBrowser) {
+                            if (isbrowser_1.isBrowser) {
                                 var timer_1 = window.setInterval(function () {
@@ -84,24 +86,33 @@ if (!cleaningUp) {
             var script = document.getElementById(_this.props.id);
-            if (script) {
+            if (script && script.parentNode) {
                 script.parentNode.removeChild(script);
             }
             Array.prototype.slice
-                .call(document.getElementsByTagName('script'))
-                .filter(function (script) { return script.src.includes('maps.googleapis'); })
+                .call(document.getElementsByTagName("script"))
+                .filter(function (script) {
+                return script.src.includes("maps.googleapis");
+            })
                 .forEach(function (script) {
-                script.parentNode.removeChild(script);
+                if (script.parentNode) {
+                    script.parentNode.removeChild(script);
+                }
             });
             Array.prototype.slice
-                .call(document.getElementsByTagName('link'))
+                .call(document.getElementsByTagName("link"))
                 .filter(function (link) {
-                return link.href === 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans';
+                return link.href ===
+                    "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans";
             })
                 .forEach(function (link) {
-                link.parentNode.removeChild(link);
+                if (link.parentNode) {
+                    link.parentNode.removeChild(link);
+                }
             });
             Array.prototype.slice
-                .call(document.getElementsByTagName('style'))
-                .filter(function (style) { return style.innerText.includes('.gm-'); })
+                .call(document.getElementsByTagName("style"))
+                .filter(function (style) { return style.innerText.includes(".gm-"); })
                 .forEach(function (style) {
-                style.parentNode.removeChild(style);
+                if (style.parentNode) {
+                    style.parentNode.removeChild(style);
+                }
             });
@@ -112,10 +123,12 @@ };
             if (preventGoogleFontsLoading) {
-                preventGoogleFonts();
+                prevent_google_fonts_1.preventGoogleFonts();
             }
-            injectScript({
+            injectscript_1.injectScript({
                 id: id,
-                url: "https://maps.googleapis.com/maps/api/js?v=" + version + "&key=" + googleMapsApiKey + "&language=" + language + "&region=" + region + (libraries ? "&libraries=" + libraries.join(',') : '')
+                url: "https://maps.googleapis.com/maps/api/js?v=" + version + "&key=" + googleMapsApiKey + "&language=" + language + "&region=" + region + (libraries ? "&libraries=" + libraries.join(",") : "")
             })
                 .then(function () {
-                _this.props.onLoad();
+                if (_this.props.onLoad) {
+                    _this.props.onLoad();
+                }
                 _this.setState(function () { return ({
@@ -126,4 +139,6 @@ 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);
+                }
+                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");
             });
@@ -134,10 +149,9 @@ };
         };
-        _this.check = createRef();
+        _this.check = react_1.createRef();
         return _this;
     }
     LoadScript.prototype.componentDidMount = function () {
-        if (isBrowser) {
-            // @ts-ignore
+        if (isbrowser_1.isBrowser) {
             if (window.google && !cleaningUp) {
-                console.error('google api is already presented');
+                console.error("google api is already presented");
                 return;
@@ -150,10 +164,8 @@ }
         var _this = this;
-        if (isBrowser && prevProps.language !== this.props.language) {
+        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;
@@ -166,7 +178,6 @@ _this.injectScript();
         var _this = this;
-        if (isBrowser) {
+        if (isbrowser_1.isBrowser) {
             this.cleanup();
             setTimeout(function () {
                 if (!_this.check.current) {
-                    //@ts-ignore
                     delete window.google;
@@ -176,3 +187,5 @@ cleaningUp = false;
             }, 1);
-            this.props.onUnmount();
+            if (this.props.onUnmount) {
+                this.props.onUnmount();
+            }
         }
@@ -192,4 +205,3 @@ };
     return LoadScript;
-}(Component));
-export default LoadScript;
-//# sourceMappingURL=LoadScript.js.map
+}(react_1.Component));
+exports.default = LoadScript;

lib/map-context.d.ts

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

lib/map-context.js

@@ -1,5 +0,5 @@
-/* global google */
-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) => void;
+export declare const forEach: (obj: any, fn: any) => any;
+//# sourceMappingURL=foreach.d.ts.map

lib/utils/foreach.js

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

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,5 +0,5 @@
-/* eslint-disable filenames/match-regex */
-/* global google */
-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) {
@@ -14,8 +14,8 @@ 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) {
-        if (typeof props[onEventName] === 'function') {
+function registerEvents(props, instance, eventMap) {
+    var registeredList = reduce_1.reduce(eventMap, function (acc, googleEventName, onEventName) {
+        if (typeof props[onEventName] === "function") {
             acc.push(google.maps.event.addListener(instance, googleEventName, props[onEventName]));
@@ -27,10 +27,12 @@ }
 }
-export function unregisterEvents(events) {
+exports.registerEvents = registerEvents;
+function unregisterEvent(registered) {
+    google.maps.event.removeListener(registered);
+}
+function unregisterEvents(events) {
     if (events === void 0) { events = []; }
     events.map(unregisterEvent);
 }
-function unregisterEvent(registered) {
-    google.maps.event.removeListener(registered);
-}
-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;
@@ -40,2 +42,2 @@ applyUpdaterToNextProps(updaterMap, prevProps, nextProps, instance);
 }
-//# sourceMappingURL=helper.js.map
+exports.applyUpdatersToPropsAndRegisterEvents = applyUpdatersToPropsAndRegisterEvents;

lib/utils/injectscript.d.ts

@@ -1,4 +0,7 @@
-export declare const injectScript: ({ url, id }: {
-    url: any;
-    id: any;
-}) => Promise<{}>;
+interface InjectScriptArg {
+    url: string;
+    id: string;
+}
+export declare const injectScript: ({ url, id }: InjectScriptArg) => Promise<any>;
+export {};
+//# sourceMappingURL=injectscript.d.ts.map

lib/utils/injectscript.js

@@ -1,12 +0,15 @@
-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 (typeof document === 'undefined') {
-        return Promise.reject(new Error('document is undefined'));
+    if (isbrowser_1.isBrowser) {
+        return Promise.reject(new Error("document is undefined"));
     }
     return new Promise(function (resolve, reject) {
-        if (document.getElementById(id) !== null) {
+        if (document.getElementById(id)) {
             return resolve(id);
         }
-        var script = document.createElement('script');
-        script.type = 'text/javascript';
+        var script = document.createElement("script");
+        script.type = "text/javascript";
         script.src = url;
@@ -22,2 +25,1 @@ script.id = id;
 };
-//# sourceMappingURL=injectscript.js.map

lib/utils/instance-persistance.d.ts

 /// <reference types="googlemaps" />
-import { LatLng } from './../types';
-export declare const restoreInstance: ({ id, zoom, center, mapContainerStyle, options }: {
+export interface RestoreInstanceArg {
     id: string;
     zoom?: number;
-    center?: LatLng;
-    mapContainerStyle?: any;
+    center?: google.maps.LatLng | google.maps.LatLngLiteral;
+    mapContainerStyle?: {
+        [key: string]: any;
+    };
     options?: google.maps.MapOptions;
-}) => google.maps.Map;
+}
+export declare const restoreInstance: ({ id, zoom, center, mapContainerStyle, options }: RestoreInstanceArg) => false | google.maps.Map;
 export declare const saveInstance: (id: string, map: google.maps.Map) => void;
+//# sourceMappingURL=instance-persistance.d.ts.map

lib/utils/instance-persistance.js

@@ -1,2 +0,3 @@
-/* global google */
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 var clearChildren = function (node) {
@@ -16,5 +17,5 @@ if (node) {
     if (!element) {
-        element = document.createElement('div');
+        element = document.createElement("div");
         element.id = hiddenMapContainer;
-        element.style.display = 'none';
+        element.style.display = "none";
         document.body.appendChild(element);
@@ -24,3 +25,3 @@ }
 };
-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;
@@ -30,22 +31,33 @@ var map = window[getMapInstanceId(id)];
     if (map && hiddenContainer.children.length === 1) {
-        map.setZoom(zoom);
-        map.setCenter(center);
-        map.setOptions(options);
+        if (zoom) {
+            map.setZoom(zoom);
+        }
+        if (center) {
+            map.setCenter(center);
+        }
+        if (options) {
+            map.setOptions(options);
+        }
         var mapContainer_1 = document.getElementById(id);
-        clearChildren(mapContainer_1);
-        mapContainer_1.appendChild(hiddenContainer.children[0]);
-        // Copy mapContainerStyle to mapContainer
-        Object.keys(mapContainerStyle).forEach(function (styleKey) {
-            mapContainer_1.style[styleKey] = mapContainerStyle[styleKey];
-        });
+        if (mapContainer_1) {
+            clearChildren(mapContainer_1);
+            mapContainer_1.appendChild(hiddenContainer.children[0]);
+            if (mapContainerStyle) {
+                Object.keys(mapContainerStyle).forEach(function (styleKey) {
+                    mapContainer_1.style[styleKey] = mapContainerStyle[styleKey];
+                });
+            }
+        }
         return map;
     }
+    return false;
 };
-export var saveInstance = function (id, map) {
+exports.saveInstance = function (id, map) {
     var hiddenContainer = getHiddenMapContainer(id);
     clearChildren(hiddenContainer);
     var mapContainer = document.getElementById(id);
-    hiddenContainer.appendChild(mapContainer.children[0]);
+    if (mapContainer && mapContainer.children && mapContainer.children[0]) {
+        hiddenContainer.appendChild(mapContainer.children[0]);
+    }
     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,26 +0,25 @@
-// 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 &&
-            element.href.indexOf('https://fonts.googleapis.com/css?family=Roboto') === 0) {
+            element.href.indexOf("https://fonts.googleapis.com/css?family=Roboto") === 0) {
             return true;
         }
-        // roboto style elements
-        if (element.tagName.toLowerCase() === 'style' &&
+        if (element.tagName.toLowerCase() === "style" &&
             element.styleSheet &&
             element.styleSheet.cssText &&
-            element.styleSheet.cssText.replace('\r\n', '').indexOf('.gm-style') === 0) {
-            element.styleSheet.cssText = '';
+            element.styleSheet.cssText.replace("\r\n", "").indexOf(".gm-style") === 0) {
+            element.styleSheet.cssText = "";
             return true;
         }
-        // roboto style elements for other browsers
-        if (element.tagName.toLowerCase() === 'style' &&
+        if (element.tagName.toLowerCase() === "style" &&
             element.innerHTML &&
-            element.innerHTML.replace('\r\n', '').indexOf('.gm-style') === 0) {
-            element.innerHTML = '';
+            element.innerHTML.replace("\r\n", "").indexOf(".gm-style") === 0) {
+            element.innerHTML = "";
             return true;
         }
-        // when google tries to add empty style
-        if (element.tagName.toLowerCase() === 'style' && !element.styleSheet && !element.innerHTML) {
+        if (element.tagName.toLowerCase() === "style" &&
+            !element.styleSheet &&
+            !element.innerHTML) {
             return true;
@@ -30,8 +29,4 @@ }
     };
-    // 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 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) {
@@ -43,4 +38,2 @@ if (!isRobotoStyle(newElement)) {
     var appendChild = head.appendChild;
-    // TODO: adding return before reflect solves the TS issue
-    //@ts-ignore
     head.appendChild = function (textNode) {
@@ -52,2 +45,1 @@ if (!isRobotoStyle(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,6 +0,5 @@
-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 (newAcc, key) { return fn(newAcc, obj[key], key); }, acc);
 };
-//# sourceMappingURL=reduce.js.map

package.json

 {
   "name": "@react-google-maps/api",
-  "version": "1.1.0",
+  "version": "1.2.0-alpha.0",
   "description": "React.js Google Maps API integration",
@@ -58,21 +58,23 @@ "license": "MIT",
   "scripts": {
-    "test": "npx jest",
     "build": "rimraf ./lib && tsc",
     "clean": "rimraf ./package-lock.json ./yarn.lock ./node_modules/ && yarn",
     "update": "yarn-check -u",
-    "lint": "npx eslint ./src --fix",
+    "lint": "npx eslint ./src/**/*.{ts,tsx}",
     "publish": "npm run build && npm publish .",
     "publish:next": "npm run build && npm publish . --tag next",
     "docs:dev": "npx styleguidist server",
-    "docs:build": "npx styleguidist build"
+    "docs:build": "npx styleguidist build",
+    "tc": "tsc -p ./tsconfig.json --noEmit --traceResolution"
   },
   "dependencies": {
+    "@types/babel-types": "7.0.6",
+    "@types/googlemaps": "3.30.19",
+    "@types/invariant": "2.2.29",
+    "@types/markerclustererplus": "2.1.33",
+    "@types/react": "16.8.7",
     "google-maps-infobox": "2.0.0",
     "invariant": "2.2.4",
-    "marker-clusterer-plus": "2.1.4",
-    "markerwithlabel": "2.0.2",
-    "warning": "4.0.3"
+    "markerclustererplus": "2.1.4"
   },
   "peerDependencies": {
-    "prop-types": "^15.5.8",
     "react": "^16.6.3",
@@ -82,20 +84,11 @@ "react-dom": "^16.6.3"
   "devDependencies": {
-    "@types/acorn": "4.0.5",
-    "@types/eslint": "4.16.6",
-    "@types/googlemaps": "3.30.16",
-    "@types/invariant": "2.2.29",
-    "@types/markerclustererplus": "2.1.33",
-    "@types/react": "16.8.4",
-    "@types/react-dom": "16.8.2",
-    "@types/webpack-bundle-analyzer": "2.13.1",
-    "@typescript-eslint/eslint-plugin": "1.4.1",
-    "@typescript-eslint/parser": "1.4.1",
-    "acorn": "6.1.0",
+    "@typescript-eslint/eslint-plugin": "1.4.2",
+    "@typescript-eslint/parser": "1.4.2",
+    "acorn": "6.1.1",
     "awesome-typescript-loader": "5.2.1",
-    "babel-eslint": "10.0.1",
-    "eslint": "5.14.1",
-    "eslint-config-prettier": "^4.0.0",
+    "eslint": "5.15.3",
+    "eslint-config-prettier": "4.1.0",
     "eslint-config-standard": "12.0.0",
     "eslint-config-standard-react": "7.0.2",
-    "eslint-import-resolver-typescript": "^1.1.1",
+    "eslint-import-resolver-typescript": "1.1.1",
     "eslint-plugin-ascii": "1.0.0",
@@ -112,22 +105,21 @@ "eslint-plugin-babel": "5.3.0",
     "eslint-plugin-optimize-regex": "1.1.6",
-    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-prettier": "3.0.1",
     "eslint-plugin-promise": "4.0.1",
     "eslint-plugin-promiseparams": "1.0.8",
-    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-react": "7.12.4",
     "eslint-plugin-react-functional-set-state": "1.2.1",
-    "eslint-plugin-react-perf": "3.0.2",
+    "eslint-plugin-react-perf": "3.1.0",
     "eslint-plugin-standard": "4.0.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "6.4.0",
     "husky": "1.3.1",
-    "prettier": "^1.16.4",
-    "prop-types": "15.7.2",
-    "react": "16.8.3",
+    "prettier": "1.16.4",
+    "react": "16.8.4",
     "react-docgen-typescript": "1.12.3",
-    "react-dom": "16.8.3",
-    "react-styleguidist": "8.0.6",
+    "react-dom": "16.8.4",
+    "react-styleguidist": "9.0.4",
     "rimraf": "2.6.3",
     "typescript": "3.3.3333",
-    "webpack": "4.29.5"
+    "webpack": "4.29.6"
   },
-  "gitHead": "68d989b6d74f31c8f6782d481f8de016cf079b11"
+  "gitHead": "7349bce4e50c99b19d03b42767961c882c4e9e0c"
 }

src/components/dom/dom-helper.ts

@@ -16,5 +16,5 @@ /* eslint-disable filenames/match-regex */
 
-const createLatLng = (inst, Type) => new Type(inst.lat, inst.lng)
+const createLatLng = (inst: any, Type: any): any => new Type(inst.lat, inst.lng)
 
-const createLatLngBounds = (inst, Type) =>
+const createLatLngBounds = (inst: any, Type: any): any =>
   new Type(
@@ -25,3 +25,3 @@ new google.maps.LatLng(inst.ne.lat, inst.ne.lng),
 
-const ensureOfType = (inst, type, factory) =>
+const ensureOfType = (inst: any, type: any, factory: any) =>
   inst instanceof type ? inst : factory(inst, type)
@@ -28,0 +28,0 @@

src/components/drawing/Circle.md

@@ -21,2 +21,5 @@ # Circle example
     <Circle
+      onLoad={circle => {
+        console.log('circle: ', circle)
+      }}
       center={{
@@ -23,0 +26,0 @@ lat: -3.745,

src/components/drawing/Data.md

@@ -21,2 +21,5 @@ # Data example
     <Data
+      onLoad={data => {
+        console.log('data: ', data)
+      }}
       options={{
@@ -23,0 +26,0 @@ controlPosition: "TOP_LEFT",

src/components/drawing/DrawingManager.md

@@ -20,5 +20,9 @@ # DrawingManager example
   >
-    <DrawingManager/>
+    <DrawingManager
+      onLoad={drawingManager => {
+        console.log(drawingManager)
+      }}
+    />
   </GoogleMap>
 </ScriptLoaded>
 ```

src/components/drawing/InfoWindow.md

@@ -21,3 +21,8 @@ # InfoWindow example
 
-   <InfoWindow position={{lat: 33.772, lng: -117.214}}>
+    <InfoWindow
+      onLoad={infoWindow => {
+        console.log('infoWindow: ', infoWindow)
+      }}
+      position={{lat: 33.772, lng: -117.214}}
+    >
       <div style={{
@@ -24,0 +29,0 @@ background: `white`,

src/components/drawing/Marker.md

@@ -21,2 +21,5 @@ # Marker example
     <Marker
+      onLoad={marker => {
+        console.log('marker: ', marker)
+      }}
       position={{
@@ -23,0 +26,0 @@ lat: 37.772,

src/components/drawing/Polygon.md

@@ -41,2 +41,5 @@ # Polygon example
     <Polygon
+      onLoad={polygon => {
+        console.log('polygon: ', polygon)
+      }}
       path={SYDNEY_COORDS}
@@ -43,0 +46,0 @@ options={sydneyPolygonOptions}

src/components/drawing/Polyline.md

@@ -42,2 +42,5 @@ # Polyline example
     <Polyline
+      onLoad={polyline => {
+        console.log('polyline: ', polyline)
+      }}
       path={POLYLINE_COORD}
@@ -44,0 +47,0 @@ options={polylineOptions}

src/components/drawing/Rectangle.md

@@ -21,2 +21,5 @@ # Rectangle example
     <Rectangle
+      onLoad={rectangle => {
+        console.log('rectangle: ', rectangle)
+      }}
       bounds={{
@@ -23,0 +26,0 @@ north: 38.685,

src/components/heatmap/HeatmapLayer.md

@@ -37,2 +37,5 @@ # HeatmapLayer example
     <HeatmapLayer
+      onLoad={heatmapLayer => {
+        console.log('heatmapLayer: ', heatmapLayer)
+      }}
       options={{
@@ -39,0 +42,0 @@ data: heatmapData

src/components/maps/BicyclingLayer.md

@@ -23,5 +23,9 @@ # BicyclingLayer example
   >
-    <BicyclingLayer />
+    <BicyclingLayer
+      onLoad={bicyclingLayer => {
+        console.log('bicyclingLayer: ', bicyclingLayer)
+      }}
+    />
   </GoogleMap>
 </ScriptLoaded>
 ```

src/components/maps/TrafficLayer.md

@@ -23,5 +23,9 @@ # TrafficLayer example
   >
-    <TrafficLayer />
+    <TrafficLayer
+      onLoad={trafficLayer => {
+        console.log('trafficLayer: ', trafficLayer)
+      }}
+    />
   </GoogleMap>
 </ScriptLoaded>
 ```

src/components/places/Autocomplete.md

@@ -6,44 +6,71 @@ # Autocomplete example
 ```jsx
+const { Component } = require('react')
 const { GoogleMap, LoadScript, Autocomplete } = require("../../");
 const ScriptLoaded = require("../../docs/ScriptLoaded").default;
 
-<ScriptLoaded>
-  <GoogleMap
-    id="searchbox-example"
-    mapContainerStyle={{
-      height: "400px",
-      width: "800px"
-    }}
-    zoom={2.5}
-    center={{
-      lat: 38.685,
-      lng: -115.234
-    }}
-  >
-    <Autocomplete
-      ref={ref => (this.autocomplete = ref)}
-      onPlacesChanged={() => console.log(this.autocomplete.getPlace())}
-    >
-      <input
-        type="text"
-        placeholder="Customized your placeholder"
-        style={{
-          boxSizing: `border-box`,
-          border: `1px solid transparent`,
-          width: `240px`,
-          height: `32px`,
-          padding: `0 12px`,
-          borderRadius: `3px`,
-          boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
-          fontSize: `14px`,
-          outline: `none`,
-          textOverflow: `ellipses`,
-          position: "absolute",
-          left: "50%",
-          marginLeft: "-120px"
-        }}
-      />
-    </Autocomplete>
-  </GoogleMap>
-</ScriptLoaded>;
+class MyMapWithAutocomplete extends Component {
+  constructor (props) {
+    super(props)
+
+    this.autocomplete = null
+  }
+
+  onLoad = autocomplete => {
+    console.log('autocomplete: ', autocomplete)
+
+    this.autocomplete = autocomplete
+  }
+
+  onPlaceChanged = () => {
+    if (this.autocomplete !== null) {
+      console.log(this.autocomplete.getPlace())
+    } else {
+      console.log('Autocomplete is not loaded yet!')
+    }
+  }
+
+  render () {
+    return (
+      <ScriptLoaded>
+        <GoogleMap
+          id="searchbox-example"
+          mapContainerStyle={{
+            height: "400px",
+            width: "800px"
+          }}
+          zoom={2.5}
+          center={{
+            lat: 38.685,
+            lng: -115.234
+          }}
+        >
+          <Autocomplete
+            onLoad={this.onLoad}
+            onPlacesChanged={this.onPlaceChanged}
+          >
+            <input
+              type="text"
+              placeholder="Customized your placeholder"
+              style={{
+                boxSizing: `border-box`,
+                border: `1px solid transparent`,
+                width: `240px`,
+                height: `32px`,
+                padding: `0 12px`,
+                borderRadius: `3px`,
+                boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
+                fontSize: `14px`,
+                outline: `none`,
+                textOverflow: `ellipses`,
+                position: "absolute",
+                left: "50%",
+                marginLeft: "-120px"
+              }}
+            />
+          </Autocomplete>
+        </GoogleMap>
+      </ScriptLoaded>
+    )
+  }
+}
 ```

src/components/streetview/StreetViewPanorama.md

@@ -1,1 +0,29 @@
-# TODO StreetViewPanorama example
+# StreetViewPanorama example
+
+```jsx
+const { GoogleMap, LoadScript, StreetViewPanorama } = require("../../");
+const ScriptLoaded = require("../../docs/ScriptLoaded").default;
+
+<ScriptLoaded>
+  <GoogleMap
+    id="circle-example"
+    mapContainerStyle={{
+      height: "400px",
+      width: "800px"
+    }}
+    zoom={7}
+    center={{
+      lat:  51.5320665,
+      lng: -0.177203
+    }}
+  >
+    <StreetViewPanorama
+      position={{
+        lat:  51.5320665,
+        lng: -0.177203
+      }}
+      visible={true}
+    />
+  </GoogleMap>
+</ScriptLoaded>
+```

src/components/streetview/StreetViewService.md

@@ -1,1 +0,35 @@
-# TODO
+# StreetViewService example
+
+Look at the console.log to see request results
+
+
+```jsx
+const { GoogleMap, LoadScript, StreetViewService } = require("../../");
+const ScriptLoaded = require("../../docs/ScriptLoaded").default;
+
+<ScriptLoaded>
+  <GoogleMap
+    id="circle-example"
+    mapContainerStyle={{
+      height: "400px",
+      width: "800px"
+    }}
+    zoom={14}
+    center={{
+      lat: 37.869085,
+      lng: -122.254775
+    }}
+  >
+    <StreetViewService
+      onLoad={(streetViewService) => {
+        streetViewService.getPanorama({
+          location: {lat: 37.869085, lng: -122.254775}, radius: 50
+        }, (data, status) => console.log(
+          "StreetViewService results",
+          { data, status }
+        ))
+      }}
+    />
+  </GoogleMap>
+</ScriptLoaded>
+```

src/index.ts

@@ -8,2 +8,4 @@ export { default as GoogleMap } from "./GoogleMap"
 export { default as Marker } from "./components/drawing/Marker"
+export { default as MarkerClusterer } from "./components/addons/MarkerClusterer"
+
 export { default as InfoWindow } from "./components/drawing/InfoWindow"
@@ -27,5 +29,2 @@ export { default as Polyline } from "./components/drawing/Polyline"
 export {
-  default as StreetViewCoverageLayer
-} from "./components/streetview/StreetViewCoverageLayer"
-export {
   default as StreetViewService
@@ -32,0 +31,0 @@ } from "./components/streetview/StreetViewService"

src/map-context.ts

 /* global google */
-import { createContext, Context } from "react"
+import { createContext } from "react"
 
-const MapContext: Context<google.maps.Map> = createContext(null)
+const MapContext = createContext<google.maps.Map | null>(null)
 
 export default MapContext

src/utils/foreach.ts

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

src/utils/injectscript.ts

@@ -1,3 +0,10 @@
-export const injectScript = ({ url, id }) => {
-  if (typeof document === "undefined") {
+import { isBrowser } from "./isbrowser"
+
+interface InjectScriptArg {
+  url: string
+  id: string
+}
+
+export const injectScript = ({ url, id }: InjectScriptArg): Promise<any> => {
+  if (isBrowser) {
     return Promise.reject(new Error("document is undefined"))
@@ -7,3 +14,3 @@ }
   return new Promise((resolve, reject) => {
-    if (document.getElementById(id) !== null) {
+    if (document.getElementById(id)) {
       return resolve(id)
@@ -10,0 +17,0 @@ }

src/utils/instance-persistance.ts

@@ -0,1 +1,9 @@
+export interface RestoreInstanceArg {
+  id: string
+  zoom?: number
+  center?: google.maps.LatLng | google.maps.LatLngLiteral
+  mapContainerStyle?: { [key: string]: any }
+  options?: google.maps.MapOptions
+}
+
 const clearChildren = (node: HTMLElement) => {
@@ -37,9 +45,4 @@ if (node) {
   options
-}: {
-  id: string
-  zoom?: number
-  center?: google.maps.LatLng | google.maps.LatLngLiteral
-  mapContainerStyle?: any
-  options?: google.maps.MapOptions
-}) => {
+}: RestoreInstanceArg): google.maps.Map | false => {
+  // @ts-ignore
   const map: google.maps.Map = window[getMapInstanceId(id)]
@@ -50,19 +53,33 @@
   if (map && hiddenContainer.children.length === 1) {
-    map.setZoom(zoom)
-    map.setCenter(center)
-    map.setOptions(options)
+    if (zoom) {
+      map.setZoom(zoom)
+    }
 
+    if (center) {
+      map.setCenter(center)
+    }
+
+    if (options) {
+      map.setOptions(options)
+    }
+
     const mapContainer = document.getElementById(id)
 
-    clearChildren(mapContainer)
+    if (mapContainer) {
+      clearChildren(mapContainer)
 
-    mapContainer.appendChild(hiddenContainer.children[0])
+      mapContainer.appendChild(hiddenContainer.children[0])
 
-    // Copy mapContainerStyle to mapContainer
-    Object.keys(mapContainerStyle).forEach(styleKey => {
-      mapContainer.style[styleKey] = mapContainerStyle[styleKey]
-    })
+      if (mapContainerStyle) {
+        Object.keys(mapContainerStyle).forEach(styleKey => {
+          // TODO
+          mapContainer.style[styleKey as any] = mapContainerStyle[styleKey]
+        })
+      }
+    }
 
     return map
   }
+
+  return false
 }
@@ -77,5 +94,8 @@
 
-  hiddenContainer.appendChild(mapContainer.children[0])
+  if (mapContainer && mapContainer.children && mapContainer.children[0]) {
+    hiddenContainer.appendChild(mapContainer.children[0])
+  }
 
+  // @ts-ignore
   window[getMapInstanceId(id)] = map
 }

src/utils/isbrowser.ts

@@ -1,1 +0,1 @@
-export const isBrowser = typeof document !== "undefined"
+export const isBrowser: boolean = typeof document !== "undefined"

src/utils/prevent-google-fonts.ts

 // Preventing the Google Maps libary from downloading an extra font
 export const preventGoogleFonts = () => {
-  const isRobotoStyle = element => {
+  const isRobotoStyle = (element: HTMLElement) => {
     // roboto font download
     if (
-      element.href &&
-      element.href.indexOf("https://fonts.googleapis.com/css?family=Roboto") ===
-        0
+      (element as HTMLLinkElement).href &&
+      (element as HTMLLinkElement).href.indexOf(
+        "https://fonts.googleapis.com/css?family=Roboto"
+      ) === 0
     ) {
@@ -15,6 +16,10 @@ return true
       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 = ""
@@ -35,2 +40,3 @@ return true
       element.tagName.toLowerCase() === "style" &&
+      // @ts-ignore
       !element.styleSheet &&
@@ -53,3 +59,6 @@ !element.innerHTML
   //@ts-ignore
-  head.insertBefore = (newElement, referenceElement) => {
+  head.insertBefore = (
+    newElement: HTMLElement,
+    referenceElement: HTMLElement
+  ): void => {
     if (!isRobotoStyle(newElement)) {
@@ -64,3 +73,3 @@ Reflect.apply(insertBefore, head, [newElement, referenceElement])
   //@ts-ignore
-  head.appendChild = textNode => {
+  head.appendChild = (textNode: HTMLElement): void => {
     if (!isRobotoStyle(textNode)) {
@@ -67,0 +76,0 @@ Reflect.apply(appendChild, head, [textNode])

src/utils/reduce.ts

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

src/utils/use-map-component.ts

@@ -1,43 +0,43 @@
-import { useState, useEffect, useContext } from "react"
+// import { useState, useEffect, useContext } from "react"
 
-import MapContext from "../map-context"
+// import MapContext from "../map-context"
 
-import {
-  unregisterEvents,
-  applyUpdatersToPropsAndRegisterEvents
-} from "./helper"
+// import {
+//   unregisterEvents,
+//   applyUpdatersToPropsAndRegisterEvents
+// } from "./helper"
 
-export default function useMapComponent(props) {
-  const [instance, setInstance] = useState(null)
-  const context = useContext(MapContext)
+// export default function useMapComponent(props) {
+//   const [instance, setInstance] = useState(null)
+//   const context = useContext(MapContext)
 
-  let tempInstance
+//   let tempInstance
 
-  console.log({ context })
+//   console.log({ context })
 
-  if (!instance) {
-    console.log(props.className, new google.maps[props.className]())
+//   if (!instance) {
+//     console.log(props.className, new google.maps[props.className]())
 
-    tempInstance = new google.maps[props.className]()
+//     tempInstance = new google.maps[props.className]()
 
-    setInstance(tempInstance)
+//     setInstance(tempInstance)
 
-    tempInstance.setMap(context)
-  }
+//     tempInstance.setMap(context)
+//   }
 
-  console.log({ tempInstance })
+//   console.log({ tempInstance })
 
-  useEffect(() => {
-    console.log(props, tempInstance)
-    const registeredEvents = applyUpdatersToPropsAndRegisterEvents({
-      ...props,
-      instance: tempInstance
-    })
+//   useEffect(() => {
+//     console.log(props, tempInstance)
+//     const registeredEvents = applyUpdatersToPropsAndRegisterEvents({
+//       ...props,
+//       instance: tempInstance
+//     })
 
-    return () => {
-      unregisterEvents(registeredEvents)
-    }
-  })
+//     return () => {
+//       unregisterEvents(registeredEvents)
+//     }
+//   })
 
-  return "was here"
-}
+//   return "was here"
+// }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

37

decreased by-21.28%

Number of package files

173

increased by3.59%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

300621

decreased by-53.83%

Dependency count

10

increased by25%

Lines of code

6883

decreased by-10.66%

Dependency changes

• + Added@types/babel-types@7.0.6

• + Added@types/googlemaps@3.30.19

• + Added@types/invariant@2.2.29

• + Added@types/markerclustererplus@2.1.33

• + Added@types/react@16.8.7

• + Addedmarkerclustererplus@2.1.4

• + Added@types/babel-types@7.0.6(transitive)

• + Added@types/google-maps@3.2.6(transitive)

• + Added@types/google.maps@3.55.11(transitive)

• + Added@types/googlemaps@3.30.19(transitive)

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

• + Added@types/markerclustererplus@2.1.33(transitive)

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

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

• + Addedcsstype@2.6.21(transitive)

• + Addedmarkerclustererplus@2.1.4(transitive)

• - Removedmarker-clusterer-plus@2.1.4

• - Removedmarkerwithlabel@2.0.2

• - Removedwarning@4.0.3

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

• - Removedmarkerwithlabel@2.0.2(transitive)

• - Removedwarning@4.0.3(transitive)