feat: add polygon holes support

android/src/main/java/com/rngooglemapsplus/GoogleMapsViewImpl.kt

@@ -35,9 +35,11 @@ import com.google.android.gms.maps.model.TileOverlayOptions
 import com.google.maps.android.data.kml.KmlLayer
 import com.margelo.nitro.core.Promise
 import com.rngooglemapsplus.extensions.toGooglePriority
+import com.rngooglemapsplus.extensions.toLatLng
 import com.rngooglemapsplus.extensions.toLocationErrorCode
 import com.rngooglemapsplus.extensions.toRNIndoorBuilding
 import com.rngooglemapsplus.extensions.toRNIndoorLevel
+import com.rngooglemapsplus.extensions.toRnLatLng
 import java.io.ByteArrayInputStream
 import java.io.ByteArrayOutputStream
 import java.io.File
@@ -88,11 +90,7 @@ class GoogleMapsViewImpl(
     reactContext.addLifecycleEventListener(this)
   }
 
-  fun initMapView(
-    mapId: String?,
-    liteMode: Boolean?,
-    cameraPosition: CameraPosition?,
-  ) {
+  fun initMapView(googleMapsOptions: GoogleMapOptions) {
     if (initialized) return
     initialized = true
     val result = playServiceHandler.playServicesAvailability()
@@ -126,13 +124,7 @@ class GoogleMapsViewImpl(
     mapView =
       MapView(
         reactContext,
-        GoogleMapOptions().apply {
-          mapId?.let { mapId(it) }
-          liteMode?.let { liteMode(it) }
-          cameraPosition?.let {
-            camera(it)
-          }
-        },
+        googleMapsOptions,
       )
 
     super.addView(mapView)
@@ -173,12 +165,12 @@ class GoogleMapsViewImpl(
 
     onCameraChangeStart?.invoke(
       RNRegion(
-        center = RNLatLng(bounds.center.latitude, bounds.center.longitude),
+        center = bounds.center.toRnLatLng(),
         latitudeDelta = latDelta,
         longitudeDelta = lngDelta,
       ),
       RNCamera(
-        center = RNLatLng(cameraPosition.target.latitude, cameraPosition.target.longitude),
+        center = cameraPosition.target.toRnLatLng(),
         zoom = cameraPosition.zoom.toDouble(),
         bearing = cameraPosition.bearing.toDouble(),
         tilt = cameraPosition.tilt.toDouble(),
@@ -205,12 +197,12 @@ class GoogleMapsViewImpl(
 
     onCameraChange?.invoke(
       RNRegion(
-        center = RNLatLng(bounds.center.latitude, bounds.center.longitude),
+        center = bounds.center.toRnLatLng(),
         latitudeDelta = latDelta,
         longitudeDelta = lngDelta,
       ),
       RNCamera(
-        center = RNLatLng(cameraPosition.target.latitude, cameraPosition.target.longitude),
+        center = cameraPosition.target.toRnLatLng(),
         zoom = cameraPosition.zoom.toDouble(),
         bearing = cameraPosition.bearing.toDouble(),
         tilt = cameraPosition.tilt.toDouble(),
@@ -233,12 +225,12 @@ class GoogleMapsViewImpl(
 
     onCameraChangeComplete?.invoke(
       RNRegion(
-        center = RNLatLng(bounds.center.latitude, bounds.center.longitude),
+        center = bounds.center.toRnLatLng(),
         latitudeDelta = latDelta,
         longitudeDelta = lngDelta,
       ),
       RNCamera(
-        center = RNLatLng(cameraPosition.target.latitude, cameraPosition.target.longitude),
+        center = cameraPosition.target.toRnLatLng(),
         zoom = cameraPosition.zoom.toDouble(),
         bearing = cameraPosition.bearing.toDouble(),
         tilt = cameraPosition.tilt.toDouble(),
@@ -544,7 +536,7 @@ class GoogleMapsViewImpl(
     onUi {
       val builder = LatLngBounds.Builder()
       coordinates.forEach { coord ->
-        builder.include(LatLng(coord.latitude, coord.longitude))
+        builder.include(coord.toLatLng())
       }
       val bounds = builder.build()
 
@@ -1069,28 +1061,28 @@ class GoogleMapsViewImpl(
 
   override fun onMapClick(coordinates: LatLng) {
     onMapPress?.invoke(
-      RNLatLng(coordinates.latitude, coordinates.longitude),
+      coordinates.toRnLatLng(),
     )
   }
 
   override fun onMarkerDragStart(marker: Marker) {
     onMarkerDragStart?.invoke(
       marker.tag?.toString(),
-      RNLatLng(marker.position.latitude, marker.position.longitude),
+      marker.position.toRnLatLng(),
     )
   }
 
   override fun onMarkerDrag(marker: Marker) {
     onMarkerDrag?.invoke(
       marker.tag?.toString(),
-      RNLatLng(marker.position.latitude, marker.position.longitude),
+      marker.position.toRnLatLng(),
     )
   }
 
   override fun onMarkerDragEnd(marker: Marker) {
     onMarkerDragEnd?.invoke(
       marker.tag?.toString(),
-      RNLatLng(marker.position.latitude, marker.position.longitude),
+      marker.position.toRnLatLng(),
     )
   }
 

android/src/main/java/com/rngooglemapsplus/MapCircleBuilder.kt

@@ -4,13 +4,13 @@ import android.graphics.Color
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.google.android.gms.maps.model.Circle
 import com.google.android.gms.maps.model.CircleOptions
-import com.google.android.gms.maps.model.LatLng
 import com.rngooglemapsplus.extensions.toColor
+import com.rngooglemapsplus.extensions.toLatLng
 
 class MapCircleBuilder {
   fun build(circle: RNCircle): CircleOptions =
     CircleOptions().apply {
-      center(LatLng(circle.center.latitude, circle.center.longitude))
+      center(circle.center.toLatLng())
       radius(circle.radius)
       circle.strokeWidth?.let { strokeWidth(it.dpToPx()) }
       circle.strokeColor?.let { strokeColor(it.toColor()) }
@@ -23,11 +23,12 @@ class MapCircleBuilder {
     circle: Circle,
     next: RNCircle,
   ) {
-    circle.center = LatLng(next.center.latitude, next.center.longitude)
+    circle.center = next.center.toLatLng()
     circle.radius = next.radius
     circle.strokeWidth = next.strokeWidth?.dpToPx() ?: 1f
     circle.strokeColor = next.strokeColor?.toColor() ?: Color.BLACK
     circle.fillColor = next.fillColor?.toColor() ?: Color.TRANSPARENT
+    circle.isClickable = next.pressable ?: false
     circle.zIndex = next.zIndex?.toFloat() ?: 0f
   }
 }

android/src/main/java/com/rngooglemapsplus/MapMarkerBuilder.kt

@@ -8,11 +8,11 @@ import com.caverock.androidsvg.SVG
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.google.android.gms.maps.model.BitmapDescriptor
 import com.google.android.gms.maps.model.BitmapDescriptorFactory
-import com.google.android.gms.maps.model.LatLng
 import com.google.android.gms.maps.model.Marker
 import com.google.android.gms.maps.model.MarkerOptions
 import com.rngooglemapsplus.extensions.markerStyleEquals
 import com.rngooglemapsplus.extensions.styleHash
+import com.rngooglemapsplus.extensions.toLatLng
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.Job
@@ -40,13 +40,15 @@ class MapMarkerBuilder(
     icon: BitmapDescriptor?,
   ): MarkerOptions =
     MarkerOptions().apply {
-      position(LatLng(m.coordinate.latitude, m.coordinate.longitude))
+      position(m.coordinate.toLatLng())
       icon(icon)
       m.title?.let { title(it) }
       m.snippet?.let { snippet(it) }
       m.opacity?.let { alpha(it.toFloat()) }
       m.flat?.let { flat(it) }
       m.draggable?.let { draggable(it) }
+      m.rotation?.let { rotation(it.toFloat()) }
+      m.infoWindowAnchor?.let { infoWindowAnchor(it.x.toFloat(), it.y.toFloat()) }
       m.anchor?.let { anchor((m.anchor.x).toFloat(), (m.anchor.y).toFloat()) }
       m.zIndex?.let { zIndex(it.toFloat()) }
     }
@@ -57,10 +59,7 @@ class MapMarkerBuilder(
     next: RNMarker,
   ) {
     marker.position =
-      LatLng(
-        next.coordinate.latitude,
-        next.coordinate.longitude,
-      )
+      next.coordinate.toLatLng()
 
     if (!prev.markerStyleEquals(next)) {
       buildIconAsync(marker.id, next) { icon ->
@@ -72,6 +71,11 @@ class MapMarkerBuilder(
     marker.alpha = next.opacity?.toFloat() ?: 0f
     marker.isFlat = next.flat ?: false
     marker.isDraggable = next.draggable ?: false
+    marker.rotation = next.rotation?.toFloat() ?: 0f
+    marker.setInfoWindowAnchor(
+      (next.infoWindowAnchor?.x ?: 0.5).toFloat(),
+      (next.infoWindowAnchor?.y ?: 0).toFloat(),
+    )
     marker.setAnchor(
       (next.anchor?.x ?: 0.5).toFloat(),
       (next.anchor?.y ?: 1.0).toFloat(),

android/src/main/java/com/rngooglemapsplus/MapPolygonBuilder.kt

@@ -2,38 +2,46 @@ package com.rngooglemapsplus
 
 import android.graphics.Color
 import com.facebook.react.uimanager.PixelUtil.dpToPx
-import com.google.android.gms.maps.model.LatLng
 import com.google.android.gms.maps.model.Polygon
 import com.google.android.gms.maps.model.PolygonOptions
 import com.rngooglemapsplus.extensions.toColor
+import com.rngooglemapsplus.extensions.toLatLng
 
 class MapPolygonBuilder {
   fun build(poly: RNPolygon): PolygonOptions =
     PolygonOptions().apply {
       poly.coordinates.forEach { pt ->
         add(
-          com.google.android.gms.maps.model
-            .LatLng(pt.latitude, pt.longitude),
+          pt.toLatLng(),
         )
       }
       poly.fillColor?.let { fillColor(it.toColor()) }
       poly.strokeColor?.let { strokeColor(it.toColor()) }
       poly.strokeWidth?.let { strokeWidth(it.dpToPx()) }
       poly.pressable?.let { clickable(it) }
+      poly.geodesic?.let { geodesic(it) }
+      poly.holes?.forEach { hole ->
+        addHole(hole.coordinates.map { it.toLatLng() })
+      }
       poly.zIndex?.let { zIndex(it.toFloat()) }
     }
 
   fun update(
-    gmsPoly: Polygon,
+    poly: Polygon,
     next: RNPolygon,
   ) {
-    gmsPoly.points =
+    poly.points =
       next.coordinates.map {
-        LatLng(it.latitude, it.longitude)
+        it.toLatLng()
       }
-    gmsPoly.fillColor = next.fillColor?.toColor() ?: Color.TRANSPARENT
-    gmsPoly.strokeColor = next.strokeColor?.toColor() ?: Color.BLACK
-    gmsPoly.strokeWidth = next.strokeWidth?.dpToPx() ?: 1f
-    gmsPoly.zIndex = next.zIndex?.toFloat() ?: 0f
+    poly.fillColor = next.fillColor?.toColor() ?: Color.TRANSPARENT
+    poly.strokeColor = next.strokeColor?.toColor() ?: Color.BLACK
+    poly.strokeWidth = next.strokeWidth?.dpToPx() ?: 1f
+    poly.isClickable = next.pressable ?: false
+    poly.isGeodesic = next.geodesic ?: false
+    poly.holes = next.holes?.map { hole ->
+      hole.coordinates.map { it.toLatLng() }
+    } ?: emptyList()
+    poly.zIndex = next.zIndex?.toFloat() ?: 0f
   }
 }

android/src/main/java/com/rngooglemapsplus/MapPolylineBuilder.kt.kt

@@ -5,18 +5,18 @@ import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.google.android.gms.maps.model.ButtCap
 import com.google.android.gms.maps.model.Cap
 import com.google.android.gms.maps.model.JointType
-import com.google.android.gms.maps.model.LatLng
 import com.google.android.gms.maps.model.Polyline
 import com.google.android.gms.maps.model.PolylineOptions
 import com.google.android.gms.maps.model.RoundCap
 import com.google.android.gms.maps.model.SquareCap
 import com.rngooglemapsplus.extensions.toColor
+import com.rngooglemapsplus.extensions.toLatLng
 
 class MapPolylineBuilder {
   fun build(pl: RNPolyline): PolylineOptions =
     PolylineOptions().apply {
       pl.coordinates.forEach { pt ->
-        add(LatLng(pt.latitude, pt.longitude))
+        add(pt.toLatLng())
       }
       pl.width?.let { width(it.dpToPx()) }
       pl.lineCap?.let {
@@ -25,6 +25,7 @@ class MapPolylineBuilder {
       }
       pl.lineJoin?.let { jointType(mapLineJoin(it)) }
       pl.color?.let { color(it.toColor()) }
+      pl.geodesic?.let { geodesic(it) }
       pl.pressable?.let { clickable(it) }
       pl.zIndex?.let { zIndex(it.toFloat()) }
     }
@@ -33,14 +34,15 @@ class MapPolylineBuilder {
     polyline: Polyline,
     next: RNPolyline,
   ) {
-    polyline.points = next.coordinates.map { LatLng(it.latitude, it.longitude) }
-
+    polyline.points = next.coordinates.map { it.toLatLng() }
     polyline.width = next.width?.dpToPx() ?: 1f
     val cap = mapLineCap(next.lineCap ?: RNLineCapType.BUTT)
     polyline.startCap = cap
     polyline.endCap = cap
     polyline.jointType = mapLineJoin(next.lineJoin ?: RNLineJoinType.MITER)
     polyline.color = next.color?.toColor() ?: Color.BLACK
+    polyline.isClickable = next.pressable ?: false
+    polyline.isGeodesic = next.geodesic ?: false
     polyline.zIndex = next.zIndex?.toFloat() ?: 0f
   }
 

android/src/main/java/com/rngooglemapsplus/RNGoogleMapsPlusView.kt

@@ -3,6 +3,7 @@ package com.rngooglemapsplus
 import com.facebook.proguard.annotations.DoNotStrip
 import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.uimanager.ThemedReactContext
+import com.google.android.gms.maps.GoogleMapOptions
 import com.google.android.gms.maps.model.MapStyleOptions
 import com.margelo.nitro.core.Promise
 import com.rngooglemapsplus.extensions.circleEquals
@@ -40,11 +41,13 @@ class RNGoogleMapsPlusView(
     super.afterUpdate()
     if (!propsInitialized) {
       propsInitialized = true
-      view.initMapView(
-        initialProps?.mapId,
-        initialProps?.liteMode,
-        initialProps?.camera?.toCameraPosition(),
-      )
+      val options =
+        GoogleMapOptions().apply {
+          initialProps?.mapId?.let { mapId(it) }
+          initialProps?.liteMode?.let { liteMode(it) }
+          initialProps?.camera?.let { camera(it.toCameraPosition()) }
+        }
+      view.initMapView(options)
     }
   }
 

android/src/main/java/com/rngooglemapsplus/extensions/LatLngExtension.kt

@@ -0,0 +1,6 @@
+package com.rngooglemapsplus.extensions
+
+import com.google.android.gms.maps.model.LatLng
+import com.rngooglemapsplus.RNLatLng
+
+fun LatLng.toRnLatLng(): RNLatLng = RNLatLng(latitude, longitude)

android/src/main/java/com/rngooglemapsplus/extensions/RNCameraExtension.kt

@@ -1,14 +1,13 @@
 package com.rngooglemapsplus.extensions
 
 import com.google.android.gms.maps.model.CameraPosition
-import com.google.android.gms.maps.model.LatLng
 import com.rngooglemapsplus.RNCamera
 
 fun RNCamera.toCameraPosition(): CameraPosition {
   val builder = CameraPosition.builder()
 
   center?.let {
-    builder.target(LatLng(it.latitude, it.longitude))
+    builder.target(it.toLatLng())
   }
 
   zoom?.let { builder.zoom(it.toFloat()) }

android/src/main/java/com/rngooglemapsplus/extensions/RNLatLngExtension.kt

@@ -0,0 +1,6 @@
+package com.rngooglemapsplus.extensions
+
+import com.google.android.gms.maps.model.LatLng
+import com.rngooglemapsplus.RNLatLng
+
+fun RNLatLng.toLatLng(): LatLng = LatLng(latitude, longitude)

example/src/screens/PolygonsScreen.tsx

@@ -1,11 +1,11 @@
 import React, { useRef } from 'react';
 import MapWrapper from '../components/MapWrapper';
-import { makePolygon } from '../utils/mapGenerators';
+import { makePolygon, makePolygonWithHoles } from '../utils/mapGenerators';
 import type { GoogleMapsViewRef } from 'react-native-google-maps-plus';
 
 export default function PolygonsScreen() {
   const mapRef = useRef<GoogleMapsViewRef | null>(null);
 
-  const polygons = [makePolygon(1)];
+  const polygons = [makePolygon(1), makePolygonWithHoles(2)];
   return <MapWrapper mapRef={mapRef} polygons={polygons} />;
 }