Minor API Change

docs/api.md

@@ -18,11 +18,12 @@ initialize(options: InitializeOptions) => Promise<void>
 ### createMap(...)
 
 ```typescript
-createMap(options: CreateMapOptions) => Promise<CreateMapResult>
+createMap(element: HTMLElement, options: CreateMapOptions = {}) => Promise<CreateMapResult>
 ```
 
 | Param         | Type                                               |
 | ------------- | -------------------------------------------------- |
+| **`element`** | <code>[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)</code> |
 | **`options`** | <code>[CreateMapOptions](#createmapoptions)</code> |
 
 **Returns:** <code>Promise&lt;[CreateMapResult](#createmapresult)&gt;</code>

docs/getting-started/quickstart.md

@@ -65,19 +65,9 @@ const initializeMap = async () => {
   // then get the element you want to attach the Maps instance to:
   const element = document.getElementById("container");
 
-  // afterwards get its boundaries like so:
-  const boundingRect = element.getBoundingClientRect();
-
   // we can now create the map using the boundaries of #container
   try {
-    const result = await CapacitorGoogleMaps.createMap({
-      boundingRect: {
-        width: Math.round(boundingRect.width),
-        height: Math.round(boundingRect.height),
-        x: Math.round(boundingRect.x),
-        y: Math.round(boundingRect.y),
-      },
-    });
+    const result = await CapacitorGoogleMaps.createMap(element);
 
     // remove background, so map can be seen
     // (you can read more about this in the "Setting up the WebView" guide)

src/definitions.ts

@@ -150,7 +150,7 @@ export interface CapacitorGoogleMapsPlugin {
   addListener(
     eventName: "didRequestElementFromPoint",
     listenerFunc: (result: DidRequestElementFromPointResult) => void
-  ): PluginListenerHandle;
+  ): Promise<PluginListenerHandle>;
 }
 
 export * from "./interfaces";

src/index.ts

@@ -1,17 +1,201 @@
-import { registerPlugin } from "@capacitor/core";
+import { PluginListenerHandle, registerPlugin } from "@capacitor/core";
 import {
   CapacitorGoogleMapsPlugin,
+  CallbackID,
+  InitializeOptions,
+  CreateMapOptions,
+  CreateMapResult,
+  UpdateMapOptions,
+  UpdateMapResult,
+  RemoveMapOptions,
+  ClearMapOptions,
+  MoveCameraOptions,
   ElementFromPointResultOptions,
+  AddMarkerOptions,
+  AddMarkerResult,
+  RemoveMarkerOptions,
+  DidTapInfoWindowCallback,
+  DidCloseInfoWindowCallback,
+  DidTapMapCallback,
+  DidLongPressMapCallback,
+  DidTapMarkerCallback,
+  DidBeginDraggingMarkerCallback,
+  DidDragMarkerCallback,
+  DidEndDraggingMarkerCallback,
+  DidTapMyLocationButtonCallback,
+  DidTapMyLocationDotCallback,
+  DidTapPoiCallback,
+  DidBeginMovingCameraCallback,
+  DidMoveCameraCallback,
+  DidEndMovingCameraCallback,
+  DefaultEventOptions,
+  DefaultEventWithPreventDefaultOptions,
+  DidRequestElementFromPointResult,
 } from "./definitions";
 
-const CapacitorGoogleMaps = registerPlugin<CapacitorGoogleMapsPlugin>(
+const CapacitorGoogleMapsPluginInstance = registerPlugin<CapacitorGoogleMapsPlugin>(
   "CapacitorGoogleMaps",
   {
     web: () => import("./web").then((m) => new m.CapacitorGoogleMapsWeb()),
   }
 );
 
-CapacitorGoogleMaps.addListener("didRequestElementFromPoint", (data) => {
+export class CapacitorGoogleMaps  {
+  private constructor() {}
+
+  public static async initialize(_options: InitializeOptions): Promise<void> {
+    return CapacitorGoogleMapsPluginInstance.initialize(_options);
+  }
+
+  public static async addListener(eventName: "didRequestElementFromPoint", listenerFunc: (result: DidRequestElementFromPointResult) => void): Promise<PluginListenerHandle> {
+    return CapacitorGoogleMapsPluginInstance.addListener(eventName, listenerFunc);
+  }
+
+  public static async createMap(element: HTMLElement, _options: CreateMapOptions = {}): Promise<CreateMapResult> {
+    if (element && !_options.boundingRect) {
+      // get boundaries of element
+      const boundingRect = element.getBoundingClientRect();
+      _options.boundingRect = {
+        width: Math.round(boundingRect.width),
+        height: Math.round(boundingRect.height),
+        x: Math.round(boundingRect.x),
+        y: Math.round(boundingRect.y),
+      }
+    }
+    return CapacitorGoogleMapsPluginInstance.createMap(_options);
+  }
+
+  public static async removeMap(_options: RemoveMapOptions): Promise<void> {
+    return CapacitorGoogleMapsPluginInstance.removeMap(_options);
+  }
+
+  public static async clearMap(_options: ClearMapOptions): Promise<void> {
+    return CapacitorGoogleMapsPluginInstance.clearMap(_options);
+  }
+
+  public static async updateMap(_options: UpdateMapOptions): Promise<UpdateMapResult> {
+    return CapacitorGoogleMapsPluginInstance.updateMap(_options);
+  }
+
+  public static async moveCamera(_options: MoveCameraOptions): Promise<void> {
+    return CapacitorGoogleMapsPluginInstance.moveCamera(_options);
+  }
+
+  public static async addMarker(_options: AddMarkerOptions): Promise<AddMarkerResult> {
+    return CapacitorGoogleMapsPluginInstance.addMarker(_options);
+  }
+
+  public static async removeMarker(_options: RemoveMarkerOptions): Promise<void> {
+    return CapacitorGoogleMapsPluginInstance.removeMarker(_options);
+  }
+
+  public static async didTapInfoWindow(
+    _options: DefaultEventOptions,
+    _callback: DidTapInfoWindowCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didTapInfoWindow(_options, _callback);
+  }
+
+  public static async didCloseInfoWindow(
+    _options: DefaultEventOptions,
+    _callback: DidCloseInfoWindowCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didCloseInfoWindow(_options, _callback);
+  }
+
+  public static async didTapMap(
+    _options: DefaultEventOptions,
+    _callback: DidTapMapCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didTapMap(_options, _callback);
+  }
+
+  public static async didLongPressMap(
+    _options: DefaultEventOptions,
+    _callback: DidLongPressMapCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didLongPressMap(_options, _callback);
+  }
+
+  public static async didTapMarker(
+    _options: DefaultEventWithPreventDefaultOptions,
+    _callback: DidTapMarkerCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didTapMarker(_options, _callback);
+  }
+
+  public static async didBeginDraggingMarker(
+    _options: DefaultEventOptions,
+    _callback: DidBeginDraggingMarkerCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didBeginDraggingMarker(_options, _callback);
+  }
+
+  public static async didDragMarker(
+    _options: DefaultEventOptions,
+    _callback: DidDragMarkerCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didDragMarker(_options, _callback);
+  }
+
+  public static async didEndDraggingMarker(
+    _options: DefaultEventOptions,
+    _callback: DidEndDraggingMarkerCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didEndDraggingMarker(_options, _callback);
+  }
+
+  public static async didTapMyLocationButton(
+    _options: DefaultEventWithPreventDefaultOptions,
+    _callback: DidTapMyLocationButtonCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didTapMyLocationButton(_options, _callback);
+  }
+
+  public static async didTapMyLocationDot(
+    _options: DefaultEventWithPreventDefaultOptions,
+    _callback: DidTapMyLocationDotCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didTapMyLocationDot(_options, _callback);
+  }
+
+  public static async didTapPoi(
+    _options: DefaultEventOptions,
+    _callback: DidTapPoiCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didTapPoi(_options, _callback);
+  }
+
+  public static async didBeginMovingCamera(
+    _options: DefaultEventOptions,
+    _callback: DidBeginMovingCameraCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didBeginMovingCamera(_options, _callback);
+  }
+
+  public static async didMoveCamera(
+    _options: DefaultEventOptions,
+    _callback: DidMoveCameraCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didMoveCamera(_options, _callback);
+  }
+
+  public static async didEndMovingCamera(
+    _options: DefaultEventOptions,
+    _callback: DidEndMovingCameraCallback
+  ): Promise<CallbackID> {
+    return CapacitorGoogleMapsPluginInstance.didEndMovingCamera(_options, _callback);
+  }
+
+  public static async elementFromPointResult(
+    _options: ElementFromPointResultOptions
+  ): Promise<void> {
+    return CapacitorGoogleMapsPluginInstance.elementFromPointResult(_options);
+  }
+}
+
+
+CapacitorGoogleMapsPluginInstance.addListener("didRequestElementFromPoint", (data) => {
   const object: ElementFromPointResultOptions = {
     eventChainId: data?.eventChainId,
     mapId: null,
@@ -33,8 +217,7 @@ CapacitorGoogleMaps.addListener("didRequestElementFromPoint", (data) => {
     }
   }
 
-  CapacitorGoogleMaps.elementFromPointResult(object);
+  CapacitorGoogleMapsPluginInstance.elementFromPointResult(object);
 });
 
-export * from "./definitions";
-export { CapacitorGoogleMaps };
+export * from "./definitions";

src/interfaces/methods/CreateMap.ts

@@ -17,7 +17,7 @@ export interface CreateMapOptions {
   /**
    * @since 2.0.0
    */
-  cameraPosition: CameraPosition;
+  cameraPosition?: CameraPosition;
   /**
    * @since 2.0.0
    */