Enable multiple libraries from Google Maps API (#135)

Enable multiple libraries from Google Maps API.

Default: `places`.

The following change allows developers to include other Google Maps API libraries that they may need.

`libraries` will be an array of Libraries represented as strings. Eventually the array is returned as a string with `libraries.toString()`.

E.g)
```
libraries = ["places", "geometry"]

libraries.toString()
// outputs: places,geometry
```

In many use cases with Google Maps a developer may need to use more than one Library and the following PR covers these cases.

Author: juanzgc

index.d.ts

@@ -8,6 +8,7 @@ export interface ReactGoogleAutocompleteProps {
   ) => void;
   inputAutocompleteValue?: string;
   options?: google.maps.places.AutocompleteOptions;
+  libraries?: string[];
   apiKey?: string;
   language?: string;
   googleMapsScriptBaseUrl?: string;

lib/ReactGoogleAutocomplete.js

@@ -28,18 +28,20 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function ReactGoogleAutocomplete(props) {
   var onPlaceSelected = props.onPlaceSelected,
       apiKey = props.apiKey,
+      libraries = props.libraries,
       inputAutocompleteValue = props.inputAutocompleteValue,
       options = props.options,
       googleMapsScriptBaseUrl = props.googleMapsScriptBaseUrl,
       refProp = props.refProp,
       language = props.language,
-      rest = _objectWithoutProperties(props, ["onPlaceSelected", "apiKey", "inputAutocompleteValue", "options", "googleMapsScriptBaseUrl", "refProp", "language"]);
+      rest = _objectWithoutProperties(props, ["onPlaceSelected", "apiKey", "libraries", "inputAutocompleteValue", "options", "googleMapsScriptBaseUrl", "refProp", "language"]);
 
   var _usePlacesWidget = (0, _usePlacesWidget2.default)({
     ref: refProp,
     googleMapsScriptBaseUrl: googleMapsScriptBaseUrl,
     onPlaceSelected: onPlaceSelected,
     apiKey: apiKey,
+    libraries: libraries,
     inputAutocompleteValue: inputAutocompleteValue,
     options: options,
     language: language
@@ -53,6 +55,7 @@ function ReactGoogleAutocomplete(props) {
 
 ReactGoogleAutocomplete.propTypes = {
   apiKey: _propTypes.default.string,
+  libraries: _propTypes.default.arrayOf(_propTypes.default.string),
   ref: _propTypes.default.oneOfType([// Either a function
   _propTypes.default.func, // Or anything shaped { current: any }
   _propTypes.default.shape({

lib/usePlacesAutocompleteService.js

@@ -35,6 +35,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function usePlacesAutocompleteService(_ref) {
   var apiKey = _ref.apiKey,
+      libraries = _ref.libraries,
       _ref$googleMapsScript = _ref.googleMapsScriptBaseUrl,
       googleMapsScriptBaseUrl = _ref$googleMapsScript === void 0 ? _constants.GOOGLE_MAP_SCRIPT_BASE_URL : _ref$googleMapsScript,
       _ref$debounce = _ref.debounce,
@@ -44,7 +45,8 @@ function usePlacesAutocompleteService(_ref) {
       sessionToken = _ref.sessionToken,
       language = _ref.language;
   var languageQueryParam = language ? "&language=".concat(language) : "";
-  var googleMapsScriptUrl = "".concat(googleMapsScriptBaseUrl, "?key=").concat(apiKey, "&libraries=places").concat(languageQueryParam);
+  var librariesDefault = libraries ? "".concat(libraries.toString()) : "places";
+  var googleMapsScriptUrl = "".concat(googleMapsScriptBaseUrl, "?key=").concat(apiKey, "&libraries=").concat(librariesDefault).concat(languageQueryParam);
 
   var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),

lib/usePlacesWidget.js

@@ -25,6 +25,7 @@ function usePlacesWidget(props) {
   var ref = props.ref,
       onPlaceSelected = props.onPlaceSelected,
       apiKey = props.apiKey,
+      libraries = props.libraries,
       _props$inputAutocompl = props.inputAutocompleteValue,
       inputAutocompleteValue = _props$inputAutocompl === void 0 ? "new-password" : _props$inputAutocompl,
       _props$options = props.options;
@@ -46,7 +47,8 @@ function usePlacesWidget(props) {
   var autocompleteRef = (0, _react.useRef)(null);
   var observerHack = (0, _react.useRef)(null);
   var languageQueryParam = language ? "&language=".concat(language) : "";
-  var googleMapsScriptUrl = "".concat(googleMapsScriptBaseUrl, "?libraries=places&key=").concat(apiKey).concat(languageQueryParam);
+  var librariesDefault = libraries ? "".concat(libraries.toString()) : "places";
+  var googleMapsScriptUrl = "".concat(googleMapsScriptBaseUrl, "?libraries=").concat(librariesDefault, "&key=").concat(apiKey).concat(languageQueryParam);
   var handleLoadScript = (0, _react.useCallback)(function () {
     return (0, _utils.loadGoogleMapScript)(googleMapsScriptBaseUrl, googleMapsScriptUrl);
   }, [googleMapsScriptBaseUrl, googleMapsScriptUrl]);

src/ReactGoogleAutocomplete.js

@@ -7,6 +7,7 @@ function ReactGoogleAutocomplete(props) {
   const {
     onPlaceSelected,
     apiKey,
+    libraries,
     inputAutocompleteValue,
     options,
     googleMapsScriptBaseUrl,
@@ -20,6 +21,7 @@ function ReactGoogleAutocomplete(props) {
     googleMapsScriptBaseUrl,
     onPlaceSelected,
     apiKey,
+    libraries,
     inputAutocompleteValue,
     options,
     language
@@ -30,6 +32,7 @@ function ReactGoogleAutocomplete(props) {
 
 ReactGoogleAutocomplete.propTypes = {
   apiKey: PropTypes.string,
+  libraries: PropTypes.arrayOf(PropTypes.string),
   ref: PropTypes.oneOfType([
     // Either a function
     PropTypes.func,

src/usePlacesAutocompleteService.d.ts

@@ -1,5 +1,6 @@
 interface usePlacesAutocompleteServiceConfig {
   apiKey?: string;
+  libraries?: string[];
   googleMapsScriptBaseUrl?: string;
   debounce?: number;
   options?: google.maps.places.AutocompletionRequest;

src/usePlacesAutocompleteService.js

@@ -6,14 +6,16 @@ import { GOOGLE_MAP_SCRIPT_BASE_URL } from "./constants";
 
 export default function usePlacesAutocompleteService({
   apiKey,
+  libraries,
   googleMapsScriptBaseUrl = GOOGLE_MAP_SCRIPT_BASE_URL,
   debounce = 300,
   options = {},
   sessionToken,
   language,
 }) {
   const languageQueryParam = language ? `&language=${language}` : "";
-  const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?key=${apiKey}&libraries=places${languageQueryParam}`;
+  const librariesDefault = libraries ? `${libraries.toString()}` : "places";
+  const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?key=${apiKey}&libraries=${librariesDefault}${languageQueryParam}`;
   const [placePredictions, setPlacePredictions] = useState([]);
   const [isPlacePredsLoading, setIsPlacePredsLoading] = useState(false);
   const [placeInputValue, setPlaceInputValue] = useState(null);

src/usePlacesWidget.js

@@ -8,6 +8,7 @@ export default function usePlacesWidget(props) {
     ref,
     onPlaceSelected,
     apiKey,
+    libraries,
     inputAutocompleteValue = "new-password",
     options: {
       types = ["(cities)"],
@@ -29,7 +30,8 @@ export default function usePlacesWidget(props) {
   const autocompleteRef = useRef(null);
   const observerHack = useRef(null);
   const languageQueryParam = language ? `&language=${language}` : "";
-  const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?libraries=places&key=${apiKey}${languageQueryParam}`;
+  const librariesDefault = libraries ? `${libraries.toString()}` : "places";
+  const googleMapsScriptUrl = `${googleMapsScriptBaseUrl}?libraries=${librariesDefault}&key=${apiKey}${languageQueryParam}`;
 
   const handleLoadScript = useCallback(
     () => loadGoogleMapScript(googleMapsScriptBaseUrl, googleMapsScriptUrl),