Merge pull request #71 from Riley-Brown/master

ErrorPro · web-flow · commit dde431dd630b · 2020-04-26T15:18:45.000+02:00
Added feature to load google maps script
diff --git a/lib/index.js b/lib/index.js
@@ -35,6 +35,26 @@ var ReactGoogleAutocomplete = function (_React$Component) {
 
     var _this = _possibleConstructorReturn(this, (ReactGoogleAutocomplete.__proto__ || Object.getPrototypeOf(ReactGoogleAutocomplete)).call(this, props));
 
+    _this.handleLoadScript = function () {
+      var googleMapsScriptUrl = 'https://maps.googleapis.com/maps/api/js?key=' + _this.props.apiKey + '&libraries=places';
+
+      // Check if script exists already
+      if (document.querySelectorAll('script[src="' + googleMapsScriptUrl + '"]').length > 0) {
+        return Promise.resolve();
+      }
+
+      _this.googleMapsScript = document.createElement('script');
+      _this.googleMapsScript.src = googleMapsScriptUrl;
+
+      document.body.appendChild(_this.googleMapsScript);
+
+      return new Promise(function (resolve) {
+        _this.googleMapsScript.addEventListener('load', function () {
+          return resolve();
+        });
+      });
+    };
+
     _this.autocomplete = null;
     _this.event = null;
     return _this;
@@ -43,11 +63,14 @@ var ReactGoogleAutocomplete = function (_React$Component) {
   _createClass(ReactGoogleAutocomplete, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
+      var _this2 = this;
+
       var _props = this.props,
           _props$types = _props.types,
           types = _props$types === undefined ? ['(cities)'] : _props$types,
           componentRestrictions = _props.componentRestrictions,
           bounds = _props.bounds,
+          apiKey = _props.apiKey,
           _props$fields = _props.fields,
           fields = _props$fields === undefined ? ['address_components', 'geometry.location', 'place_id', 'formatted_address'] : _props$fields;
 
@@ -63,21 +86,31 @@ var ReactGoogleAutocomplete = function (_React$Component) {
 
       this.disableAutofill();
 
-      this.autocomplete = new google.maps.places.Autocomplete(this.refs.input, config);
+      var handleAutoComplete = function handleAutoComplete() {
+        _this2.autocomplete = new google.maps.places.Autocomplete(_this2.refs.input, config);
 
-      this.event = this.autocomplete.addListener('place_changed', this.onSelected.bind(this));
+        _this2.event = _this2.autocomplete.addListener('place_changed', _this2.onSelected.bind(_this2));
+      };
+
+      if (apiKey) {
+        this.handleLoadScript().then(function () {
+          return handleAutoComplete();
+        });
+      } else {
+        handleAutoComplete();
+      }
     }
   }, {
     key: 'disableAutofill',
     value: function disableAutofill() {
-      var _this2 = this;
+      var _this3 = this;
 
       // Autofill workaround adapted from https://stackoverflow.com/questions/29931712/chrome-autofill-covers-autocomplete-for-google-maps-api-v3/49161445#49161445
       if (window.MutationObserver) {
         var observerHack = new MutationObserver(function () {
           observerHack.disconnect();
-          if (_this2.refs && _this2.refs.input) {
-            _this2.refs.input.autocomplete = _this2.props.inputAutocompleteValue || 'new-password';
+          if (_this3.refs && _this3.refs.input) {
+            _this3.refs.input.autocomplete = _this3.props.inputAutocompleteValue || 'new-password';
           }
         });
         observerHack.observe(this.refs.input, {
@@ -106,7 +139,8 @@ var ReactGoogleAutocomplete = function (_React$Component) {
           types = _props2.types,
           componentRestrictions = _props2.componentRestrictions,
           bounds = _props2.bounds,
-          rest = _objectWithoutProperties(_props2, ['onPlaceSelected', 'types', 'componentRestrictions', 'bounds']);
+          apiKey = _props2.apiKey,
+          rest = _objectWithoutProperties(_props2, ['onPlaceSelected', 'types', 'componentRestrictions', 'bounds', 'apiKey']);
 
       return _react2.default.createElement('input', _extends({ ref: 'input' }, rest));
     }
@@ -121,7 +155,8 @@ ReactGoogleAutocomplete.propTypes = {
   componentRestrictions: _propTypes2.default.object,
   bounds: _propTypes2.default.object,
   fields: _propTypes2.default.array,
-  inputAutocompleteValue: _propTypes2.default.string
+  inputAutocompleteValue: _propTypes2.default.string,
+  apiKey: _propTypes2.default.string
 };
 exports.default = ReactGoogleAutocomplete;
 
@@ -131,16 +166,16 @@ var ReactCustomGoogleAutocomplete = exports.ReactCustomGoogleAutocomplete = func
   function ReactCustomGoogleAutocomplete(props) {
     _classCallCheck(this, ReactCustomGoogleAutocomplete);
 
-    var _this3 = _possibleConstructorReturn(this, (ReactCustomGoogleAutocomplete.__proto__ || Object.getPrototypeOf(ReactCustomGoogleAutocomplete)).call(this, props));
+    var _this4 = _possibleConstructorReturn(this, (ReactCustomGoogleAutocomplete.__proto__ || Object.getPrototypeOf(ReactCustomGoogleAutocomplete)).call(this, props));
 
-    _this3.service = new google.maps.places.AutocompleteService();
-    return _this3;
+    _this4.service = new google.maps.places.AutocompleteService();
+    return _this4;
   }
 
   _createClass(ReactCustomGoogleAutocomplete, [{
     key: 'onChange',
     value: function onChange(e) {
-      var _this4 = this;
+      var _this5 = this;
 
       var _props$types2 = this.props.types,
           types = _props$types2 === undefined ? ['(cities)'] : _props$types2;
@@ -149,9 +184,9 @@ var ReactCustomGoogleAutocomplete = exports.ReactCustomGoogleAutocomplete = func
       if (e.target.value) {
         this.service.getPlacePredictions({ input: e.target.value, types: types }, function (predictions, status) {
           if (status === 'OK' && predictions && predictions.length > 0) {
-            _this4.props.onOpen(predictions);
+            _this5.props.onOpen(predictions);
           } else {
-            _this4.props.onClose();
+            _this5.props.onClose();
           }
         });
       } else {
@@ -161,29 +196,29 @@ var ReactCustomGoogleAutocomplete = exports.ReactCustomGoogleAutocomplete = func
   }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
-      var _this5 = this;
+      var _this6 = this;
 
       if (this.props.input.value) {
         this.placeService = new google.maps.places.PlacesService(this.refs.div);
         this.placeService.getDetails({ placeId: this.props.input.value }, function (e, status) {
           if (status === 'OK') {
-            _this5.refs.input.value = e.formatted_address;
+            _this6.refs.input.value = e.formatted_address;
           }
         });
       }
     }
   }, {
     key: 'render',
     value: function render() {
-      var _this6 = this;
+      var _this7 = this;
 
       return _react2.default.createElement(
         'div',
         null,
         _react2.default.cloneElement(this.props.input, _extends({}, this.props, {
           ref: 'input',
           onChange: function onChange(e) {
-            _this6.onChange(e);
+            _this7.onChange(e);
           }
         })),
         _react2.default.createElement('div', { ref: 'div' })
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-google-autocomplete",
-  "version": "1.1.4",
+  "version": "1.2.4",
   "description": "React component for google autocomplete.",
   "main": "index.js",
   "scripts": {
diff --git a/src/index.js b/src/index.js
@@ -9,6 +9,7 @@ export default class ReactGoogleAutocomplete extends React.Component {
     bounds: PropTypes.object,
     fields: PropTypes.array,
     inputAutocompleteValue: PropTypes.string,
+    apiKey: PropTypes.string
   };
 
   constructor(props) {
@@ -22,6 +23,7 @@ export default class ReactGoogleAutocomplete extends React.Component {
       types = ['(cities)'],
       componentRestrictions,
       bounds,
+      apiKey,
       fields = [
         'address_components',
         'geometry.location',
@@ -41,15 +43,23 @@ export default class ReactGoogleAutocomplete extends React.Component {
 
     this.disableAutofill();
 
-    this.autocomplete = new google.maps.places.Autocomplete(
-      this.refs.input,
-      config
-    );
+    const handleAutoComplete = () => {
+      this.autocomplete = new google.maps.places.Autocomplete(
+        this.refs.input,
+        config
+      );
 
-    this.event = this.autocomplete.addListener(
-      'place_changed',
-      this.onSelected.bind(this)
-    );
+      this.event = this.autocomplete.addListener(
+        'place_changed',
+        this.onSelected.bind(this)
+      );
+    };
+
+    if (apiKey) {
+      this.handleLoadScript().then(() => handleAutoComplete());
+    } else {
+      handleAutoComplete();
+    }
   }
 
   disableAutofill() {
@@ -78,12 +88,34 @@ export default class ReactGoogleAutocomplete extends React.Component {
     }
   }
 
+  handleLoadScript = () => {
+    const googleMapsScriptUrl = `https://maps.googleapis.com/maps/api/js?key=${this.props.apiKey}&libraries=places`;
+
+    // Check if script exists already
+    if (
+      document.querySelectorAll(`script[src="${googleMapsScriptUrl}"]`).length >
+      0
+    ) {
+      return Promise.resolve();
+    }
+
+    this.googleMapsScript = document.createElement('script');
+    this.googleMapsScript.src = googleMapsScriptUrl;
+
+    document.body.appendChild(this.googleMapsScript);
+
+    return new Promise((resolve) => {
+      this.googleMapsScript.addEventListener('load', () => resolve());
+    });
+  };
+
   render() {
     const {
       onPlaceSelected,
       types,
       componentRestrictions,
       bounds,
+      apiKey,
       ...rest
     } = this.props;
 

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-google-autocomplete",`
`3`		`- "version": "1.1.4",`
	`3`	`+ "version": "1.2.4",`
`4`	`4`	`"description": "React component for google autocomplete.",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"scripts": {`