feat: add origin parameter to calculate distance in Google Autocomplete

Author: EQuimper

README.md

@@ -36,6 +36,7 @@ The `useGoogleAutocomplete` hook takes 2 arguments
 | lat             | optional - The latitude. If provided, lng is required                                                  |
 | lng             | optional - The longitude. If provided, lat is required                                                 |
 | strictBounds    | optional - Returns only places that are strictly within the region defined by location and radius.     |
+| origin          | optional - The origin point as { lat, lng } from which to calculate straight-line distance to the destinations (returned as distance_meters) |
 | proxyUrl        | optional - This is required if you want to use the hook in a Web based platform. Since we dont use the Google SDK,  the http call will fail because of issues related to CORS unless a proxyUrl is provided                       |
 | headers         | optional - Custom headers to include in the Google Places API requests. Useful for passing platform-specific API restrictions such as `X-Android-Package`, `X-Android-Cert`, or `X-Ios-Bundle-Identifier`. |
 
@@ -109,6 +110,7 @@ export interface GoogleLocationResult {
     value: string;
   }>;
   types: string[];
+  distance_meters?: number; // Present when origin parameter is provided
 }
 ```
 

example/src/App.tsx

@@ -19,6 +19,9 @@ export default function App() {
       language: 'en',
       minLength: 3,
       proxyUrl: isWeb ? 'https://cors-anywhere.herokuapp.com/' : undefined,
+      // Example: Using origin to get distance from Times Square, NYC
+      // Uncomment to see distance_meters in results
+      // origin: { lat: 40.7580, lng: -73.9855 },
     }
   );
 
@@ -39,6 +42,11 @@ export default function App() {
         {locationResults.map((location) => (
           <View key={location.id}>
             <Text>{location.structured_formatting.main_text}</Text>
+            {location.distance_meters && (
+              <Text style={{ fontSize: 12, color: '#666' }}>
+                {Math.round(location.distance_meters)} meters away
+              </Text>
+            )}
           </View>
         ))}
       </ScrollView>

src/GoogleAutocomplete.tsx

@@ -72,6 +72,15 @@ interface Options {
    */
   strictBounds?: boolean;
 
+  /**
+   * The origin point from which to calculate straight-line distance to the destination (returned as distance_meters).
+   * If omitted, straight-line distance will not be returned.
+   */
+  origin?: {
+    lat: number;
+    lng: number;
+  };
+
   /**
    * Proxy url if you want to use the web, this is needed cause of CORS issue
    */
@@ -120,6 +129,7 @@ export const useGoogleAutocomplete = (apiKey: string, opts: Options = {}) => {
           lng: opts.lng,
           radius: opts.radius,
           components: opts.components,
+          origin: opts.origin,
         },
         opts.proxyUrl,
         opts.headers

src/services/google.service.ts

@@ -16,6 +16,10 @@ export interface Query {
   lat?: number;
   lng?: number;
   strictBounds?: boolean;
+  origin?: {
+    lat: number;
+    lng: number;
+  };
 }
 
 export interface GoogleLocationDetailResult {
@@ -71,6 +75,7 @@ export interface GoogleLocationResult {
     value: string;
   }>;
   types: string[];
+  distance_meters?: number;
 }
 
 interface NormalizeQuery {
@@ -85,11 +90,12 @@ interface NormalizeQuery {
   components?: string;
   radius?: string;
   location?: string;
+  origin?: string;
   strictBounds?: boolean;
 }
 
 const normalizeQuery = (query: Query): NormalizeQuery => {
-  const { lat, lng, ...rest } = query;
+  const { lat, lng, origin, ...rest } = query;
 
   // The latitude/longitude around which to retrieve place information. This must be specified as latitude,longitude.
   let location;
@@ -103,9 +109,19 @@ const normalizeQuery = (query: Query): NormalizeQuery => {
     location = `${lat},${lng}`;
   }
 
+  // The origin point from which to calculate straight-line distance. This must be specified as latitude,longitude.
+  let originStr;
+  if (origin) {
+    if (!origin.lat || !origin.lng) {
+      throw new Error('Query: Origin must have both lat & lng');
+    }
+    originStr = `${origin.lat},${origin.lng}`;
+  }
+
   return {
     ...rest,
     location,
+    origin: originStr,
   };
 };