Add load prop to Map

src/components/Map.tsx

@@ -43,6 +43,7 @@ function forwardMapkitEvent<E>(
 const Map = React.forwardRef<mapkit.Map | null, React.PropsWithChildren<MapProps>>(({
   children = undefined,
 
+  load: customLoad,
   token,
 
   colorScheme = ColorScheme.Light,
@@ -94,7 +95,8 @@ const Map = React.forwardRef<mapkit.Map | null, React.PropsWithChildren<MapProps
 
   // Load the map
   useEffect(() => {
-    load(token).then(() => {
+    const loadMap = typeof customLoad === 'function' ? customLoad : load;
+    loadMap(token).then(() => {
       if (exists.current) return;
       const options = initialRegion
         ? { region: toMapKitCoordinateRegion(initialRegion) }

src/components/MapProps.tsx

@@ -5,6 +5,11 @@ import {
 } from '../util/parameters';
 
 export default interface MapProps {
+  /**
+   * Custom load method for MapKit JS.
+   */
+  load?: (token: string) => Promise<void>;
+
   /**
    * The token provided by MapKit JS.
    */

src/stories/Map.stories.tsx

@@ -205,3 +205,43 @@ export const PointOfInterestFilters = () => {
   );
 };
 PointOfInterestFilters.storyName = 'Point of Interest Filter';
+
+export const CustomLoadFunction = () => {
+  const initialRegion: CoordinateRegion = useMemo(() => ({
+    centerLatitude: 40.7538,
+    centerLongitude: -73.986,
+    latitudeDelta: 0.03,
+    longitudeDelta: 0.03,
+  }), []);
+
+  return (
+    <Map
+      load={(customLoadToken) => (
+        new Promise((resolve) => {
+          const element = document.createElement('script');
+          // @ts-ignore-next-line
+          window.initMapKit = () => {
+            // @ts-ignore-next-line
+            delete window.initMapKit;
+            window.mapkit.init({
+              authorizationCallback: (done) => {
+                done(customLoadToken);
+              },
+            });
+            resolve();
+          };
+          element.src = 'https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js';
+          element.dataset.callback = 'initMapKit';
+          element.dataset.initialToken = customLoadToken;
+          element.dataset.libraries = 'map';
+          element.crossOrigin = 'anonymous';
+          document.head.appendChild(element);
+        })
+      )}
+      token={token}
+      initialRegion={initialRegion}
+      showsMapTypeControl={false}
+    />
+  );
+};
+CustomLoadFunction.storyName = 'Custom `load` Function';