feat: add more supported marker props

Author: pinpong

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

@@ -954,6 +954,7 @@ class GoogleMapsViewImpl(
   }
 
   override fun onMarkerClick(marker: Marker): Boolean {
+    marker.showInfoWindow()
     onMarkerPress?.invoke(marker.tag?.toString() ?: "unknown")
     return true
   }

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) }
+      anchor((m.anchor?.x ?: 0.5).toFloat(), (m.anchor?.y ?: 0.5).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(),
     )
+    marker.zIndex = next.zIndex?.toFloat() ?: 0f
   }
 
   fun buildIconAsync(

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}`,
+    snippet: `Marker snippet ${id}`,
+    draggable: customIcon,
+    iconSvg: customIcon
       ? {
           width: (64 / 100) * 50,
           height: (88 / 100) * 50,
           svgString: makeSvgIcon(64, 88),
         }
       : undefined,
-});
+  };
+}

ios/GoogleMapViewImpl.swift

@@ -722,6 +722,7 @@ final class GoogleMapsViewImpl: UIView, GMSMapViewDelegate {
   }
 
   func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {
+    mapView.selectedMarker = marker
     let id = (marker.userData as? String) ?? "unknown"
     onMarkerPress?(id)
     return true

ios/MapMarkerBuilder.swift

@@ -21,6 +21,11 @@ final class MapMarkerBuilder {
     marker.userData = m.id
     marker.tracksViewChanges = true
     marker.icon = icon
+    m.title.map { marker.title = $0 }
+    m.snippet.map { marker.snippet = $0 }
+    m.opacity.map { marker.iconView?.alpha = CGFloat($0) }
+    m.flat.map { marker.isFlat = $0 }
+    m.draggable.map { marker.isDraggable = $0 }
     marker.groundAnchor = CGPoint(
       x: m.anchor?.x ?? 0.5,
       y: m.anchor?.y ?? 0.5
@@ -42,13 +47,16 @@ final class MapMarkerBuilder {
       longitude: next.coordinate.longitude
     )
 
+    m.title = next.title
+    m.snippet = next.snippet
+    m.iconView?.alpha = CGFloat(next.opacity ?? 0)
+    m.isFlat = next.flat ?? false
+    m.isDraggable = next.draggable ?? false
     m.zIndex = Int32(next.zIndex ?? 0)
-
     m.groundAnchor = CGPoint(
       x: next.anchor?.x ?? 0.5,
       y: next.anchor?.y ?? 0.5
     )
-
     if !prev.markerStyleEquals(next) {
       buildIconAsync(next.id, next) { img in
         m.tracksViewChanges = true

src/types.ts

@@ -136,6 +136,12 @@ export type RNMarker = {
   zIndex?: number;
   coordinate: RNLatLng;
   anchor?: RNPosition;
+  showInfoWindow?: boolean;
+  title?: string;
+  snippet?: string;
+  opacity?: number;
+  flat?: boolean;
+  draggable?: boolean;
   iconSvg?: RNMarkerSvg;
 };