feat: use google maps api to support secure requests (#311)

Co-authored-by: Konstantinos Stratis <stratis.konstantinos@gmail.com>
Co-authored-by: Stephan Meijer <stephan.meijer@gmail.com>

docs/lib/providers.ts

@@ -4,6 +4,7 @@ import {
   EsriProvider,
   GeocodeEarthProvider,
   GoogleProvider,
+  LegacyGoogleProvider,
   HereProvider,
   LocationIQProvider,
   OpenCageProvider,
@@ -25,7 +26,9 @@ export default {
     params: { api_key: process.env.GATSBY_GEOCODEEARTH_API_KEY },
   }),
 
-  Google: new GoogleProvider({
+  Google: new GoogleProvider({ apiKey: process.env.GATSBY_GOOGLE_API_KEY }),
+
+  LegacyGoogle: new LegacyGoogleProvider({
     params: { key: process.env.GATSBY_GOOGLE_API_KEY },
   }),
 

docs/providers/google.mdx

@@ -9,8 +9,9 @@ import Map from '../components/Map';
 
 # Google Provider
 
-**note**: Google services require an API key. [Obtain here][1].
-For more options and configurations, see the [Google Maps developer docs][2].
+**<u>note</u>**: Google services require an API key enabled for _both_ the **Geocoding API** and
+the **Maps JavaScript API** (more on key configuration below). [Obtain here][1]. For more options and configurations,
+see the [Google Maps developer docs][2].
 
 <Playground>
   <Map provider="Google" />
@@ -19,11 +20,7 @@ For more options and configurations, see the [Google Maps developer docs][2].
 ```js
 import { GoogleProvider } from 'leaflet-geosearch';
 
-const provider = new GoogleProvider({
-  params: {
-    key: '__YOUR_GOOGLE_KEY__',
-  },
-});
+const provider = new GoogleProvider({ apiKey: '__YOUR_GOOGLE_KEY__' });
 
 // add to leaflet
 import { GeoSearchControl } from 'leaflet-geosearch';
@@ -38,20 +35,29 @@ map.addControl(
 
 ## Optional parameters
 
-Google supports a number of [optional parameters][3]. As Google requires those parameters to be added to the url, they can be added to the `params` key of the provider.
-
-All options defined next to the `params` key, would have been added to the request body.
+Google supports a number of [optional parameters][3] which must be specified when loading the JavaScript API.
 
 ```js
-const provider = new GoogleProvider({
-  params: {
-    key: '__YOUR_GOOGLE_KEY__',
-    language: 'nl', // render results in Dutch
-    region: 'nl', // prioritize matches within The Netherlands
-  },
-});
+const params = {
+  apiKey: '__YOUR_GOOGLE_KEY__',
+  language: 'nl', // render results in Dutch
+  region: 'nl', // prioritize matches within The Netherlands
+};
+
+new GoogleProvider({ ...params });
 ```
 
+## Configuring your API key
+
+### Application restrictions (highly recommended)
+
+Because your API key will be exposed with each request from the client, it is _highly_ recommended that you should add an application restriction to any of your public-facing keys to limit the HTTP referrers from which requests will be accepted - for more information on how to configure this restriction, see [the documentation][4].
+
+### API restrictions (optional)
+
+Your may choose not to apply any API restrictions to your key, leaving it in an "Unrestricted" state. However, if you do wish to limit the APIs that can be accessed with your key, you will need to make sure that it as configured to at least make use of _both_ the **Geocoding API** and the **Maps JavaScript API** in order for web client-based geocoding to work.
+
 [1]: https://developers.google.com/maps/documentation/javascript/get-api-key
-[2]: https://developers.google.com/maps/documentation/geocoding/start
-[3]: https://developers.google.com/maps/documentation/geocoding/intro#geocoding
+[2]: https://developers.google.com/maps/documentation/javascript/overview
+[3]: https://googlemaps.github.io/js-api-loader/interfaces/LoaderOptions.html
+[4]: https://cloud.google.com/docs/authentication/api-keys#http

docs/providers/legacy-google.mdx

@@ -0,0 +1,63 @@
+---
+name: LegacyGoogle
+menu: Providers
+route: /providers/legacy-google
+---
+
+import Playground from '../components/Playground';
+import Map from '../components/Map';
+
+# Legacy Google Provider
+
+**<u>WARNING</u>: This provider is unsafe to use and should be considered <u>DEPRECATED</u>.
+It is strongly suggested to use the new [Google Provider][4]. If you're currently migrating from a previous version
+and you still wish to use this provider you should pull in the `LegacyGoogleProvider` class
+and rename your references accordingly.**
+
+**note**: Google services require an API key. [Obtain here][1].
+For more options and configurations, see the [Google Maps developer docs][2].
+
+<Playground>
+  <Map provider="Google" />
+</Playground>
+
+```js
+import { LegacyGoogleProvider } from 'leaflet-geosearch';
+
+const provider = new LegacyGoogleProvider({
+  params: {
+    key: '__YOUR_GOOGLE_KEY__',
+  },
+});
+
+// add to leaflet
+import { GeoSearchControl } from 'leaflet-geosearch';
+
+map.addControl(
+  new GeoSearchControl({
+    provider,
+    style: 'bar',
+  }),
+);
+```
+
+## Optional parameters
+
+Google supports a number of [optional parameters][3]. As Google requires those parameters to be added to the url, they can be added to the `params` key of the provider.
+
+All options defined next to the `params` key, would have been added to the request body.
+
+```js
+const provider = new LegacyGoogleProvider({
+  params: {
+    key: '__YOUR_GOOGLE_KEY__',
+    language: 'nl', // render results in Dutch
+    region: 'nl', // prioritize matches within The Netherlands
+  },
+});
+```
+
+[1]: https://developers.google.com/maps/documentation/javascript/get-api-key
+[2]: https://developers.google.com/maps/documentation/geocoding/start
+[3]: https://developers.google.com/maps/documentation/geocoding/intro#geocoding
+[4]: /providers/google

package.json

@@ -70,6 +70,7 @@
   "homepage": "https://github.com/smeijer/leaflet-geosearch#readme",
   "license": "MIT",
   "devDependencies": {
+    "@types/google.maps": "^3.50.2",
     "@types/jest": "^29.1.1",
     "@types/lodash.debounce": "^4.0.6",
     "@types/react-dom": "^18.0.6",
@@ -100,6 +101,7 @@
     "typescript": "^4.8.4"
   },
   "optionalDependencies": {
+    "@googlemaps/js-api-loader": "^1.14.3",
     "leaflet": "^1.6.0"
   },
   "husky": {

src/index.ts

@@ -7,6 +7,7 @@ export { default as BingProvider } from './providers/bingProvider';
 export { default as EsriProvider } from './providers/esriProvider';
 export { default as GeocodeEarthProvider } from './providers/geocodeEarthProvider';
 export { default as GoogleProvider } from './providers/googleProvider';
+export { default as LegacyGoogleProvider } from './providers/legacyGoogleProvider';
 export { default as HereProvider } from './providers/hereProvider';
 export { default as LocationIQProvider } from './providers/locationIQProvider';
 export { default as OpenCageProvider } from './providers/openCageProvider';

src/providers/__tests__/bingResponse.json

@@ -9,7 +9,9 @@
         {
           "__type": "Location:http://schemas.microsoft.com/search/local/ws/rest/v1",
           "bbox": [
-            52.099399566650391, 4.2973999977111816, 52.099601745605469,
+            52.099399566650391,
+            4.2973999977111816,
+            52.099601745605469,
             4.2975997924804687
           ],
           "name": "Madurodam, Netherlands",

src/providers/__tests__/googleGeocoderResponse.ts

@@ -0,0 +1,75 @@
+const geocoderGeocoderResponse: google.maps.GeocoderResult = {
+  address_components: [
+    {
+      long_name: '1',
+      short_name: '1',
+      types: ['street_number'],
+    },
+    {
+      long_name: 'George Maduroplein',
+      short_name: 'George Maduroplein',
+      types: ['route'],
+    },
+    {
+      long_name: 'Scheveningen',
+      short_name: 'Scheveningen',
+      types: ['political', 'sublocality', 'sublocality_level_1'],
+    },
+    {
+      long_name: 'Den Haag',
+      short_name: 'Den Haag',
+      types: ['locality', 'political'],
+    },
+    {
+      long_name: 'Den Haag',
+      short_name: 'Den Haag',
+      types: ['administrative_area_level_2', 'political'],
+    },
+    {
+      long_name: 'Zuid-Holland',
+      short_name: 'ZH',
+      types: ['administrative_area_level_1', 'political'],
+    },
+    {
+      long_name: 'Netherlands',
+      short_name: 'NL',
+      types: ['country', 'political'],
+    },
+    {
+      long_name: '2584 RZ',
+      short_name: '2584 RZ',
+      types: ['postal_code'],
+    },
+  ],
+  formatted_address: 'George Maduroplein 1, 2584 RZ Den Haag, Netherlands',
+  geometry: {
+    location: {
+      toJSON: () => {
+        return {
+          lat: 52.0994757,
+          lng: 4.2969304,
+        } as google.maps.LatLngLiteral;
+      },
+    } as google.maps.LatLng,
+    location_type: 'ROOFTOP' as google.maps.GeocoderLocationType.ROOFTOP,
+    viewport: {
+      toJSON: () => {
+        return {
+          north: 52.1008246802915,
+          east: 4.298279380291502,
+          south: 52.0981267197085,
+          west: 4.295581419708498,
+        } as google.maps.LatLngBoundsLiteral;
+      },
+    } as google.maps.LatLngBounds,
+  },
+  place_id: 'ChIJx9INHE23xUcRQLyRyK-B_sw',
+  types: [
+    'amusement_park',
+    'establishment',
+    'point_of_interest',
+    'tourist_attraction',
+  ],
+};
+
+export default geocoderGeocoderResponse;