rameshsyn · rideyourstyle · Apr 29, 2020 · Apr 29, 2020 · Apr 29, 2020 · Apr 29, 2020
diff --git a/README.md b/README.md
@@ -54,9 +54,8 @@ class LocationPickerExample extends Component {
         <h1>{this.state.address}</h1>
         <div>
           <LocationPicker
-            containerElement={ <div style={ {height: '100%'} } /> }
-            mapElement={ <div style={ {height: '400px'} } /> }
-            defaultPosition={defaultPosition}
+            mapContainerStyle={{height: '200px', width: '400px'}}
+            defaultPosition={this.state.defaultPosition}
             onChange={this.handleLocationChange}
           />
         </div>
@@ -70,14 +69,14 @@ LocationPicker properties
 
 | Property | Type | Description |  
 |---------------------|-------------------|------------------|  
-| containerElement | node | required, A container element for map element|  
-| mapElement | node | required, A map element|  
+| mapContainerStyle | object | required, A object with height and width who is passed to the map|
 | onChange | function | required, A callback which gets called on every map marker position change, it is passed with one argument of type object which has location information.|
 | defaultPosition | object | required, A default position for map center.|
 | zoom | number | optional, Map zoom level |
 | radius | number | optional, Circle radius in meter. or Pass -1 to hide it.|
-| circleOptions | object | optional,  https://developers.google.com/maps/documentation/javascript/3.exp/reference#CircleOptions
-
+| circleOptions | object | optional,  https://developers.google.com/maps/documentation/javascript/3.exp/reference#CircleOptions|
+| mapOptions | object | optional, https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions
+
 
 ### Development
 For demo, clone this repo and run

diff --git a/demo/demo.js b/demo/demo.js
@@ -12,6 +12,14 @@ const defaultPosition = {
   lng: 86.9250
 };
 
+/* Map options (https://developers.google.com/maps/documentation/javascript/controls) */
+const mapOptions = {
+  fullscreenControl: false,
+  streetViewControl: false,
+  zoomControl: false,
+  mapTypeControl: false
+}
+
 class LocationPickerExample extends Component {
   constructor (props) {
     super(props);
@@ -52,11 +60,11 @@ class LocationPickerExample extends Component {
         <h1>{this.state.address}</h1>
         <div>
           <LocationPicker
-            containerElement={ <div style={ {height: '100%'} } /> }
-            mapElement={ <div style={ {height: '400px'} } /> }
+            mapContainerStyle={{height: '200px', width: '400px'}}
             defaultPosition={this.state.defaultPosition}
             radius={-1}
             onChange={this.handleLocationChange}
+            mapOptions={mapOptions}
           />
         </div>
       </div>

diff --git a/lib/GoogleMap.js b/lib/GoogleMap.js
@@ -10,59 +10,46 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _withGoogleMap = require('react-google-maps/lib/withGoogleMap');
-
-var _withGoogleMap2 = _interopRequireDefault(_withGoogleMap);
-
-var _GoogleMap = require('react-google-maps/lib/components/GoogleMap');
-
-var _GoogleMap2 = _interopRequireDefault(_GoogleMap);
-
-var _Marker = require('react-google-maps/lib/components/Marker');
-
-var _Marker2 = _interopRequireDefault(_Marker);
-
-var _Circle = require('react-google-maps/lib/components/Circle');
-
-var _Circle2 = _interopRequireDefault(_Circle);
+var _api = require('@react-google-maps/api');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* Create map with withGoogleMap HOC */
-/* https://github.com/tomchentw/react-google-maps */
-
-var Map = (0, _withGoogleMap2.default)(function (props) {
+function Map(props) {
   var position = props.position,
       defaultZoom = props.defaultZoom,
       handleMarkerDragEnd = props.handleMarkerDragEnd,
       onZoomChanged = props.onZoomChanged,
       radius = props.radius,
       circleOptions = props.circleOptions,
       shouldRecenterMap = props.shouldRecenterMap,
-      zoom = props.zoom;
+      zoom = props.zoom,
+      mapContainerStyle = props.mapContainerStyle,
+      mapOptions = props.mapOptions;
 
 
-  var circle = radius !== -1 ? _react2.default.createElement(_Circle2.default, {
-    center: position,
-    radius: radius,
-    options: circleOptions
-  }) : null;
   var mapExtraProps = shouldRecenterMap ? { center: position } : {};
+
   return _react2.default.createElement(
-    _GoogleMap2.default,
+    _api.GoogleMap,
     _extends({
+      options: mapOptions,
+      mapContainerStyle: mapContainerStyle,
       onZoomChanged: onZoomChanged,
       defaultZoom: defaultZoom,
-      defaultCenter: position,
-      zoom: zoom
+      zoom: zoom,
+      center: position
     }, mapExtraProps),
-    _react2.default.createElement(_Marker2.default, {
+    _react2.default.createElement(_api.Marker, {
       draggable: true // Allow marker to drag
       , position: position,
       onDragEnd: handleMarkerDragEnd
     }),
-    circle
+    radius !== -1 && _react2.default.createElement(_api.Circle, {
+      center: position,
+      radius: radius,
+      options: circleOptions
+    })
   );
-});
+}
 
 exports.default = Map;
diff --git a/lib/index.js b/lib/index.js
@@ -28,8 +28,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 * REACT LOCATION PICKER
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 */
 
-var google = window.google;
-
 /* Default configuration */
 var DEFAULT_RADIUS = 1000;
 var DEFAULT_ZOOM = 10;
@@ -62,21 +60,20 @@ var LocationPicker = function (_Component) {
   }
 
   _createClass(LocationPicker, [{
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
 
-      var defaultPosition = nextProps.defaultPosition;
-
-      if (JSON.stringify(defaultPosition) !== JSON.stringify(this.props.defaultPosition)) {
-        this.setState({ position: defaultPosition, shouldRecenterMap: true }, function () {
-          // Reverse geocode new default position
-          _this2.geocodePosition(defaultPosition).then(function (places) {
-            _this2.notify(defaultPosition, places);
-          }).catch(function (err) {
-            console.error(err);
-            _this2.notify(defaultPosition, []);
-          });
+      if (prevState.position !== this.state.position) {
+        //console.log("prevState.position", prevState.position);
+        //console.log("this.state.position", this.state.position);
+
+        // Reverse geocode new default position
+        this.geocodePosition(this.state.position).then(function (places) {
+          _this2.notify(_this2.state.position, places);
+        }).catch(function (err) {
+          console.error(err);
+          _this2.notify(_this2.state.position, []);
         });
       }
     }
@@ -100,21 +97,11 @@ var LocationPicker = function (_Component) {
   }, {
     key: 'handleMarkerDragEnd',
     value: function handleMarkerDragEnd(mouseEvent) {
-      var _this3 = this;
-
-      var onChange = this.props.onChange;
       // Get latitude and longitude
-
       var lat = mouseEvent.latLng.lat();
       var lng = mouseEvent.latLng.lng();
       var position = { lat: lat, lng: lng };
       this.setState({ position: position, shouldRecenterMap: false });
-      this.geocodePosition(position).then(function (places) {
-        _this3.notify(position, places);
-      }).catch(function (err) {
-        console.error(err);
-        _this3.notify(position, []);
-      });
     }
 
     /**
@@ -127,11 +114,11 @@ var LocationPicker = function (_Component) {
     key: 'geocodePosition',
     value: function geocodePosition(position) {
       // Geocoder instance
-      var geocoder = new google.maps.Geocoder();
+      var geocoder = new window.google.maps.Geocoder();
 
       return new Promise(function (resolve, reject) {
         geocoder.geocode({ location: position }, function (results, status) {
-          if (status === google.maps.GeocoderStatus.OK) {
+          if (status === window.google.maps.GeocoderStatus.OK) {
             resolve(results);
           } else {
             reject(status);
@@ -146,16 +133,16 @@ var LocationPicker = function (_Component) {
           zoom = _props.zoom,
           radius = _props.radius,
           circleOptions = _props.circleOptions,
-          containerElement = _props.containerElement,
-          mapElement = _props.mapElement;
+          mapContainerStyle = _props.mapContainerStyle,
+          mapOptions = _props.mapOptions;
       var _state = this.state,
           position = _state.position,
           shouldRecenterMap = _state.shouldRecenterMap;
 
 
       return _react2.default.createElement(_GoogleMap2.default, {
-        containerElement: containerElement,
-        mapElement: mapElement,
+        mapOptions: mapOptions,
+        mapContainerStyle: mapContainerStyle,
         handleMarkerDragEnd: this.handleMarkerDragEnd,
         position: position,
         circleOptions: circleOptions,
@@ -165,19 +152,30 @@ var LocationPicker = function (_Component) {
         shouldRecenterMap: shouldRecenterMap
       });
     }
+  }], [{
+    key: 'getDerivedStateFromProps',
+    value: function getDerivedStateFromProps(props, state) {
+      var defaultPosition = props.defaultPosition;
+
+      if (JSON.stringify(defaultPosition) !== JSON.stringify(state.position)) {
+        //console.log("New position:");
+        //console.log(state.position);
+        return { position: state.position, shouldRecenterMap: true };
+      } else return null;
+    }
   }]);
 
   return LocationPicker;
 }(_react.Component);
 
 LocationPicker.propTypes = {
-  containerElement: _propTypes2.default.node.isRequired,
-  mapElement: _propTypes2.default.node.isRequired,
+  mapContainerStyle: _propTypes2.default.object.isRequired,
   onChange: _propTypes2.default.func.isRequired,
   defaultPosition: _propTypes2.default.object.isRequired,
   zoom: _propTypes2.default.number,
   radius: _propTypes2.default.number,
-  circleOptions: _propTypes2.default.object
+  circleOptions: _propTypes2.default.object,
+  mapOptions: _propTypes2.default.object
 };
 
 LocationPicker.defaultProps = {

diff --git a/package.json b/package.json
@@ -18,19 +18,19 @@
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
+    "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "webpack": "^3.6.0",
-    "react": "^16.2.0",
     "webpack-dev-server": "^2.8.2"
   },
   "dependencies": {
-    "prop-types": "^15.6.1",
-    "react-google-maps": "^9.4.5"
+    "@react-google-maps/api": "^1.8.9",
+    "prop-types": "^15.6.1"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0",
     "@types/googlemaps": "^3.37.6",
-    "@types/react": "^16.9.2"
+    "@types/react": "^16.9.2",
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
   }
 }
diff --git a/src/GoogleMap.jsx b/src/GoogleMap.jsx
@@ -1,13 +1,8 @@
 import React from 'react';
-import withGoogleMap from 'react-google-maps/lib/withGoogleMap';
-import GoogleMap from 'react-google-maps/lib/components/GoogleMap';
-import Marker from 'react-google-maps/lib/components/Marker';
-import Circle from 'react-google-maps/lib/components/Circle';
+import {GoogleMap, Marker, Circle} from '@react-google-maps/api';
 
-/* Create map with withGoogleMap HOC */
-/* https://github.com/tomchentw/react-google-maps */
 
-const Map = withGoogleMap((props) => {
+function Map (props) {
   const {
     position,
     defaultZoom,
@@ -16,36 +11,39 @@ const Map = withGoogleMap((props) => {
     radius,
     circleOptions,
     shouldRecenterMap,
-    zoom
+    zoom,
+    mapContainerStyle,
+    mapOptions
   } = props;
 
-  const circle = (radius !== -1) ?
-    <Circle
-      center={position}
-      radius={radius}
-      options={circleOptions}
-    /> : null;
-  const mapExtraProps = shouldRecenterMap ? { center: position }: {};
+  const mapExtraProps = shouldRecenterMap ? {center: position} : {};
+
   return (
     <GoogleMap
+      options={mapOptions}
+      mapContainerStyle={mapContainerStyle}
       onZoomChanged={onZoomChanged}
       defaultZoom={defaultZoom}
-      defaultCenter={position}
       zoom={zoom}
+      center={position}
       {...mapExtraProps}
     >
 
-      {/* Map marker */}
       <Marker
         draggable // Allow marker to drag
         position={position}
         onDragEnd={handleMarkerDragEnd}
       />
 
-      {/* Circle */}
-      { circle }
+      {radius !== -1 &&
+      <Circle
+        center={position}
+        radius={radius}
+        options={circleOptions}
+      />}
+
     </GoogleMap>
   )
-});
+}
 
 export default Map;
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -8,8 +8,8 @@ export interface Location {
 }
 
 export interface Props {
-  containerElement: React.ReactElement<any>;
-  mapElement: React.ReactElement<any>;
+  mapContainerStyle: object;
+  mapOptions?: object;
   onChange: (location: Location) => void;
   defaultPosition: google.maps.LatLng | google.maps.LatLngLiteral;
   zoom?: number;