Improve script loading experience

- Handle loading status
- Use type script in config file to avoid invalid parameters
- Update README

.gitignore

@@ -63,4 +63,4 @@ googleMapKey.js
 .dccache
 
 # Hide secret Google Maps API Config
-.storybook/maps.config.js
+.storybook/maps.config.ts

.storybook/example.maps.config.ts

@@ -0,0 +1,18 @@
+import { WrapperProps } from '@googlemaps/react-wrapper'
+
+/**
+ * Secret Google Mpas API Config
+ * 
+ * Create `maps.congig.ts` in `.storybook` folder
+ * with the following content and replace `YOUR_API_KEY`
+ * with your API Key provided by Google.
+ * 
+ * `maps.config.ts` is ignored by git and will not be
+ * committed to repository and/or published.
+ */
+ export const googleMapsApiConfig: WrapperProps = {
+    //  uncomment next line and replace `YOUR_API_KEY` with your API Key provided by Google.
+    //  apiKey: 'YOUR_API_KEY',
+     libraries: ['drawing', 'visualization', 'places'],
+   }
+

.storybook/googlemapsReactWrapperDecorator.tsx

@@ -1,4 +1,5 @@
-import { Wrapper } from '@googlemaps/react-wrapper'
+import React, { ReactElement } from "react";
+import { Wrapper, Status } from '@googlemaps/react-wrapper'
 import { googleMapsApiConfig } from './maps.config'
 
 /** Storybook decorator for loading google maps API
@@ -9,8 +10,14 @@ import { googleMapsApiConfig } from './maps.config'
  * @see https://www.npmjs.com/package/@googlemaps/react-wrapper
  */
 const googlemapsReactWrapperDecorator = (Story) => {
+  const render = (status: Status): ReactElement => {
+    if (status === Status.LOADING) return <h3>Loading ...</h3>;
+    return null;
+  };
+
+
   return (
-    <Wrapper {...googleMapsApiConfig}>
+    <Wrapper {...googleMapsApiConfig} render={render}>
       <Story />
     </Wrapper>
   )

README.md

@@ -39,7 +39,7 @@ Fork original repo at https://github.com/JustFly1984/react-google-maps-api. Clon
 - `git clone https://github.com/YOUR_USER_NAME/react-google-maps-api.git` - clone your fork
 `
 - `cd react-google-maps-api` - move to newly created folder
-- `cp .storybook/example.maps.config.js .storybook/maps.config.js` - create file with API Key
+- `cp .storybook/example.maps.config.ts .storybook/maps.config.ts` - create file with API Key
 - `yarn install` - install dependencies
 - `yarn storybook` - run storybook server