feat(v3): implement import-library in all components

packages/v3/src/components/autocomplete-input.vue

@@ -71,7 +71,7 @@ const props = withDefaults(
   }>(),
   {
     selectFirstOnEnter: true,
-  }
+  },
 );
 
 /*******************************************************************************
@@ -107,22 +107,22 @@ watch(
     if (newValue && newValue !== oldValue) {
       autoCompleteInstance?.setComponentRestrictions(newValue);
     }
-  }
+  },
 );
 
 /*******************************************************************************
  * HOOKS
  ******************************************************************************/
 onMounted(() => {
   useGoogleMapsApiPromiseLazy()
-    .then(() => {
+    .then(async () => {
       let scopedInput = props.slotRef
         ? props.slotRef
         : gmvAutoCompleteInput.value;
 
       if (!scopedInput) {
         throw new Error(
-          `we can find the template ref: 'gmvAutoCompleteInput' or we can't use the slotRef prop`
+          `we can find the template ref: 'gmvAutoCompleteInput' or we can't use the slotRef prop`,
         );
       }
 
@@ -132,7 +132,7 @@ onMounted(() => {
 
       if (typeof google.maps.places.Autocomplete !== 'function') {
         throw new Error(
-          "google.maps.places.Autocomplete is undefined. Did you add 'places' to libraries when loading Google Maps?"
+          "google.maps.places.Autocomplete is undefined. Did you add 'places' to libraries when loading Google Maps?",
         );
       }
 
@@ -143,30 +143,30 @@ onMounted(() => {
         ...props.options,
       };
 
-      autoCompleteInstance = new google.maps.places.Autocomplete(
-        scopedInput,
-        autocompleteOptions
-      );
+      const { Autocomplete } = (await google.maps.importLibrary(
+        'places',
+      )) as google.maps.PlacesLibrary;
+      autoCompleteInstance = new Autocomplete(scopedInput, autocompleteOptions);
 
       const autoCompletePropsConfig =
         getComponentPropsConfig('GmvAutocomplete');
       const autoCompleteEventsConfig = getComponentEventsConfig(
         'GmvAutocomplete',
-        'auto'
+        'auto',
       );
 
       bindPropsWithGoogleMapsSettersAndGettersOnSetup(
         autoCompletePropsConfig,
         autoCompleteInstance,
         emits,
-        props
+        props,
       );
 
       bindGoogleMapsEventsToVueEventsOnSetup(
         autoCompleteEventsConfig,
         autoCompleteInstance,
         emits,
-        excludedEvents
+        excludedEvents,
       );
 
       if (props.setFieldsTo) {

packages/v3/src/components/circle-shape.vue

@@ -44,7 +44,7 @@ const props = withDefaults(
     editable: false,
     strokePosition: globalThis?.google?.maps?.StrokePosition?.CENTER || 0.0,
     visible: true,
-  }
+  },
 );
 
 /*******************************************************************************
@@ -68,7 +68,7 @@ const excludedEvents = usePluginOptions()?.excludeEventsOnAllComponents?.();
 let circleShapeInstance: google.maps.Circle | undefined;
 
 const promise = mapPromise
-  ?.then((mapInstance) => {
+  ?.then(async (mapInstance) => {
     if (!mapInstance) {
       throw new Error('The map instance was not created');
     }
@@ -82,25 +82,28 @@ const promise = mapPromise
       ...props.options,
     };
 
-    circleShapeInstance = new google.maps.Circle(circleShapeOptions);
+    const { Circle } = (await google.maps.importLibrary(
+      'maps',
+    )) as google.maps.MapsLibrary;
+    circleShapeInstance = new Circle(circleShapeOptions);
 
     const circleShapePropsConfig = getComponentPropsConfig('GmvCircle');
     const circleShapeEventsConfig = getComponentEventsConfig(
       'GmvCircle',
-      'auto'
+      'auto',
     );
 
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       circleShapePropsConfig,
       circleShapeInstance,
       emits,
-      props
+      props,
     );
     bindGoogleMapsEventsToVueEventsOnSetup(
       circleShapeEventsConfig,
       circleShapeInstance,
       emits,
-      excludedEvents
+      excludedEvents,
     );
 
     return circleShapeInstance;
@@ -138,5 +141,5 @@ onUnmounted(() => {
 /*******************************************************************************
  * EXPOSE
  ******************************************************************************/
-defineExpose({ circleShapeInstance });
+defineExpose({ circleShapeInstance, circleShapePromise: promise });
 </script>

packages/v3/src/components/cluster-icon.vue

@@ -38,12 +38,12 @@ import { inject, onBeforeUnmount, onUnmounted, onUpdated, provide } from 'vue';
 const props = withDefaults(
   defineProps<{
     algorithm?: Algorithm;
-    markers?: google.maps.Marker[];
+    markers?: google.maps.marker.AdvancedMarkerElement[];
     onClusterClick?: onClusterClickHandler;
     renderer?: Renderer;
     options?: Record<string, any>;
   }>(),
-  {}
+  {},
 );
 
 /*******************************************************************************
@@ -84,7 +84,7 @@ const promise = mapPromise
 
     if (!MarkerClusterer && typeof MarkerClusterer !== 'function') {
       throw new Error(
-        'MarkerClusterer is not installed! Import it or include it from https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js'
+        'MarkerClusterer is not installed! Import it or include it from https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js',
       );
     }
 
@@ -99,21 +99,21 @@ const promise = mapPromise
     const clusterIconPropsConfig = getComponentPropsConfig('GmvCluster');
     const clusterIconEventsConfig = getComponentEventsConfig(
       'GmvCluster',
-      'auto'
+      'auto',
     );
 
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       clusterIconPropsConfig,
       clusterInstance,
       emits,
-      props
+      props,
     );
 
     bindGoogleMapsEventsToVueEventsOnSetup(
       clusterIconEventsConfig,
       clusterInstance,
       emits,
-      excludedEvents
+      excludedEvents,
     );
 
     return clusterInstance;
@@ -164,5 +164,5 @@ onUpdated(() => {
 /*******************************************************************************
  * EXPOSE
  ******************************************************************************/
-defineExpose({ clusterInstance });
+defineExpose({ clusterInstance, clusterPromise: promise });
 </script>

packages/v3/src/components/drawing-manager.vue

@@ -63,7 +63,7 @@ const props = withDefaults(
     drawingControl: true,
     drawingMode: null,
     // shapes: [] as any,
-  }
+  },
 );
 
 /*******************************************************************************
@@ -89,7 +89,7 @@ let drawingManagerInstance: google.maps.drawing.DrawingManager | undefined;
 let map: google.maps.Map | undefined;
 let selectedShape: google.maps.drawing.OverlayCompleteEvent | undefined;
 const promise = mapPromise
-  ?.then((mapInstance) => {
+  ?.then(async (mapInstance) => {
     if (!mapInstance) {
       throw new Error('the map instance was not created');
     }
@@ -116,7 +116,10 @@ const promise = mapPromise
       ...props.options,
     };
 
-    drawingManagerInstance = new google.maps.drawing.DrawingManager({
+    const { DrawingManager } = (await google.maps.importLibrary(
+      'drawing',
+    )) as google.maps.DrawingLibrary;
+    drawingManagerInstance = new DrawingManager({
       ...drawingManagerOptions,
       drawingControlOptions: {
         ...defaultDrawingControlOptions,
@@ -129,25 +132,25 @@ const promise = mapPromise
       getComponentPropsConfig('GmvDrawingManager');
     const drawingManagerEventsConfig = getComponentEventsConfig(
       'GmvDrawingManager',
-      'auto'
+      'auto',
     );
 
     bindPropsWithGoogleMapsSettersAndGettersOnSetup(
       drawingManagerPropsConfig,
       drawingManagerInstance,
       emits,
-      props
+      props,
     );
     bindGoogleMapsEventsToVueEventsOnSetup(
       drawingManagerEventsConfig,
       drawingManagerInstance,
       emits,
-      excludedEvents
+      excludedEvents,
     );
 
     drawingManagerInstance.addListener(
       'overlaycomplete',
-      (event: google.maps.drawing.OverlayCompleteEvent) => addShape(event)
+      (event: google.maps.drawing.OverlayCompleteEvent) => addShape(event),
     );
 
     // TODO: check this event if it is needed or is the expected or best behaviour for all common cases
@@ -324,7 +327,7 @@ watch(
         });
       }
     }
-  }
+  },
 );
 
 watch(
@@ -337,7 +340,7 @@ watch(
         });
       }
     }
-  }
+  },
 );
 
 watch(
@@ -350,7 +353,7 @@ watch(
         });
       }
     }
-  }
+  },
 );
 
 watch(
@@ -359,47 +362,47 @@ watch(
     if (drawingManagerInstance && value) {
       drawingManagerInstance.setOptions({ drawingControlOptions: value });
     }
-  }
+  },
 );
 watch(
   () => props.circleOptions,
   (value) => {
     if (drawingManagerInstance && value) {
       drawingManagerInstance.setOptions({ circleOptions: value });
     }
-  }
+  },
 );
 watch(
   () => props.markerOptions,
   (value) => {
     if (drawingManagerInstance && value) {
       drawingManagerInstance.setOptions({ markerOptions: value });
     }
-  }
+  },
 );
 watch(
   () => props.polygonOptions,
   (value) => {
     if (drawingManagerInstance && value) {
       drawingManagerInstance.setOptions({ polygonOptions: value });
     }
-  }
+  },
 );
 watch(
   () => props.polylineOptions,
   (value) => {
     if (drawingManagerInstance && value) {
       drawingManagerInstance.setOptions({ polylineOptions: value });
     }
-  }
+  },
 );
 watch(
   () => props.rectangleOptions,
   (value) => {
     if (drawingManagerInstance && value) {
       drawingManagerInstance.setOptions({ rectangleOptions: value });
     }
-  }
+  },
 );
 /*******************************************************************************
  * HOOKS
@@ -422,5 +425,6 @@ defineExpose({
   deleteSelection,
   clearAll,
   drawingManagerInstance,
+  drawingManagerPromise: promise,
 });
 </script>