@capacitor/google-maps - npm Package Compare versions

Comparing version 4.1.1-nightly-833f28d.0 to 4.2.0

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+# [4.2.0](https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/google-maps@4.1.0...@capacitor/google-maps@4.2.0) (2022-09-12)
+
+
+### Features
+
+* **google-maps:** Marker Customization Options ([#1146](https://github.com/ionic-team/capacitor-plugins/issues/1146)) ([bb77432](https://github.com/ionic-team/capacitor-plugins/commit/bb77432ac28ec5de5c5d2584f4f2ccf874e5c197))
+* **google-maps:** Marker Drag Listeners ([833f28d](https://github.com/ionic-team/capacitor-plugins/commit/833f28dc8e28553673c861619a2ac9540f39e33a))
+
+
+
+
+
 # [4.1.0](https://github.com/ionic-team/capacitor-plugins/compare/@capacitor/google-maps@1.1.0...@capacitor/google-maps@4.1.0) (2022-08-24)
@@ -8,0 +20,0 @@

dist/docs.json

@@ -721,4 +721,13 @@ {
           "name": "iconUrl",
-          "tags": [],
-          "docs": "Marker icon to render.",
+          "tags": [
+            {
+              "text": "```typescript\n{\n...\n iconUrl: 'assets/icon/pin.png',\n ...\n}\n```",
+              "name": "usage"
+            },
+            {
+              "text": "4.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Path to a marker icon to render, relative to the web app public directory.\n\n**SVGs are not supported on native platforms.**",
           "complexTypes": [],
@@ -728,2 +737,56 @@ "type": "string | undefined"
         {
+          "name": "iconSize",
+          "tags": [
+            {
+              "text": "4.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Controls the scaled size of the marker image set in `iconUrl`.",
+          "complexTypes": [
+            "Size"
+          ],
+          "type": "Size"
+        },
+        {
+          "name": "iconOrigin",
+          "tags": [
+            {
+              "text": "4.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image .",
+          "complexTypes": [
+            "Point"
+          ],
+          "type": "Point"
+        },
+        {
+          "name": "iconAnchor",
+          "tags": [
+            {
+              "text": "4.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "The position at which to anchor an image in correspondence to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.",
+          "complexTypes": [
+            "Point"
+          ],
+          "type": "Point"
+        },
+        {
+          "name": "tintColor",
+          "tags": [
+            {
+              "text": "4.2.0",
+              "name": "since"
+            }
+          ],
+          "docs": "Customizes the color of the default marker image.  Each value must be between 0 and 255.\n\nOnly for iOS and Android.",
+          "complexTypes": [],
+          "type": "{ r: number; g: number; b: number; a: number; } | undefined"
+        },
+        {
           "name": "draggable",
@@ -743,2 +806,48 @@ "tags": [
     {
+      "name": "Size",
+      "slug": "size",
+      "docs": "",
+      "tags": [],
+      "methods": [],
+      "properties": [
+        {
+          "name": "width",
+          "tags": [],
+          "docs": "",
+          "complexTypes": [],
+          "type": "number"
+        },
+        {
+          "name": "height",
+          "tags": [],
+          "docs": "",
+          "complexTypes": [],
+          "type": "number"
+        }
+      ]
+    },
+    {
+      "name": "Point",
+      "slug": "point",
+      "docs": "",
+      "tags": [],
+      "methods": [],
+      "properties": [
+        {
+          "name": "x",
+          "tags": [],
+          "docs": "",
+          "complexTypes": [],
+          "type": "number"
+        },
+        {
+          "name": "y",
+          "tags": [],
+          "docs": "",
+          "complexTypes": [],
+          "type": "number"
+        }
+      ]
+    },
+    {
       "name": "CameraConfig",
@@ -745,0 +854,0 @@ "slug": "cameraconfig",

dist/esm/web.js

@@ -146,10 +146,4 @@ import { WebPlugin } from '@capacitor/core';
         for (const markerArgs of _args.markers) {
-            const marker = new google.maps.Marker({
-                position: markerArgs.coordinate,
-                map: map.map,
-                opacity: markerArgs.opacity,
-                title: markerArgs.title,
-                icon: markerArgs.iconUrl,
-                draggable: markerArgs.draggable,
-            });
+            const markerOpts = this.buildMarkerOpts(markerArgs, map.map);
+            const marker = new google.maps.Marker(markerOpts);
             const id = '' + this.currMarkerId;
@@ -164,10 +158,5 @@ map.markers[id] = marker;
     async addMarker(_args) {
-        const marker = new google.maps.Marker({
-            position: _args.marker.coordinate,
-            map: this.maps[_args.id].map,
-            opacity: _args.marker.opacity,
-            title: _args.marker.title,
-            icon: _args.marker.iconUrl,
-            draggable: _args.marker.draggable,
-        });
+        const markerOpts = this.buildMarkerOpts(_args.marker, this.maps[_args.id].map);
+        console.log(markerOpts);
+        const marker = new google.maps.Marker(markerOpts);
         const id = '' + this.currMarkerId;
@@ -318,3 +307,28 @@ this.maps[_args.id].markers[id] = marker;
     }
+    buildMarkerOpts(marker, map) {
+        let iconImage = undefined;
+        if (marker.iconUrl) {
+            iconImage = {
+                url: marker.iconUrl,
+                scaledSize: marker.iconSize
+                    ? new google.maps.Size(marker.iconSize.width, marker.iconSize.height)
+                    : null,
+                anchor: marker.iconAnchor
+                    ? new google.maps.Point(marker.iconAnchor.x, marker.iconAnchor.y)
+                    : new google.maps.Point(0, 0),
+                origin: marker.iconOrigin
+                    ? new google.maps.Point(marker.iconOrigin.x, marker.iconOrigin.y)
+                    : new google.maps.Point(0, 0),
+            };
+        }
+        const opts = {
+            position: marker.coordinate,
+            map: map,
+            opacity: marker.opacity,
+            title: marker.title,
+            icon: iconImage,
+        };
+        return opts;
+    }
 }
 //# sourceMappingURL=web.js.map

dist/plugin.cjs.js

@@ -792,10 +792,4 @@ 'use strict';
         for (const markerArgs of _args.markers) {
-            const marker = new google.maps.Marker({
-                position: markerArgs.coordinate,
-                map: map.map,
-                opacity: markerArgs.opacity,
-                title: markerArgs.title,
-                icon: markerArgs.iconUrl,
-                draggable: markerArgs.draggable,
-            });
+            const markerOpts = this.buildMarkerOpts(markerArgs, map.map);
+            const marker = new google.maps.Marker(markerOpts);
             const id = '' + this.currMarkerId;
@@ -810,10 +804,5 @@ map.markers[id] = marker;
     async addMarker(_args) {
-        const marker = new google.maps.Marker({
-            position: _args.marker.coordinate,
-            map: this.maps[_args.id].map,
-            opacity: _args.marker.opacity,
-            title: _args.marker.title,
-            icon: _args.marker.iconUrl,
-            draggable: _args.marker.draggable,
-        });
+        const markerOpts = this.buildMarkerOpts(_args.marker, this.maps[_args.id].map);
+        console.log(markerOpts);
+        const marker = new google.maps.Marker(markerOpts);
         const id = '' + this.currMarkerId;
@@ -964,2 +953,27 @@ this.maps[_args.id].markers[id] = marker;
     }
+    buildMarkerOpts(marker, map) {
+        let iconImage = undefined;
+        if (marker.iconUrl) {
+            iconImage = {
+                url: marker.iconUrl,
+                scaledSize: marker.iconSize
+                    ? new google.maps.Size(marker.iconSize.width, marker.iconSize.height)
+                    : null,
+                anchor: marker.iconAnchor
+                    ? new google.maps.Point(marker.iconAnchor.x, marker.iconAnchor.y)
+                    : new google.maps.Point(0, 0),
+                origin: marker.iconOrigin
+                    ? new google.maps.Point(marker.iconOrigin.x, marker.iconOrigin.y)
+                    : new google.maps.Point(0, 0),
+            };
+        }
+        const opts = {
+            position: marker.coordinate,
+            map: map,
+            opacity: marker.opacity,
+            title: marker.title,
+            icon: iconImage,
+        };
+        return opts;
+    }
 }
@@ -966,0 +980,0 @@

dist/plugin.js

@@ -770,10 +770,4 @@ var capacitorCapacitorGoogleMaps = (function (exports, core, markerclusterer) {
             for (const markerArgs of _args.markers) {
-                const marker = new google.maps.Marker({
-                    position: markerArgs.coordinate,
-                    map: map.map,
-                    opacity: markerArgs.opacity,
-                    title: markerArgs.title,
-                    icon: markerArgs.iconUrl,
-                    draggable: markerArgs.draggable,
-                });
+                const markerOpts = this.buildMarkerOpts(markerArgs, map.map);
+                const marker = new google.maps.Marker(markerOpts);
                 const id = '' + this.currMarkerId;
@@ -788,10 +782,5 @@ map.markers[id] = marker;
         async addMarker(_args) {
-            const marker = new google.maps.Marker({
-                position: _args.marker.coordinate,
-                map: this.maps[_args.id].map,
-                opacity: _args.marker.opacity,
-                title: _args.marker.title,
-                icon: _args.marker.iconUrl,
-                draggable: _args.marker.draggable,
-            });
+            const markerOpts = this.buildMarkerOpts(_args.marker, this.maps[_args.id].map);
+            console.log(markerOpts);
+            const marker = new google.maps.Marker(markerOpts);
             const id = '' + this.currMarkerId;
@@ -942,2 +931,27 @@ this.maps[_args.id].markers[id] = marker;
         }
+        buildMarkerOpts(marker, map) {
+            let iconImage = undefined;
+            if (marker.iconUrl) {
+                iconImage = {
+                    url: marker.iconUrl,
+                    scaledSize: marker.iconSize
+                        ? new google.maps.Size(marker.iconSize.width, marker.iconSize.height)
+                        : null,
+                    anchor: marker.iconAnchor
+                        ? new google.maps.Point(marker.iconAnchor.x, marker.iconAnchor.y)
+                        : new google.maps.Point(0, 0),
+                    origin: marker.iconOrigin
+                        ? new google.maps.Point(marker.iconOrigin.x, marker.iconOrigin.y)
+                        : new google.maps.Point(0, 0),
+                };
+            }
+            const opts = {
+                position: marker.coordinate,
+                map: map,
+                opacity: marker.opacity,
+                title: marker.title,
+                icon: iconImage,
+            };
+            return opts;
+        }
     }
@@ -944,0 +958,0 @@

dist/typings/definitions.d.ts

@@ -22,2 +22,10 @@ /**
 }
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
 /**
@@ -159,6 +167,50 @@ *
     /**
-     * Marker icon to render.
+     * Path to a marker icon to render, relative to the web app public directory.
+     *
+     * **SVGs are not supported on native platforms.**
+     *
+     * @usage
+     * ```typescript
+     * {
+     * ...
+     *  iconUrl: 'assets/icon/pin.png',
+     *  ...
+     * }
+     * ```
+     *
+     * @since 4.2.0
      */
     iconUrl?: string;
     /**
+     * Controls the scaled size of the marker image set in `iconUrl`.
+     *
+     * @since 4.2.0
+     */
+    iconSize?: Size;
+    /**
+     * The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image .
+     *
+     * @since 4.2.0
+     */
+    iconOrigin?: Point;
+    /**
+     * The position at which to anchor an image in correspondence to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.
+     *
+     * @since 4.2.0
+     */
+    iconAnchor?: Point;
+    /**
+     * Customizes the color of the default marker image.  Each value must be between 0 and 255.
+     *
+     * Only for iOS and Android.
+     *
+     * @since 4.2.0
+     */
+    tintColor?: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    /**
      * Controls whether this marker can be dragged interactively
@@ -165,0 +217,0 @@ *

dist/typings/ts_old/definitions.d.ts

@@ -22,2 +22,10 @@ /**
 }
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
 /**
@@ -159,6 +167,50 @@ *
     /**
-     * Marker icon to render.
+     * Path to a marker icon to render, relative to the web app public directory.
+     *
+     * **SVGs are not supported on native platforms.**
+     *
+     * @usage
+     * ```typescript
+     * {
+     * ...
+     *  iconUrl: 'assets/icon/pin.png',
+     *  ...
+     * }
+     * ```
+     *
+     * @since 4.2.0
      */
     iconUrl?: string;
     /**
+     * Controls the scaled size of the marker image set in `iconUrl`.
+     *
+     * @since 4.2.0
+     */
+    iconSize?: Size;
+    /**
+     * The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image .
+     *
+     * @since 4.2.0
+     */
+    iconOrigin?: Point;
+    /**
+     * The position at which to anchor an image in correspondence to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.
+     *
+     * @since 4.2.0
+     */
+    iconAnchor?: Point;
+    /**
+     * Customizes the color of the default marker image.  Each value must be between 0 and 255.
+     *
+     * Only for iOS and Android.
+     *
+     * @since 4.2.0
+     */
+    tintColor?: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+    };
+    /**
      * Controls whether this marker can be dragged interactively
@@ -165,0 +217,0 @@ *

dist/typings/ts_old/web.d.ts

@@ -45,2 +45,3 @@ /// <reference types="google.maps" />
     setMapListeners(mapId: string): Promise<void>;
+    private buildMarkerOpts;
 }

dist/typings/web.d.ts

@@ -45,2 +45,3 @@ /// <reference types="google.maps" />
     setMapListeners(mapId: string): Promise<void>;
+    private buildMarkerOpts;
 }

package.json

 {
   "name": "@capacitor/google-maps",
-  "version": "4.1.1-nightly-833f28d.0",
+  "version": "4.2.0",
   "description": "Google maps on Capacitor",
@@ -100,3 +100,3 @@ "main": "dist/plugin.cjs.js",
   },
-  "gitHead": "833f28dc8e28553673c861619a2ac9540f39e33a"
+  "gitHead": "1bd77dcaf3894c798da78745599b66451ec618fc"
 }

README.md

@@ -719,13 +719,33 @@ # @capacitor/google-maps
 
-| Prop             | Type                                      | Description                                                                                               | Default            |
-| ---------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------ |
-| **`coordinate`** | <code><a href="#latlng">LatLng</a></code> | <a href="#marker">Marker</a> position                                                                     |                    |
-| **`opacity`**    | <code>number</code>                       | Sets the opacity of the marker, between 0 (completely transparent) and 1 inclusive.                       | <code>1</code>     |
-| **`title`**      | <code>string</code>                       | Title, a short description of the overlay.                                                                |                    |
-| **`snippet`**    | <code>string</code>                       | Snippet text, shown beneath the title in the info window when selected.                                   |                    |
-| **`isFlat`**     | <code>boolean</code>                      | Controls whether this marker should be flat against the Earth's surface or a billboard facing the camera. | <code>false</code> |
-| **`iconUrl`**    | <code>string</code>                       | <a href="#marker">Marker</a> icon to render.                                                              |                    |
-| **`draggable`**  | <code>boolean</code>                      | Controls whether this marker can be dragged interactively                                                 | <code>false</code> |
+| Prop             | Type                                                         | Description                                                                                                                                                                               | Default            | Since |
+| ---------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----- |
+| **`coordinate`** | <code><a href="#latlng">LatLng</a></code>                    | <a href="#marker">Marker</a> position                                                                                                                                                     |                    |       |
+| **`opacity`**    | <code>number</code>                                          | Sets the opacity of the marker, between 0 (completely transparent) and 1 inclusive.                                                                                                       | <code>1</code>     |       |
+| **`title`**      | <code>string</code>                                          | Title, a short description of the overlay.                                                                                                                                                |                    |       |
+| **`snippet`**    | <code>string</code>                                          | Snippet text, shown beneath the title in the info window when selected.                                                                                                                   |                    |       |
+| **`isFlat`**     | <code>boolean</code>                                         | Controls whether this marker should be flat against the Earth's surface or a billboard facing the camera.                                                                                 | <code>false</code> |       |
+| **`iconUrl`**    | <code>string</code>                                          | Path to a marker icon to render, relative to the web app public directory. **SVGs are not supported on native platforms.**                                                                |                    | 4.2.0 |
+| **`iconSize`**   | <code><a href="#size">Size</a></code>                        | Controls the scaled size of the marker image set in `iconUrl`.                                                                                                                            |                    | 4.2.0 |
+| **`iconOrigin`** | <code><a href="#point">Point</a></code>                      | The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image .                                                                |                    | 4.2.0 |
+| **`iconAnchor`** | <code><a href="#point">Point</a></code>                      | The position at which to anchor an image in correspondence to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image. |                    | 4.2.0 |
+| **`tintColor`**  | <code>{ r: number; g: number; b: number; a: number; }</code> | Customizes the color of the default marker image. Each value must be between 0 and 255. Only for iOS and Android.                                                                         |                    | 4.2.0 |
+| **`draggable`**  | <code>boolean</code>                                         | Controls whether this marker can be dragged interactively                                                                                                                                 | <code>false</code> |       |
 
 
+#### Size
+
+| Prop         | Type                |
+| ------------ | ------------------- |
+| **`width`**  | <code>number</code> |
+| **`height`** | <code>number</code> |
+
+
+#### Point
+
+| Prop    | Type                |
+| ------- | ------------------- |
+| **`x`** | <code>number</code> |
+| **`y`** | <code>number</code> |
+
+
 #### CameraConfig
@@ -732,0 +752,0 @@

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

525094

increased by4.49%

Number of package files

51

increased by2%

Lines of code

5566

increased by4.84%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

877

increased by2.33%

No dependency changes