shapes: Add support for polyline, polygon and circle

android/src/main/java/com/hemangkumar/capacitorgooglemaps/CustomMapView.java

@@ -582,4 +582,75 @@ private JSObject getResultForPoi(PointOfInterest pointOfInterest) {
         // return result
         return result;
     }
+
+    public void addPolyline(final PluginCall call) {
+        final JSArray points = call.getArray("points", new JSArray());
+
+        getBridge().executeOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                PolylineOptions polylineOptions = new PolylineOptions();
+
+                for (int i = 0; i < points.length(); i++) {
+                    try {
+                        JSONObject point = points.getJSONObject(i);
+                        LatLng latLng = new LatLng(point.getDouble("latitude"), point.getDouble("longitude"));
+                        polylineOptions.add(latLng);
+                    } catch (JSONException e) {
+                        e.printStackTrace();
+                    }
+                }
+
+                googleMap.addPolyline(polylineOptions);
+
+                call.resolve();
+            }
+        });
+    }
+
+    public void addPolygon(final PluginCall call) {
+        final JSArray points = call.getArray("points", new JSArray());
+
+        getBridge().executeOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                PolygonOptions polygonOptions = new PolygonOptions();
+
+                for (int i = 0; i < points.length(); i++) {
+                    try {
+                        JSONObject point = points.getJSONObject(i);
+                        LatLng latLng = new LatLng(point.getDouble("latitude"), point.getDouble("longitude"));
+                        polygonOptions.add(latLng);
+                    } catch (JSONException e) {
+                        e.printStackTrace();
+                    }
+                }
+
+                googleMap.addPolygon(polygonOptions);
+                call.resolve();
+            }
+        });
+    }
+
+    public void addCircle(final PluginCall call) {
+        final int radius = call.getInt("radius", 0);
+        final JSONObject center = call.getObject("center", new JSObject());
+
+        getBridge().executeOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                CircleOptions circleOptions = new CircleOptions();
+                circleOptions.radius(radius);
+                try {
+                    circleOptions.center(new LatLng(center.getDouble("latitude"), center.getDouble("longitude")));
+                } catch (JSONException e) {
+                    e.printStackTrace();
+                }
+
+                googleMap.addCircle(circleOptions);
+
+                call.resolve();
+            }
+        });
+    }
 }

ios/Plugin/Plugin.m

@@ -25,4 +25,7 @@
            CAP_PLUGIN_METHOD(didBeginMovingCamera, CAPPluginReturnCallback);
            CAP_PLUGIN_METHOD(didMoveCamera, CAPPluginReturnCallback);
            CAP_PLUGIN_METHOD(didEndMovingCamera, CAPPluginReturnCallback);
+           CAP_PLUGIN_METHOD(addPolyline, CAPPluginReturnPromise);
+           CAP_PLUGIN_METHOD(addPolygon, CAPPluginReturnPromise);
+           CAP_PLUGIN_METHOD(addCircle, CAPPluginReturnPromise);
 )

ios/Plugin/Plugin.swift

@@ -74,7 +74,7 @@ public class CapacitorGoogleMaps: CustomMapViewEvents {
             self.customWebView?.customMapViews[customMapView.id] = customMapView
         }
     }
-    
+
     @objc func updateMap(_ call: CAPPluginCall) {
         let mapId: String = call.getString("mapId", "")
 
@@ -83,17 +83,17 @@ public class CapacitorGoogleMaps: CustomMapViewEvents {
                 call.reject("map not found")
                 return
             }
-            
+
             let preferences = call.getObject("preferences", JSObject());
             customMapView.mapPreferences.updateFromJSObject(preferences);
-            
+
             let result = customMapView.invalidateMap()
-            
+
             call.resolve(result)
         }
 
     }
-    
+
     @objc func getMap(_ call: CAPPluginCall) {
         let mapId: String = call.getString("mapId", "")
 
@@ -102,9 +102,9 @@ public class CapacitorGoogleMaps: CustomMapViewEvents {
                 call.reject("map not found")
                 return
             }
-            
+
             let result = customMapView.getMap()
-            
+
             call.resolve(result)
         }
 
@@ -193,6 +193,83 @@ public class CapacitorGoogleMaps: CustomMapViewEvents {
         }
     }
 
+    @objc func addPolyline(_ call: CAPPluginCall) {
+
+        let points = call.getArray("points", JSObject())
+
+        DispatchQueue.main.async {
+
+            guard let customMapView = self.customWebView?.customMapViews[mapId] else {
+                call.reject("map not found")
+                return
+            }
+
+            let path = GMSMutablePath()
+
+            for point in points ?? [] {
+                let coords = CLLocationCoordinate2D(latitude: point["latitude"] as! CLLocationDegrees, longitude: point["longitude"] as! CLLocationDegrees)
+                path.add(coords)
+            }
+
+            let polyline = GMSPolyline(path: path)
+
+            polyline.map = customMapView.GMapView
+            call.resolve()
+        }
+    }
+
+    @objc func addPolygon(_ call: CAPPluginCall) {
+
+        let points = call.getArray("points", JSObject())
+
+        DispatchQueue.main.async {
+
+            guard let customMapView = self.customWebView?.customMapViews[mapId] else {
+                call.reject("map not found")
+                return
+            }
+
+            let path = GMSMutablePath()
+
+            for point in points ?? [] {
+                let coords = CLLocationCoordinate2D(
+                    latitude: point["latitude"] as! CLLocationDegrees,
+                    longitude: point["longitude"] as! CLLocationDegrees
+                )
+                path.add(coords)
+            }
+
+            let polygon = GMSPolygon(path: path)
+            polygon.map = customMapView.GMapView
+
+            call.resolve()
+        }
+    }
+
+    @objc func addCircle(_ call: CAPPluginCall) {
+        let radius = call.getDouble("radius") ?? 0.0
+
+        let center = call.getObject("center")
+
+        let coordinates = CLLocationCoordinate2D(
+            latitude: center?["latitude"] as! CLLocationDegrees,
+            longitude: center?["longitude"] as! CLLocationDegrees
+        )
+
+        DispatchQueue.main.async {
+            guard let customMapView = self.customWebView?.customMapViews[mapId] else {
+                call.reject("map not found")
+                return
+            }
+
+            let circleCenter = coordinates
+            let circle = GMSCircle(position: circleCenter, radius: radius)
+            circle.map = customMapView.GMapView
+
+            call.resolve()
+        }
+    }
+
     @objc func didTapInfoWindow(_ call: CAPPluginCall) {
         setCallbackIdForEvent(call: call, eventName: CustomMapView.EVENT_DID_TAP_INFO_WINDOW);
     }
@@ -208,43 +285,43 @@ public class CapacitorGoogleMaps: CustomMapViewEvents {
     @objc func didLongPressMap(_ call: CAPPluginCall) {
         setCallbackIdForEvent(call: call, eventName: CustomMapView.EVENT_DID_LONG_PRESS_MAP);
     }
-    
+
     @objc func didTapMarker(_ call: CAPPluginCall) {
         setCallbackIdForEvent(call: call, eventName: CustomMapView.EVENT_DID_TAP_MARKER);
     }
-    
+
     @objc func didBeginDraggingMarker(_ call: CAPPluginCall) {
         setCallbackIdForEvent(call: call, eventName: CustomMapView.EVENT_DID_BEGIN_DRAGGING_MARKER);
     }
-    
+
     @objc func didDragMarker(_ call: CAPPluginCall) {
         setCallbackIdForEvent(call: call, eventName: CustomMapView.EVENT_DID_DRAG_MARKER);
     }
-    
+
     @objc func didEndDraggingMarker(_ call: CAPPluginCall) {
         setCallbackIdForEvent(call: call, eventName: CustomMapView.EVENT_DID_END_DRAGGING_MARKER);
     }
-    
+
     @objc func didTapMyLocationButton(_ call: CAPPluginCall) {
         setCallbackIdForEvent(call: call, eventName: CustomMapView.EVENT_DID_TAP_MY_LOCATION_BUTTON);
     }
 
     @objc func didTapMyLocationDot(_ call: CAPPluginCall) {
         setCallbackIdForEvent(call: call, eventName: CustomMapView.EVENT_DID_TAP_MY_LOCATION_DOT);
     }
-    
+
     @objc func didTapPoi(_ call: CAPPluginCall) {
         setCallbackIdForEvent(call: call, eventName: CustomMapView.EVENT_DID_TAP_POI);
     }
-    
+
     @objc func didBeginMovingCamera(_ call: CAPPluginCall) {
         setCallbackIdForEvent(call: call, eventName: CustomMapView.EVENT_DID_BEGIN_MOVING_CAMERA);
     }
-    
+
     @objc func didMoveCamera(_ call: CAPPluginCall) {
         setCallbackIdForEvent(call: call, eventName: CustomMapView.EVENT_DID_MOVE_CAMERA);
     }
-    
+
     @objc func didEndMovingCamera(_ call: CAPPluginCall) {
         setCallbackIdForEvent(call: call, eventName: CustomMapView.EVENT_DID_END_MOVING_CAMERA);
     }

src/definitions.ts

@@ -14,6 +14,9 @@ import {
   AddMarkerOptions,
   AddMarkerResult,
   RemoveMarkerOptions,
+  CircleOptions,
+  PolygonOptions,
+  PolylineOptions,
   // events
   DidTapInfoWindowCallback,
   DidCloseInfoWindowCallback,
@@ -67,6 +70,12 @@ export interface CapacitorGoogleMapsPlugin {
 
   removeMarker(options: RemoveMarkerOptions): Promise<void>;
 
+  addPolyline(options: PolylineOptions): Promise<void>;
+
+  addCircle(options: CircleOptions): Promise<void>;
+
+  addPolygon(options: PolygonOptions): Promise<void>;
+
   didTapInfoWindow(
     options: DefaultEventOptions,
     callback: DidTapInfoWindowCallback

src/interfaces/index.ts

@@ -38,3 +38,6 @@ export { MapPreferences } from "./models/GoogleMap/Preferences";
 export { PointOfInterest } from "./models/GoogleMap/PointOfInterest";
 export { BoundingRect } from "./models/BoundingRect";
 export { LatLng } from "./models/LatLng";
+export { PolygonOptions } from "./models/GoogleMap/Shapes/Polygon";
+export { PolylineOptions } from "./models/GoogleMap/Shapes/Polyline";
+export { CircleOptions } from "./models/GoogleMap/Shapes/Circle";

src/interfaces/models/GoogleMap/Shapes/Circle.ts

@@ -0,0 +1,12 @@
+import { LatLng } from '../../../../definitions';
+
+export interface CircleOptions {
+    mapId: string;
+    center: LatLng;
+    radius: number;
+    strokeColor?: string;
+    fillColor?: string;
+    strokeWidth?: number;
+    zIndex?: number;
+    visibility?: boolean;
+}

src/interfaces/models/GoogleMap/Shapes/Polygon.ts

@@ -0,0 +1,12 @@
+import { LatLng } from '../../../../definitions';
+
+export interface PolygonOptions {
+    mapId: string;
+    points: LatLng[];
+    tag?: any;
+    strokeColor?: string;
+    fillColor?: string;
+    strokeWidth?: number;
+    zIndex?: number;
+    visibility?: boolean;
+}

src/interfaces/models/GoogleMap/Shapes/Polyline.ts

@@ -0,0 +1,11 @@
+import { LatLng } from '../../../../definitions';
+
+export interface PolylineOptions {
+    mapId: string;
+    points: LatLng[];
+    tag?: any;
+    color?: string;
+    width?: number;
+    zIndex?: number;
+    visibility?: boolean;
+}