diff --git a/README.md b/README.md
index c592bba..3470378 100644
--- a/README.md
+++ b/README.md
@@ -54,9 +54,8 @@ class LocationPickerExample extends Component {
{this.state.address}
}
- mapElement={
}
- defaultPosition={defaultPosition}
+ mapContainerStyle={{height: '200px', width: '400px'}}
+ defaultPosition={this.state.defaultPosition}
onChange={this.handleLocationChange}
/>
@@ -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
index 2c0c356..f692460 100644
--- 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 {
{this.state.address}
}
- mapElement={
}
+ mapContainerStyle={{height: '200px', width: '400px'}}
defaultPosition={this.state.defaultPosition}
radius={-1}
onChange={this.handleLocationChange}
+ mapOptions={mapOptions}
/>
diff --git a/lib/GoogleMap.js b/lib/GoogleMap.js
index dfb127d..9043cc3 100644
--- a/lib/GoogleMap.js
+++ b/lib/GoogleMap.js
@@ -10,28 +10,11 @@ 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,
@@ -39,30 +22,34 @@ var Map = (0, _withGoogleMap2.default)(function (props) {
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;
\ No newline at end of file
diff --git a/lib/index.js b/lib/index.js
index 49c8e6d..50a0974 100644
--- 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
index 02c6fb3..393296c 100644
--- 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
index 98cdb0d..d3d8ee1 100644
--- 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) ?
- : null;
- const mapExtraProps = shouldRecenterMap ? { center: position }: {};
+ const mapExtraProps = shouldRecenterMap ? {center: position} : {};
+
return (
- {/* Map marker */}
- {/* Circle */}
- { circle }
+ {radius !== -1 &&
+ }
+
)
-});
+}
export default Map;
diff --git a/src/index.d.ts b/src/index.d.ts
index fe2c7f0..478c704 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -8,8 +8,8 @@ export interface Location {
}
export interface Props {
- containerElement: React.ReactElement;
- mapElement: React.ReactElement;
+ mapContainerStyle: object;
+ mapOptions?: object;
onChange: (location: Location) => void;
defaultPosition: google.maps.LatLng | google.maps.LatLngLiteral;
zoom?: number;
diff --git a/src/index.js b/src/index.js
index e64165b..8e0b4f7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,8 +6,6 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Map from './GoogleMap';
-const google = window.google;
-
/* Default configuration */
const DEFAULT_RADIUS = 1000;
const DEFAULT_ZOOM = 10;
@@ -34,26 +32,33 @@ class LocationPicker extends Component {
this.handleMarkerDragEnd = this.handleMarkerDragEnd.bind(this);
}
- componentWillReceiveProps(nextProps) {
- const { defaultPosition } = nextProps;
+ static getDerivedStateFromProps(props, state) {
+ const { defaultPosition } = props;
if (
JSON.stringify(defaultPosition) !==
- JSON.stringify(this.props.defaultPosition)
+ JSON.stringify(state.position)
) {
- this.setState(
- { position: defaultPosition, shouldRecenterMap: true },
- () => {
- // Reverse geocode new default position
- this.geocodePosition(defaultPosition)
- .then(places => {
- this.notify(defaultPosition, places);
- })
- .catch(err => {
- console.error(err);
- this.notify(defaultPosition, []);
- });
- }
- );
+ //console.log("New position:");
+ //console.log(state.position);
+ return { position: state.position, shouldRecenterMap: true };
+ } else
+ return null;
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ 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(places => {
+ this.notify(this.state.position, places);
+ })
+ .catch(err => {
+ console.error(err);
+ this.notify(this.state.position, []);
+ });
}
}
@@ -71,20 +76,11 @@ class LocationPicker extends Component {
* @param { MouseEvent } mouseEvent // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MouseEvent
*/
handleMarkerDragEnd(mouseEvent) {
- const { onChange } = this.props;
// Get latitude and longitude
const lat = mouseEvent.latLng.lat();
const lng = mouseEvent.latLng.lng();
const position = { lat, lng };
this.setState({ position, shouldRecenterMap: false });
- this.geocodePosition(position)
- .then(places => {
- this.notify(position, places);
- })
- .catch(err => {
- console.error(err);
- this.notify(position, []);
- });
}
/**
@@ -94,11 +90,11 @@ class LocationPicker extends Component {
*/
geocodePosition(position) {
// Geocoder instance
- const geocoder = new google.maps.Geocoder();
+ const geocoder = new window.google.maps.Geocoder();
return new Promise((resolve, reject) => {
geocoder.geocode({ location: position }, (results, status) => {
- if (status === google.maps.GeocoderStatus.OK) {
+ if (status === window.google.maps.GeocoderStatus.OK) {
resolve(results);
} else {
reject(status);
@@ -112,16 +108,16 @@ class LocationPicker extends Component {
zoom,
radius,
circleOptions,
- containerElement,
- mapElement
+ mapContainerStyle,
+ mapOptions
} = this.props;
const { position, shouldRecenterMap } = this.state;
return (