chore: add internalUsageAttributionIds in the library

README.md

@@ -104,6 +104,17 @@ const App = () => {
   );
 };
 ```
+### Internal usage attribution ID
+
+This library uses [`internalUsageAttributionIds`](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions.internalUsageAttributionIds), which helps Google understand which libraries and
+samples are helpful to developers and is optional.
+
+To opt-out, use
+```
+<APIProvider useInternalUsageAttributionIds=false>
+  <MyComponent />
+</APIProvider>
+```
 
 ## Examples
 

src/components/api-provider.tsx

@@ -29,6 +29,9 @@ export interface APIProviderContextValue {
 }
 
 const DEFAULT_SOLUTION_CHANNEL = 'GMP_visgl_rgmlibrary_v1_default';
+const DEFAULT_INTERNAL_USAGE_ATTRIBUTION_IDS = [
+  'GMP_LIB_VISGL_REACT_GOOGLE_MAPS',
+];
 
 export const APIProviderContext =
   React.createContext<APIProviderContextValue | null>(null);
@@ -81,6 +84,12 @@ export type APIProviderProps = PropsWithChildren<{
    * [documentation](https://developers.google.com/maps/reporting-and-monitoring/reporting#usage-tracking-per-channel)
    */
   solutionChannel?: string;
+  /**
+   * To help Google understand which libraries and samples are helpful to developers, such as usage of this library. To opt out of sending the usage attribution ID, it is safe to set this to `false`.
+   * Read more in the
+   * [documentation](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions.internalUsageAttributionIds)
+   */
+  useInternalUsageAttributionIds?: boolean;
   /**
    * A function that can be used to execute code after the Google Maps JavaScript API has been loaded.
    */
@@ -126,6 +135,7 @@ function useGoogleMapsApiLoader(props: APIProviderProps) {
     apiKey,
     version,
     libraries = [],
+    useInternalUsageAttributionIds = true,
     ...otherApiParams
   } = props;
 
@@ -171,6 +181,14 @@ function useGoogleMapsApiLoader(props: APIProviderProps) {
     [loadedLibraries]
   );
 
+  const internalUsageAttributionIds = useMemo(
+    () =>
+      useInternalUsageAttributionIds
+        ? DEFAULT_INTERNAL_USAGE_ATTRIBUTION_IDS
+        : null,
+    [useInternalUsageAttributionIds],
+  );
+
   useEffect(
     () => {
       (async () => {
@@ -218,7 +236,8 @@ function useGoogleMapsApiLoader(props: APIProviderProps) {
   return {
     status,
     loadedLibraries,
-    importLibrary
+    importLibrary,
+    internalUsageAttributionIds
   };
 }
 
@@ -230,7 +249,7 @@ export const APIProvider: FunctionComponent<APIProviderProps> = props => {
   const {mapInstances, addMapInstance, removeMapInstance, clearMapInstances} =
     useMapInstances();
 
-  const {status, loadedLibraries, importLibrary} =
+  const {status, loadedLibraries, importLibrary, internalUsageAttributionIds} =
     useGoogleMapsApiLoader(loaderProps);
 
   const contextValue: APIProviderContextValue = useMemo(
@@ -241,7 +260,8 @@ export const APIProvider: FunctionComponent<APIProviderProps> = props => {
       clearMapInstances,
       status,
       loadedLibraries,
-      importLibrary
+      importLibrary,
+      internalUsageAttributionIds
     }),
     [
       mapInstances,
@@ -250,8 +270,9 @@ export const APIProvider: FunctionComponent<APIProviderProps> = props => {
       clearMapInstances,
       status,
       loadedLibraries,
-      importLibrary
-    ]
+      importLibrary,
+      internalUsageAttributionIds
+    ],
   );
 
   return (

src/components/map/use-map-instance.ts

@@ -101,6 +101,8 @@
   if (!mapOptions.tilt && Number.isFinite(defaultTilt))
     mapOptions.tilt = defaultTilt;
 
+  mapOptions.internalUsageAttributionIds = context.internalUsageAttributionIds;
+
   for (const key of Object.keys(mapOptions) as (keyof typeof mapOptions)[])
     if (mapOptions[key] === undefined) delete mapOptions[key];