fix: update examples and minimize URLs (#799)

Author: chrisjshull

README.md

@@ -22,7 +22,7 @@ npm i @googlemaps/js-api-loader
 Alternatively you may add the umd package directly to the html document using the unpkg link.
 
 ```html
-<script src="https://unpkg.com/@googlemaps/js-api-loader@1.0.0/dist/index.min.js"></script>
+<script src="https://unpkg.com/@googlemaps/js-api-loader@1.x/dist/index.min.js"></script>
 ```
 
 When adding via unpkg, the loader can be accessed at `google.maps.plugins.loader.Loader`.
@@ -61,6 +61,20 @@ const mapOptions = {
 
 ```
 
+Using a promise for a specific library.
+
+```javascript
+// Promise for a specific library
+loader
+  .importLibrary('maps')
+  .then(({Map}) => {
+    new Map(document.getElementById("map"), mapOptions);
+  })
+  .catch((e) => {
+    // do something
+  });
+```
+
 Using a promise for when the script has loaded.
 
 ```javascript

examples/index.html

@@ -35,7 +35,6 @@
     </style>
     <script
       nonce="caffe67d7b989af3a1c7f4a1a6c79bd9fb2b4eb0"
-      type="text/javascript"
       src="../dist/index.umd.js"
     ></script>
 
@@ -55,14 +54,23 @@
         apiKey: "",
         version: "weekly",
         libraries: ["places"],
-        nonce: "caffe67d7b989af3a1c7f4a1a6c79bd9fb2b4eb0",
       });
 
+      // Promise for a specific library
+      loader
+        .importLibrary('maps')
+        .then(({Map}) => {
+          new Map(document.getElementById("map"), mapOptions);
+        })
+        .catch((e) => {
+          // do something
+        });
+
       // Promise
       loader
         .load()
         .then((google) => {
-          new google.maps.Map(document.getElementById("map"), mapOptions);
+          // new google.maps.Map(document.getElementById("map"), mapOptions);
         })
         .catch((e) => {
           // do something

src/index.ts

@@ -492,6 +492,23 @@ export class Loader {
       return;
     }
 
+    const params = {
+      key: this.apiKey,
+      channel: this.channel,
+      client: this.client,
+      libraries: this.libraries,
+      v: this.version,
+      mapIds: this.mapIds,
+      language: this.language,
+      region: this.region,
+      authReferrerPolicy: this.authReferrerPolicy,
+    };
+    // keep the URL minimal:
+    Object.keys(params).forEach(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (key) => !(params as any)[key] && delete (params as any)[key]
+    );
+
     if (!window?.google?.maps?.importLibrary) {
       // tweaked copy of https://developers.google.com/maps/documentation/javascript/load-maps-js-api#dynamic-library-import
       // which also sets the url, the id, and the nonce
@@ -531,17 +548,7 @@ export class Loader {
             }));
         // @ts-ignore
         d[l] ? console.warn(p + " only loads once. Ignoring:", g) : (d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)));
-      })({
-        key: this.apiKey,
-        channel: this.channel,
-        client: this.client,
-        libraries: this.libraries,
-        v: this.version,
-        mapIds: this.mapIds,
-        language: this.language,
-        region: this.region,
-        authReferrerPolicy: this.authReferrerPolicy,
-      });
+      })(params);
       /* eslint-enable */
     }