Feat/marker drag

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

@@ -47,6 +47,7 @@ class GoogleMapsViewImpl(
   GoogleMap.OnPolylineClickListener,
   GoogleMap.OnPolygonClickListener,
   GoogleMap.OnCircleClickListener,
+  GoogleMap.OnMarkerDragListener,
   LifecycleEventListener {
   private var initialized = false
   private var mapReady = false
@@ -136,6 +137,7 @@ class GoogleMapsViewImpl(
         googleMap?.setOnPolygonClickListener(this@GoogleMapsViewImpl)
         googleMap?.setOnCircleClickListener(this@GoogleMapsViewImpl)
         googleMap?.setOnMapClickListener(this@GoogleMapsViewImpl)
+        googleMap?.setOnMarkerDragListener(this@GoogleMapsViewImpl)
       }
       initLocationCallbacks()
       applyPending()
@@ -481,10 +483,13 @@ class GoogleMapsViewImpl(
   var onLocationUpdate: ((RNLocation) -> Unit)? = null
   var onLocationError: ((RNLocationErrorCode) -> Unit)? = null
   var onMapPress: ((RNLatLng) -> Unit)? = null
-  var onMarkerPress: ((String) -> Unit)? = null
-  var onPolylinePress: ((String) -> Unit)? = null
-  var onPolygonPress: ((String) -> Unit)? = null
-  var onCirclePress: ((String) -> Unit)? = null
+  var onMarkerPress: ((String?) -> Unit)? = null
+  var onPolylinePress: ((String?) -> Unit)? = null
+  var onPolygonPress: ((String?) -> Unit)? = null
+  var onCirclePress: ((String?) -> Unit)? = null
+  var onMarkerDragStart: ((String?, RNLatLng) -> Unit)? = null
+  var onMarkerDrag: ((String?, RNLatLng) -> Unit)? = null
+  var onMarkerDragEnd: ((String?, RNLatLng) -> Unit)? = null
   var onCameraChangeStart: ((RNRegion, RNCamera, Boolean) -> Unit)? = null
   var onCameraChange: ((RNRegion, RNCamera, Boolean) -> Unit)? = null
   var onCameraChangeComplete: ((RNRegion, RNCamera, Boolean) -> Unit)? = null
@@ -900,6 +905,7 @@ class GoogleMapsViewImpl(
         setOnPolygonClickListener(null)
         setOnCircleClickListener(null)
         setOnMapClickListener(null)
+        setOnMarkerDragListener(null)
       }
       googleMap = null
       mapView?.apply {
@@ -954,27 +960,49 @@ class GoogleMapsViewImpl(
   }
 
   override fun onMarkerClick(marker: Marker): Boolean {
-    onMarkerPress?.invoke(marker.tag?.toString() ?: "unknown")
+    marker.showInfoWindow()
+    onMarkerPress?.invoke(marker.tag?.toString())
     return true
   }
 
   override fun onPolylineClick(polyline: Polyline) {
-    onPolylinePress?.invoke(polyline.tag?.toString() ?: "unknown")
+    onPolylinePress?.invoke(polyline.tag?.toString())
   }
 
   override fun onPolygonClick(polygon: Polygon) {
-    onPolygonPress?.invoke(polygon.tag?.toString() ?: "unknown")
+    onPolygonPress?.invoke(polygon.tag?.toString())
   }
 
   override fun onCircleClick(circle: Circle) {
-    onCirclePress?.invoke(circle.tag?.toString() ?: "unknown")
+    onCirclePress?.invoke(circle.tag?.toString())
   }
 
   override fun onMapClick(coordinates: LatLng) {
     onMapPress?.invoke(
       RNLatLng(coordinates.latitude, coordinates.longitude),
     )
   }
+
+  override fun onMarkerDragStart(marker: Marker) {
+    onMarkerDragStart?.invoke(
+      marker.tag?.toString(),
+      RNLatLng(marker.position.latitude, marker.position.longitude),
+    )
+  }
+
+  override fun onMarkerDrag(marker: Marker) {
+    onMarkerDrag?.invoke(
+      marker.tag?.toString(),
+      RNLatLng(marker.position.latitude, marker.position.longitude),
+    )
+  }
+
+  override fun onMarkerDragEnd(marker: Marker) {
+    onMarkerDragEnd?.invoke(
+      marker.tag?.toString(),
+      RNLatLng(marker.position.latitude, marker.position.longitude),
+    )
+  }
 }
 
 private inline fun onUi(crossinline block: () -> Unit) {

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

@@ -41,8 +41,13 @@ class MapMarkerBuilder(
   ): MarkerOptions =
     MarkerOptions().apply {
       position(LatLng(m.coordinate.latitude, m.coordinate.longitude))
-      anchor((m.anchor?.x ?: 0.5).toFloat(), (m.anchor?.y ?: 0.5).toFloat())
       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.anchor?.let { anchor((m.anchor.x).toFloat(), (m.anchor.y).toFloat()) }
       m.zIndex?.let { zIndex(it.toFloat()) }
     }
 
@@ -56,17 +61,22 @@ class MapMarkerBuilder(
         next.coordinate.latitude,
         next.coordinate.longitude,
       )
-    marker.zIndex = next.zIndex?.toFloat() ?: 0f
 
     if (!prev.markerStyleEquals(next)) {
       buildIconAsync(marker.id, next) { icon ->
         marker.setIcon(icon)
       }
     }
+    marker.title = next.title
+    marker.snippet = next.snippet
+    marker.alpha = next.opacity?.toFloat() ?: 0f
+    marker.isFlat = next.flat ?: false
+    marker.isDraggable = next.draggable ?: false
     marker.setAnchor(
       (next.anchor?.x ?: 0.5).toFloat(),
-      (next.anchor?.y ?: 0.5).toFloat(),
+      (next.anchor?.y ?: 1.0).toFloat(),
     )
+    marker.zIndex = next.zIndex?.toFloat() ?: 0f
   }
 
   fun buildIconAsync(

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

@@ -280,26 +280,41 @@ class RNGoogleMapsPlusView(
       view.onMapPress = cb
     }
 
-  override var onMarkerPress: ((String) -> Unit)? = null
+  override var onMarkerPress: ((String?) -> Unit)? = null
     set(cb) {
       view.onMarkerPress = cb
     }
 
-  override var onPolylinePress: ((String) -> Unit)? = null
+  override var onPolylinePress: ((String?) -> Unit)? = null
     set(cb) {
       view.onPolylinePress = cb
     }
 
-  override var onPolygonPress: ((String) -> Unit)? = null
+  override var onPolygonPress: ((String?) -> Unit)? = null
     set(cb) {
       view.onPolygonPress = cb
     }
 
-  override var onCirclePress: ((String) -> Unit)? = null
+  override var onCirclePress: ((String?) -> Unit)? = null
     set(cb) {
       view.onCirclePress = cb
     }
 
+  override var onMarkerDragStart: ((String?, RNLatLng) -> Unit)? = null
+    set(cb) {
+      view.onMarkerDragStart = cb
+    }
+
+  override var onMarkerDrag: ((String?, RNLatLng) -> Unit)? = null
+    set(cb) {
+      view.onMarkerDrag = cb
+    }
+
+  override var onMarkerDragEnd: ((String?, RNLatLng) -> Unit)? = null
+    set(cb) {
+      view.onMarkerDragEnd = cb
+    }
+
   override var onCameraChangeStart: ((RNRegion, RNCamera, Boolean) -> Unit)? = null
     set(cb) {
       view.onCameraChangeStart = cb

example/src/components/MapWrapper.tsx

@@ -15,6 +15,7 @@ import {
 } from 'react-native-google-maps-plus';
 import type { ViewProps } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { callback } from 'react-native-nitro-modules';
 
 type Props = ViewProps &
   RNGoogleMapsPlusViewProps & {
@@ -94,86 +95,82 @@ export default function MapWrapper(props: Props) {
         mapZoomConfig={props.mapZoomConfig ?? mapZoomConfig}
         mapPadding={props.mapPadding ?? mapPadding}
         locationConfig={props.locationConfig ?? locationConfig}
-        onMapReady={
-          props.onMapReady
-            ? {
-                f: (ready: boolean) => console.log('Map is ready! ' + ready),
-              }
-            : undefined
-        }
-        onMapPress={
-          props.onMapPress
-            ? {
-                f: (c: RNLatLng) => console.log('Map press:', c),
-              }
-            : undefined
-        }
-        onMarkerPress={
-          props.onMarkerPress
-            ? {
-                f: (id: string) => console.log('Marker press:', id),
-              }
-            : undefined
-        }
-        onPolylinePress={
-          props.onPolylinePress
-            ? {
-                f: (id: string) => console.log('Polyline press:', id),
-              }
-            : undefined
-        }
-        onPolygonPress={
-          props.onPolygonPress
-            ? {
-                f: (id: string) => console.log('Polygon press:', id),
-              }
-            : undefined
-        }
-        onCirclePress={
-          props.onCirclePress
-            ? {
-                f: (id: string) => console.log('Circle press:', id),
-              }
-            : undefined
-        }
-        onCameraChangeStart={
-          props.onCameraChangeStart
-            ? {
-                f: (r: RNRegion, cam: RNCamera, g: boolean) =>
-                  console.log('Cam start', r, cam, g),
-              }
-            : undefined
-        }
-        onCameraChange={
-          props.onCameraChange
-            ? {
-                f: (r: RNRegion, cam: RNCamera, g: boolean) =>
-                  console.log('Cam', r, cam, g),
-              }
-            : undefined
-        }
-        onCameraChangeComplete={
-          props.onCameraChangeComplete
-            ? {
-                f: (r: RNRegion, cam: RNCamera, g: boolean) =>
-                  console.log('Cam complete', r, cam, g),
-              }
-            : undefined
-        }
-        onLocationUpdate={
-          props.onLocationUpdate
-            ? {
-                f: (l: RNLocation) => console.log('Location', l),
-              }
-            : undefined
-        }
-        onLocationError={
-          props.onLocationError
-            ? {
-                f: (e: any) => console.log('Location error', e),
-              }
-            : undefined
-        }
+        onMapReady={callback(
+          props.onMapReady ?? {
+            f: (ready: boolean) => console.log('Map is ready! ' + ready),
+          }
+        )}
+        onMapPress={callback(
+          props.onMapPress ?? {
+            f: (c: RNLatLng) => console.log('Map press:', c),
+          }
+        )}
+        onMarkerPress={callback(
+          props.onMarkerPress ?? {
+            f: (id: string | undefined) => console.log('Marker press:', id),
+          }
+        )}
+        onPolylinePress={callback(
+          props.onPolylinePress ?? {
+            f: (id: string | undefined) => console.log('Polyline press:', id),
+          }
+        )}
+        onPolygonPress={callback(
+          props.onPolygonPress ?? {
+            f: (id: string | undefined) => console.log('Polygon press:', id),
+          }
+        )}
+        onCirclePress={callback(
+          props.onCirclePress ?? {
+            f: (id: string | undefined) => console.log('Circle press:', id),
+          }
+        )}
+        onMarkerDragStart={callback(
+          props.onMarkerDragStart ?? {
+            f: (id: string | undefined, latLng: RNLatLng) =>
+              console.log('Marker drag start', id, latLng),
+          }
+        )}
+        onMarkerDrag={callback(
+          props.onMarkerDrag ?? {
+            f: (id: string | undefined, latLng: RNLatLng) =>
+              console.log('Marker drag', id, latLng),
+          }
+        )}
+        onMarkerDragEnd={callback(
+          props.onMarkerDragEnd ?? {
+            f: (id: string | undefined, latLng: RNLatLng) =>
+              console.log('Marker drag end', id, latLng),
+          }
+        )}
+        onCameraChangeStart={callback(
+          props.onCameraChangeStart ?? {
+            f: (r: RNRegion, cam: RNCamera, g: boolean) =>
+              console.log('Cam start', r, cam, g),
+          }
+        )}
+        onCameraChange={callback(
+          props.onCameraChange ?? {
+            f: (r: RNRegion, cam: RNCamera, g: boolean) =>
+              console.log('Cam', r, cam, g),
+          }
+        )}
+        onCameraChangeComplete={callback(
+          props.onCameraChangeComplete ?? {
+            f: (r: RNRegion, cam: RNCamera, g: boolean) =>
+              console.log('Cam complete', r, cam, g),
+          }
+        )}
+        onLocationUpdate={callback(
+          props.onLocationUpdate ?? {
+            f: (l: RNLocation) => console.log('Location', l),
+          }
+        )}
+        onLocationError={callback(
+          props.onLocationError ?? {
+            f: (e: any) => console.log('Location error', e),
+          }
+        )}
       />
       {children}
     </View>

example/src/utils/mapGenerators.ts

@@ -106,17 +106,22 @@ export const makeHeatmap = (id: number): RNHeatmap => ({
   opacity: 1,
 });
 
-export const makeMarker = (id: number): RNMarker => ({
-  id: id.toString(),
-  zIndex: id,
-  coordinate: randomCoordinates(37.7749, -122.4194, 0.2),
-  anchor: { x: 0.5, y: 1.0 },
-  iconSvg:
-    id % 2 === 0
+export function makeMarker(id: number): RNMarker {
+  const customIcon = id % 2 === 0;
+  return {
+    id: id.toString(),
+    zIndex: id,
+    coordinate: randomCoordinates(37.7749, -122.4194, 0.2),
+    anchor: customIcon ? { x: 0.5, y: 1.0 } : undefined,
+    title: `Marker title id: ${id}`,
+    snippet: `Marker snippet id: ${id}`,
+    draggable: customIcon,
+    iconSvg: customIcon
       ? {
           width: (64 / 100) * 50,
           height: (88 / 100) * 50,
           svgString: makeSvgIcon(64, 88),
         }
       : undefined,
-});
+  };
+}