Channel Prop Addition in APIProvider Component

visgl · Oct 22, 2024 · 403c2cf · 403c2cf
1 parent 1d9d52c
commit 403c2cf
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/docs/api-reference/components/api-provider.md b/docs/api-reference/components/api-provider.md
@@ -103,6 +103,10 @@ when authorizing requests from the Maps JavaScript API.
 A list of [libraries][gmp-libs] to load immediately
 (libraries can also be loaded later with the `useMapsLibrary` hook).
 
+#### `channel`: number
+
+To track usage of Google Maps JavaScript API via numeric channels. The only acceptable channel values are numbers from 0-999. Read more in the [documentation][gmp-channel-usage].
+
 #### `solutionChannel`: string
 
 To help Google to better understand types of usage of the Google Maps
@@ -163,3 +167,4 @@ The following hooks are built to work with the `APIProvider` Component:
 [gmp-solutions-usage]: https://developers.google.com/maps/reporting-and-monitoring/reporting#solutions-usage
 [api-provider-src]: https://github.com/visgl/react-google-maps/blob/main/src/components/api-provider.tsx
 [rgm-new-issue]: https://github.com/visgl/react-google-maps/issues/new/choose
+[gmp-channel-usage]: https://developers.google.com/maps/reporting-and-monitoring/reporting#usage-tracking-per-channel
diff --git a/src/components/api-provider.tsx b/src/components/api-provider.tsx
@@ -74,6 +74,12 @@ export type APIProviderProps = {
    * empty string. Read more in the
    * [documentation](https://developers.google.com/maps/reporting-and-monitoring/reporting#solutions-usage).
    */
+  channel?: string;
+  /**
+   * To track usage of Google Maps JavaScript API via numeric channels. The only acceptable channel values are numbers from 0-999.
+   * Read more in the 
+   * [documentation](https://developers.google.com/maps/reporting-and-monitoring/reporting#usage-tracking-per-channel)
+   */
   solutionChannel?: string;
   /**
    * A function that can be used to execute code after the Google Maps JavaScript API has been loaded.
@@ -173,6 +179,9 @@ function useGoogleMapsApiLoader(props: APIProviderProps) {
           if (version) params.v = version;
           if (librariesString?.length > 0) params.libraries = librariesString;
 
+          if (params.channel === undefined || params.channel === '')
+            delete params.channel;
+
           if (params.solutionChannel === undefined)
             params.solutionChannel = DEFAULT_SOLUTION_CHANNEL;
           else if (params.solutionChannel === '') delete params.solutionChannel;

diff --git a/src/libraries/google-maps-api-loader.ts b/src/libraries/google-maps-api-loader.ts
@@ -6,6 +6,7 @@ export type ApiParams = {
   language?: string;
   region?: string;
   libraries?: string;
+  channel?: string;
   solutionChannel?: string;
   authReferrerPolicy?: string;
 };