feat(gmap-vue): auto detect when google maps api is loaded

This feature turns irrelevant the customCallback option in the
configuration object.
This option will be removed in the next major release.

packages/documentation/docs/README.md

@@ -110,6 +110,7 @@ Vue.use(GmapVue, {
     // [OPTIONAL] If you want to set the version, you can do so:
     v: '3.26',
 
+    // This option was added on v3.0.0 but will be removed in the next major release.
     // If you already have an script tag that loads Google Maps API and you want to use it set you callback
     // here and our callback `GoogleMapsCallback` will execute your custom callback at the end; it must attached
     // to the `window` object, is the only requirement.
@@ -133,6 +134,14 @@ Vue.use(GmapVue, {
 
 ::: tip
 
+### v3.2.0
+
+From v3.2.0 when you load the Google Maps API externally, from an HTML file for example, now you can load the plugin without any load option, and you don't need to change anything from you Google Map script tag in the HTML file, in that sort of cases if the callback is not called after **1 seconds** from be initialized the plugin will be check **every 0.5 second** if the object `window.google.maps` is populated and ready to use it.
+
+### v3.0.0
+
+**We encourage to use the new way introduced from v3.2.0 and explained above**
+
 If you already have an script tag that loads Google Maps API and you want to use it set you callback in the `customCallback` option and our `GoogleMapsCallback` callback will execute your custom callback at the end.
 
  **It must attached to the `window` object**, is the only requirement.
@@ -143,6 +152,12 @@ window.MyCustomCallback = () => { console.info('MyCustomCallback was executed')
 
 :::
 
+::: warning
+
+The new option `customCallback` inside the `load` object in the plugin configuration will be removed in the next major version.
+
+:::
+
 In you components or `.vue` files add the following
 
 ```vue

packages/gmap-vue/src/main.js

@@ -113,7 +113,7 @@ export const helpers = {
  * @param  {string} options.load.libraries=places the Google Maps libraries that you will use eg: 'places,drawing,visualization'
  * @param  {string|undefined} options.load.v=undefined the Google Maps API version, default latest
  * @param  {string|undefined} options.load.callback=GoogleMapsCallback This must be ignored if have another callback that you need to run when Google Maps API is ready please use the `customCallback` option.
- * @param  {string|undefined} options.load.customCallback=undefined If you already have an script tag that loads Google Maps API and you want to use it set you callback in the `customCallback` option and our `GoogleMapsCallback` callback will execute your custom callback at the end; it must attached to the `window` object, is the only requirement.
+ * @param  {string|undefined} options.load.customCallback=undefined This option was added on v3.0.0 but will be removed in the next major release. If you already have an script tag that loads Google Maps API and you want to use it set you callback in the `customCallback` option and our `GoogleMapsCallback` callback will execute your custom callback at the end; it must attached to the `window` object, is the only requirement.
  */
 function gmapVuePluginInstallFn(Vue, options) {
   // see defaults

packages/gmap-vue/src/utils/factories/promise-lazy.js

@@ -21,7 +21,7 @@ function getPromiseLazyCreatorFn(googleMapsApiInitializer, GoogleMapsApi) {
    * @param  {string} options.load.libraries=places the Google Maps libraries that you will use eg: 'places,drawing,visualization'
    * @param  {string|undefined} options.load.v=undefined the Google Maps API version, default latest
    * @param  {string|undefined} options.load.callback=GoogleMapsCallback This must be ignored if have another callback that you need to run when Google Maps API is ready please use the `customCallback` option.
-   * @param  {string|undefined} options.load.customCallback=undefined If you already have an script tag that loads Google Maps API and you want to use it set you callback in the `customCallback` option and our `GoogleMapsCallback` callback will execute your custom callback at the end; it must attached to the `window` object, is the only requirement.
+   * @param  {string|undefined} options.load.customCallback=undefined This option was added on v3.0.0 but will be removed in the next major release. If you already have an script tag that loads Google Maps API and you want to use it set you callback in the `customCallback` option and our `GoogleMapsCallback` callback will execute your custom callback at the end; it must attached to the `window` object, is the only requirement.
    */
   const promiseLazyCreator = (options) => {
     /**
@@ -65,10 +65,30 @@ function getPromiseLazyCreatorFn(googleMapsApiInitializer, GoogleMapsApi) {
         // Do nothing if run from server-side
         return;
       }
+
+      let callbackExecuted = false;
+
       window.GoogleMapsCallback = () => {
         resolve();
+        callbackExecuted = true;
+        // TODO: this should be removed on the next major release
         window[options?.load?.customCallback]?.();
       };
+
+      let timeoutId = setTimeout(() => {
+        let intervalId = setInterval(() => {
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+            timeoutId = undefined;
+          }
+
+          if (window?.google?.maps != null && !callbackExecuted) {
+            window.GoogleMapsCallback();
+            clearInterval(intervalId);
+            intervalId = undefined;
+          }
+        }, 500);
+      }, 1000);
     }).then(onMapsReady);
 
     return getLazyValue(() => promise);

packages/gmap-vue/src/utils/initializer/google-maps-api-initializer.js

@@ -21,7 +21,7 @@ function createGoogleMapsAPIInitializer() {
    * @param  {string} options.libraries=places The Google Maps libraries that you will use eg: 'places,drawing,visualization', can be given as an array too (@see https://developers.google.com/maps/documentation/javascript/libraries)
    * @param  {string|undefined} options.v=undefined The Google Maps API version, default latest
    * @param  {string|undefined} options.callback=GoogleMapsCallback This must be ignored if have another callback that you need to run when Google Maps API is ready please use the `customCallback` option.
-   * @param  {string|undefined} options.customCallback=undefined If you already have an script tag that loads Google Maps API and you want to use it set you callback in the `customCallback` option and our `GoogleMapsCallback` callback will execute your custom callback at the end; it must attached to the `window` object, is the only requirement.
+   * @param  {string|undefined} options.customCallback=undefined This option was added on v3.0.0 but will be removed in the next major release. If you already have an script tag that loads Google Maps API and you want to use it set you callback in the `customCallback` option and our `GoogleMapsCallback` callback will execute your custom callback at the end; it must attached to the `window` object, is the only requirement.
    * @param {boolean} loadCn=false    Boolean. If set to true, the map will be loaded from google maps China
    *                  (@see https://developers.google.com/maps/documentation/javascript/basics#GoogleMapsChina)
    */