[FEATURE/LOCATION-BIAS-AND-LOCATION-RESTRICTION]

package.json

@@ -50,8 +50,8 @@
     "typescript": "^3.9.7"
   },
   "dependencies": {
-    "@googlemaps/js-api-loader": "^1.14.3",
-    "@types/google.maps": "^3.50.4",
+    "@googlemaps/js-api-loader": "^1.16.8",
+    "@types/google.maps": "^3.57.0",
     "react-select": "^5.7.4",
     "use-debounce": "^3.4.3"
   },

src/google-places-autocomplete.tsx

@@ -16,7 +16,7 @@ const GooglePlacesAutocomplete: React.ForwardRefRenderFunction<GooglePlacesAutoc
     onLoadFailed: args.onLoadFailed ?? console.error,
   });
   const fetchSuggestions = useFetchSuggestions({
-    autocompletionRequest: args.autocompletionRequest ?? {},
+    autocompletionRequest: args.autocompletionRequest,
     debounce: args.debounce ?? 300,
     minLengthAutocomplete: args.minLengthAutocomplete ?? 0,
     placesService,

src/helpers/autocompletion-request-builder.ts

@@ -1,28 +1,16 @@
-import { AutocompletionRequest } from '../types';
+type Arg = {
+  autocompletionRequest?: Omit<google.maps.places.AutocompletionRequest, 'input'>;
+  input: string;
+  sessionToken?: google.maps.places.AutocompleteSessionToken;
+}
 
-export default (
-  autocompletionRequest: AutocompletionRequest,
-  input: string,
-  sessionToken?: google.maps.places.AutocompleteSessionToken,
-): google.maps.places.AutocompletionRequest => {
-  const { bounds, location, ...rest } = autocompletionRequest;
+const autocompletionRequestBuilder = ({ autocompletionRequest, input, sessionToken }: Arg): google.maps.places.AutocompletionRequest => {
+  let res: google.maps.places.AutocompletionRequest = { input };
 
-  const res: google.maps.places.AutocompletionRequest= {
-    input,
-    ...rest,
-  };
-
-  if (sessionToken) {
-    res.sessionToken = sessionToken;
-  }
-
-  if (bounds) {
-    res.bounds = new google.maps.LatLngBounds(...bounds);
-  }
-
-  if (location) {
-    res.location = new google.maps.LatLng(location);
-  }
+  if (autocompletionRequest) res = { ...res, ...autocompletionRequest };
+  if (sessionToken) res.sessionToken = sessionToken;
 
   return res;
 };
+
+export default autocompletionRequestBuilder;

src/hooks/use-fetch-suggestions.ts

@@ -1,12 +1,11 @@
 import { useDebouncedCallback } from 'use-debounce';
 import { Options } from 'react-select';
 
-import { AutocompletionRequest } from '../types';
 import autocompletionRequestBuilder from '../helpers/autocompletion-request-builder';
 
 type CBType = (options: Options<any>) => void;
 type UseFetchSuggestionsArg = {
-  autocompletionRequest: AutocompletionRequest;
+  autocompletionRequest?: Omit<google.maps.places.AutocompletionRequest, 'input'>;
   debounce: number;
   minLengthAutocomplete: number;
   placesService?: google.maps.places.AutocompleteService;
@@ -28,14 +27,12 @@ const useFetchSuggestions = (arg: UseFetchSuggestionsArg): ((value: string, cb:
     if (!placesService) return cb([]);
     if (value.length < minLengthAutocomplete) return cb([]);
 
-    const autocompletionReq: AutocompletionRequest = { ...autocompletionRequest };
-
     placesService.getPlacePredictions(
-      autocompletionRequestBuilder(
-        autocompletionReq,
-        value,
-        withSessionToken && sessionToken,
-      ), (suggestions) => {
+      autocompletionRequestBuilder({
+        autocompletionRequest,
+        input: value,
+        sessionToken: withSessionToken && sessionToken,
+      }), (suggestions) => {
         cb((suggestions || []).map(suggestion => ({ label: suggestion.description, value: suggestion })));
       },
     );

src/types.ts

@@ -7,20 +7,6 @@ export type GooglePlacesAutocompleteHandle = {
   refreshSessionToken: () => void;
 }
 
-export interface LatLng {
-  lat: number;
-  lng: number;
-}
-
-export interface AutocompletionRequest {
-  bounds?: [LatLng, LatLng];
-  componentRestrictions?: { country: string | string[] };
-  location?: LatLng;
-  offset?: number;
-  radius?: number;
-  types?: string[];
-}
-
 export type Option = {
   label: string;
   value: any;
@@ -29,7 +15,7 @@ export type Option = {
 export default interface GooglePlacesAutocompleteProps {
   apiKey?: string;
   apiOptions?: Partial<LoaderOptions>;
-  autocompletionRequest?: AutocompletionRequest;
+  autocompletionRequest?: Omit<google.maps.places.AutocompletionRequest, 'input'>;
   debounce?: number;
   minLengthAutocomplete?: number;
   onLoadFailed?: (error: Error) => void;

src/utils/geocode-by-lat-lng.ts

@@ -1,6 +1,4 @@
-import { LatLng } from '../types';
-
-const geocodeByLatLng = (latLng: LatLng): Promise<google.maps.GeocoderResult[]> => {
+const geocodeByLatLng = (latLng: google.maps.LatLng): Promise<google.maps.GeocoderResult[]> => {
   const geocoder = new window.google.maps.Geocoder();
   const { OK } = window.google.maps.GeocoderStatus;
 

src/utils/get-lat-lng.ts

@@ -1,12 +1,10 @@
-import { LatLng } from '../types';
-
-const getLatLng = (result: google.maps.GeocoderResult): Promise<LatLng> => (
+const getLatLng = (result: google.maps.GeocoderResult): Promise<google.maps.LatLng> => (
   new Promise((resolve, reject) => {
     try {
-      const latLng = {
+      const latLng = new google.maps.LatLng({
         lat: result.geometry.location.lat(),
         lng: result.geometry.location.lng(),
-      };
+      });
       return resolve(latLng);
     } catch (e) {
       return reject(e);