Make apiUrl dynamic

packages/react-google-maps-api/src/useLoadScript.tsx

@@ -5,14 +5,18 @@ import invariant from 'invariant'
 import { isBrowser } from './utils/isbrowser'
 import { injectScript } from './utils/injectscript'
 import { preventGoogleFonts } from './utils/prevent-google-fonts'
-import { makeLoadScriptUrl, LoadScriptUrlOptions } from './utils/make-load-script-url'
+import {
+  makeLoadScriptUrl,
+  LoadScriptUrlOptions,
+} from './utils/make-load-script-url'
 
 import { defaultLoadScriptProps } from './LoadScript'
 
 export interface UseLoadScriptOptions extends LoadScriptUrlOptions {
   id?: string | undefined
   nonce?: string | undefined
   preventGoogleFontsLoading?: boolean | undefined
+  apiUrl?: string | undefined
 }
 
 let previouslyLoadedUrl: string
@@ -30,6 +34,7 @@ export function useLoadScript({
   channel,
   mapIds,
   authReferrerPolicy,
+  apiUrl,
 }: UseLoadScriptOptions): {
   isLoaded: boolean
   loadError: Error | undefined
@@ -76,7 +81,8 @@ export function useLoadScript({
     libraries,
     channel,
     mapIds,
-    authReferrerPolicy
+    authReferrerPolicy,
+    apiUrl,
   })
 
   useEffect(
@@ -104,8 +110,9 @@ export function useLoadScript({
             setLoadError(err)
           }
           console.warn(`
-        There has been an Error with loading Google Maps API script, please check that you provided correct google API key (${googleMapsApiKey ||
-          '-'}) or Client ID (${googleMapsClientId || '-'})
+        There has been an Error with loading Google Maps API script, please check that you provided correct google API key (${
+          googleMapsApiKey || '-'
+        }) or Client ID (${googleMapsClientId || '-'})
         Otherwise it is a Network issue.
       `)
           console.error(err)

packages/react-google-maps-api/src/utils/make-load-script-url.ts

@@ -4,7 +4,7 @@ import invariant from 'invariant'
 export type Libraries = Library[]
 
 export interface LoadScriptUrlOptions {
-  googleMapsApiKey: string | ""
+  googleMapsApiKey: string | ''
   googleMapsClientId?: string | undefined
   version?: string | undefined
   language?: string | undefined
@@ -13,6 +13,7 @@ export interface LoadScriptUrlOptions {
   channel?: string | undefined
   mapIds?: string[] | undefined
   authReferrerPolicy?: 'origin' | undefined
+  apiUrl?: string | undefined
 }
 
 export function makeLoadScriptUrl({
@@ -24,12 +25,14 @@ export function makeLoadScriptUrl({
   libraries,
   channel,
   mapIds,
-  authReferrerPolicy
+  authReferrerPolicy,
+  apiUrl = 'https://maps.googleapis.com',
 }: LoadScriptUrlOptions): string {
   const params = []
 
   invariant(
-    (googleMapsApiKey && googleMapsClientId) || !(googleMapsApiKey && googleMapsClientId),
+    (googleMapsApiKey && googleMapsClientId) ||
+      !(googleMapsApiKey && googleMapsClientId),
     'You need to specify either googleMapsApiKey or googleMapsClientId for @react-google-maps/api load script to work. You cannot use both at the same time.'
   )
 
@@ -70,5 +73,5 @@ export function makeLoadScriptUrl({
   params.push('loading=async')
   params.push('callback=initMap')
 
-  return `https://maps.googleapis.com/maps/api/js?${params.join('&')}`
+  return `${apiUrl}/maps/api/js?${params.join('&')}`
 }