@lugg/maps 1.0.0-beta.0 → 1.0.0-beta.2

package/README.md

@@ -113,7 +113,7 @@ import { MapView, Marker, Polyline, Polygon } from '@lugg/maps';
 ## Components
 
 - [MapView](docs/MAPVIEW.md) - Main map component
-- [Marker](docs/MARKER.md) - Map markers
+- [Marker](docs/MARKER.md) - Map markers with callout support
 - [Polyline](docs/POLYLINE.md) - Draw lines on the map
 - [Polygon](docs/POLYGON.md) - Draw filled shapes on the map
 - [GeoJson](docs/GEOJSON.md) - Render GeoJSON data on the map

package/android/build.gradle

@@ -74,5 +74,5 @@ def kotlin_version = getExtOrDefault("kotlinVersion")
 dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation "com.google.android.gms:play-services-maps:19.2.0"
+  implementation "com.google.android.gms:play-services-maps:20.0.0"
 }

package/android/src/main/java/com/luggmaps/LuggCalloutView.kt

@@ -0,0 +1,74 @@
+package com.luggmaps
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.view.View
+import androidx.core.graphics.createBitmap
+import androidx.core.view.isNotEmpty
+import com.facebook.react.views.view.ReactViewGroup
+
+class LuggCalloutView(context: Context) : ReactViewGroup(context) {
+  val contentView: ReactViewGroup = ReactViewGroup(context)
+  var bubbled: Boolean = true
+  var anchorX: Float = 0.5f
+    set(value) {
+      field = value
+      onUpdate?.invoke()
+    }
+  var anchorY: Float = 1.0f
+    set(value) {
+      field = value
+      onUpdate?.invoke()
+    }
+  var onUpdate: (() -> Unit)? = null
+
+  val hasCustomContent: Boolean
+    get() = contentView.isNotEmpty()
+
+  init {
+    visibility = GONE
+  }
+
+  override fun addView(child: View, index: Int) {
+    contentView.addView(child, index)
+    child.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
+      onUpdate?.invoke()
+    }
+  }
+
+  override fun removeView(child: View) {
+    contentView.removeView(child)
+  }
+
+  override fun removeViewAt(index: Int) {
+    contentView.removeViewAt(index)
+  }
+
+  override fun getChildCount(): Int = contentView.childCount
+
+  override fun getChildAt(index: Int): View? = contentView.getChildAt(index)
+
+  fun createContentBitmap(): Bitmap? {
+    var maxWidth = 0
+    var maxHeight = 0
+    for (i in 0 until contentView.childCount) {
+      val child = contentView.getChildAt(i)
+      val childRight = child.left + child.width
+      val childBottom = child.top + child.height
+      if (childRight > maxWidth) maxWidth = childRight
+      if (childBottom > maxHeight) maxHeight = childBottom
+    }
+
+    if (maxWidth <= 0 || maxHeight <= 0) return null
+
+    val bitmap = createBitmap(maxWidth, maxHeight)
+    val canvas = Canvas(bitmap)
+    contentView.draw(canvas)
+    return bitmap
+  }
+
+  fun onDropViewInstance() {
+    contentView.removeAllViews()
+  }
+}

package/android/src/main/java/com/luggmaps/LuggCalloutViewManager.kt

@@ -0,0 +1,38 @@
+package com.luggmaps
+
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggCalloutViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggCalloutViewManagerInterface
+
+@ReactModule(name = LuggCalloutViewManager.NAME)
+class LuggCalloutViewManager :
+  ViewGroupManager<LuggCalloutView>(),
+  LuggCalloutViewManagerInterface<LuggCalloutView> {
+  private val delegate: ViewManagerDelegate<LuggCalloutView> = LuggCalloutViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<LuggCalloutView> = delegate
+  override fun getName(): String = NAME
+  override fun createViewInstance(context: ThemedReactContext): LuggCalloutView = LuggCalloutView(context)
+
+  override fun setBubbled(view: LuggCalloutView, value: Boolean) {
+    view.bubbled = value
+  }
+
+  override fun setAnchor(view: LuggCalloutView, value: ReadableMap?) {
+    view.anchorX = value?.getDouble("x")?.toFloat() ?: 0.5f
+    view.anchorY = value?.getDouble("y")?.toFloat() ?: 1.0f
+  }
+
+  override fun onDropViewInstance(view: LuggCalloutView) {
+    super.onDropViewInstance(view)
+    view.onDropViewInstance()
+  }
+
+  companion object {
+    const val NAME = "LuggCalloutView"
+  }
+}

package/android/src/main/java/com/luggmaps/LuggMapWrapperView.kt

@@ -15,17 +15,6 @@ class LuggMapWrapperView(context: ThemedReactContext) : ReactViewGroup(context)
     return super.dispatchTouchEvent(event)
   }
 
-  override fun requestLayout() {
-    super.requestLayout()
-    getChildAt(0)?.let {
-      it.measure(
-        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
-        MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
-      )
-      it.layout(0, 0, width, height)
-    }
-  }
-
   override fun onLayout(
     changed: Boolean,
     left: Int,

package/android/src/main/java/com/luggmaps/LuggMarkerView.kt

@@ -1,10 +1,8 @@
 package com.luggmaps
 
 import android.content.Context
-import android.graphics.Bitmap
 import android.graphics.Canvas
 import android.view.View
-import android.view.ViewGroup
 import androidx.core.graphics.createBitmap
 import androidx.core.view.isNotEmpty
 import com.facebook.react.views.view.ReactViewGroup
@@ -68,15 +66,20 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
     private set
 
   val hasCustomView: Boolean
-    get() = iconView.isNotEmpty()
+    get() = contentView.isNotEmpty()
 
-  val iconView: ReactViewGroup = ReactViewGroup(context)
+  val contentView: ReactViewGroup = ReactViewGroup(context)
 
-  private fun measureIconViewBounds(): Pair<Int, Int> {
+  var onUpdate: (() -> Unit)? = null
+
+  var calloutView: LuggCalloutView? = null
+    private set
+
+  private fun measureContentBounds(): Pair<Int, Int> {
     var maxWidth = 0
     var maxHeight = 0
-    for (i in 0 until iconView.childCount) {
-      val child = iconView.getChildAt(i)
+    for (i in 0 until contentView.childCount) {
+      val child = contentView.getChildAt(i)
       val childRight = child.left + child.width
       val childBottom = child.top + child.height
       if (childRight > maxWidth) maxWidth = childRight
@@ -85,8 +88,8 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
     return Pair(maxWidth, maxHeight)
   }
 
-  private fun createIconBitmap(): BitmapDescriptor? {
-    val (width, height) = measureIconViewBounds()
+  private fun createContentBitmap(): BitmapDescriptor? {
+    val (width, height) = measureContentBounds()
     if (width <= 0 || height <= 0) return null
 
     val scaledWidth = (width * scale).toInt()
@@ -95,41 +98,31 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
     val bitmap = createBitmap(scaledWidth, scaledHeight)
     val canvas = Canvas(bitmap)
     canvas.scale(scale, scale)
-    iconView.draw(canvas)
+    contentView.draw(canvas)
     return BitmapDescriptorFactory.fromBitmap(bitmap)
   }
 
-  private fun createIconViewWrapper(): View {
-    val (width, height) = measureIconViewBounds()
+  fun layoutContentView() {
+    val (width, height) = measureContentBounds()
     val scaledWidth = (width * scale).toInt()
     val scaledHeight = (height * scale).toInt()
 
-    (iconView.parent as? ViewGroup)?.removeView(iconView)
-    iconView.scaleX = scale
-    iconView.scaleY = scale
-    iconView.pivotX = 0f
-    iconView.pivotY = 0f
+    contentView.scaleX = scale
+    contentView.scaleY = scale
+    contentView.pivotX = 0f
+    contentView.pivotY = 0f
 
-    return object : ReactViewGroup(context) {
-      init {
-        addView(iconView)
-      }
-
-      override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
-        setMeasuredDimension(scaledWidth, scaledHeight)
-      }
-    }
+    contentView.measure(
+      View.MeasureSpec.makeMeasureSpec(scaledWidth, View.MeasureSpec.EXACTLY),
+      View.MeasureSpec.makeMeasureSpec(scaledHeight, View.MeasureSpec.EXACTLY)
+    )
+    contentView.layout(0, 0, scaledWidth, scaledHeight)
   }
 
   fun applyIconToMarker() {
     val m = marker ?: return
     if (!hasCustomView) return
-
-    if (rasterize) {
-      createIconBitmap()?.let { m.setIcon(it) }
-    } else {
-      m.iconView = createIconViewWrapper()
-    }
+    createContentBitmap()?.let { m.setIcon(it) }
   }
 
   fun applyScaleToMarker() {
@@ -139,9 +132,10 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
     scaleUpdateRunnable?.let { removeCallbacks(it) }
     scaleUpdateRunnable = Runnable {
       if (rasterize) {
-        createIconBitmap()?.let { m.setIcon(it) }
+        createContentBitmap()?.let { m.setIcon(it) }
       } else {
-        m.iconView = createIconViewWrapper()
+        layoutContentView()
+        onUpdate?.invoke()
       }
     }
     post(scaleUpdateRunnable)
@@ -149,18 +143,15 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
 
   fun updateIcon(onAddMarker: () -> Unit) {
     if (!hasCustomView) return
-    if (rasterize) {
-      post {
-        if (marker == null) {
-          onAddMarker()
-        } else {
-          applyIconToMarker()
-        }
+    post {
+      if (marker == null) {
+        onAddMarker()
+      } else if (rasterize) {
+        applyIconToMarker()
+      } else {
+        layoutContentView()
+        onUpdate?.invoke()
       }
-    } else {
-      marker?.remove()
-      marker = null
-      post { onAddMarker() }
     }
   }
 
@@ -169,23 +160,52 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
   }
 
   override fun addView(child: View, index: Int) {
-    iconView.addView(child, index)
+    if (child is LuggCalloutView) {
+      calloutView = child
+    } else {
+      contentView.addView(child, index)
+    }
     didLayout = false
   }
 
   override fun removeView(child: View) {
-    iconView.removeView(child)
+    if (child is LuggCalloutView) {
+      calloutView = null
+    } else {
+      contentView.removeView(child)
+    }
     didLayout = false
   }
 
   override fun removeViewAt(index: Int) {
-    iconView.removeViewAt(index)
+    val child = getChildAt(index)
+    if (child is LuggCalloutView) {
+      calloutView = null
+    } else {
+      contentView.removeViewAt(index)
+    }
     didLayout = false
   }
 
-  override fun getChildCount(): Int = iconView.childCount
+  override fun removeViews(start: Int, count: Int) {
+    for (i in (start until start + count).reversed()) {
+      val child = getChildAt(i)
+      if (child is LuggCalloutView) {
+        calloutView = null
+      } else if (i < contentView.childCount) {
+        contentView.removeViewAt(i)
+      }
+    }
+    didLayout = false
+  }
+
+  override fun getChildCount(): Int = contentView.childCount + if (calloutView != null) 1 else 0
 
-  override fun getChildAt(index: Int): View? = iconView.getChildAt(index)
+  override fun getChildAt(index: Int): View? {
+    if (index < contentView.childCount) return contentView.getChildAt(index)
+    if (index == contentView.childCount && calloutView != null) return calloutView
+    return null
+  }
 
   override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
     super.onSizeChanged(w, h, oldw, oldh)
@@ -277,8 +297,10 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
   fun onDropViewInstance() {
     scaleUpdateRunnable?.let { removeCallbacks(it) }
     scaleUpdateRunnable = null
+    onUpdate = null
     didLayout = false
+    calloutView = null
     delegate = null
-    iconView.removeAllViews()
+    contentView.removeAllViews()
   }
 }

package/android/src/main/java/com/luggmaps/LuggPackage.kt

@@ -6,5 +6,12 @@ import com.facebook.react.uimanager.ViewManager
 
 class LuggPackage : ReactPackage {
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
-    listOf(LuggMapViewManager(), LuggMarkerViewManager(), LuggMapWrapperViewManager(), LuggPolylineViewManager(), LuggPolygonViewManager())
+    listOf(
+      LuggMapViewManager(),
+      LuggMarkerViewManager(),
+      LuggCalloutViewManager(),
+      LuggMapWrapperViewManager(),
+      LuggPolylineViewManager(),
+      LuggPolygonViewManager()
+    )
 }

package/android/src/main/java/com/luggmaps/core/GoogleMapProvider.kt

@@ -3,6 +3,8 @@ package com.luggmaps.core
 import android.annotation.SuppressLint
 import android.content.Context
 import android.view.View
+import android.widget.ImageView
+import androidx.core.graphics.createBitmap
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.google.android.gms.maps.CameraUpdateFactory
 import com.google.android.gms.maps.GoogleMap
@@ -11,12 +13,14 @@ import com.google.android.gms.maps.MapView
 import com.google.android.gms.maps.OnMapReadyCallback
 import com.google.android.gms.maps.model.AdvancedMarker
 import com.google.android.gms.maps.model.AdvancedMarkerOptions
+import com.google.android.gms.maps.model.BitmapDescriptorFactory
 import com.google.android.gms.maps.model.LatLng
 import com.google.android.gms.maps.model.MapColorScheme
 import com.google.android.gms.maps.model.Marker
 import com.google.android.gms.maps.model.Polygon
 import com.google.android.gms.maps.model.PolygonOptions
 import com.google.android.gms.maps.model.PolylineOptions
+import com.luggmaps.LuggCalloutView
 import com.luggmaps.LuggMapWrapperView
 import com.luggmaps.LuggMarkerView
 import com.luggmaps.LuggMarkerViewDelegate
@@ -38,7 +42,8 @@ class GoogleMapProvider(private val context: Context) :
   GoogleMap.OnMapLongClickListener,
   GoogleMap.OnPolygonClickListener,
   GoogleMap.OnMarkerClickListener,
-  GoogleMap.OnMarkerDragListener {
+  GoogleMap.OnMarkerDragListener,
+  GoogleMap.InfoWindowAdapter {
 
   override var delegate: MapProviderDelegate? = null
   override val isMapReady: Boolean get() = _isMapReady
@@ -56,6 +61,8 @@ class GoogleMapProvider(private val context: Context) :
   private val polylineAnimators = mutableMapOf<LuggPolylineView, PolylineAnimator>()
   private val polygonToViewMap = mutableMapOf<Polygon, LuggPolygonView>()
   private val markerToViewMap = mutableMapOf<Marker, LuggMarkerView>()
+  private val liveMarkerViews = mutableSetOf<LuggMarkerView>()
+  private var activeNonBubbledMarker: Marker? = null
   private var tapLocation: LatLng? = null
 
   // Initial camera settings
@@ -103,6 +110,11 @@ class GoogleMapProvider(private val context: Context) :
   }
 
   override fun destroy() {
+    dismissNonBubbledCallout()
+    for (markerView in liveMarkerViews) {
+      markerView.onUpdate = null
+    }
+    liveMarkerViews.clear()
     pendingMarkerViews.clear()
     pendingPolylineViews.clear()
     pendingPolygonViews.clear()
@@ -120,6 +132,7 @@ class GoogleMapProvider(private val context: Context) :
     googleMap?.setOnPolygonClickListener(null)
     googleMap?.setOnMarkerClickListener(null)
     googleMap?.setOnMarkerDragListener(null)
+    googleMap?.setInfoWindowAdapter(null)
     googleMap?.clear()
     googleMap = null
     _isMapReady = false
@@ -143,6 +156,7 @@ class GoogleMapProvider(private val context: Context) :
     map.setOnPolygonClickListener(this)
     map.setOnMarkerClickListener(this)
     map.setOnMarkerDragListener(this)
+    map.setInfoWindowAdapter(this)
 
     wrapperView?.touchEventHandler = { event ->
       if (event.action == android.view.MotionEvent.ACTION_DOWN) {
@@ -177,6 +191,8 @@ class GoogleMapProvider(private val context: Context) :
     val map = googleMap ?: return
     val position = map.cameraPosition
     delegate?.mapProviderDidMoveCamera(position.target.latitude, position.target.longitude, position.zoom, isDragging)
+    positionLiveMarkers()
+    positionNonBubbledCallout()
   }
 
   override fun onCameraIdle() {
@@ -190,6 +206,7 @@ class GoogleMapProvider(private val context: Context) :
   }
 
   override fun onMapClick(latLng: LatLng) {
+    dismissNonBubbledCallout()
     val map = googleMap ?: return
     val point = map.projection.toScreenLocation(latLng)
     delegate?.mapProviderDidPress(latLng.latitude, latLng.longitude, point.x.toFloat(), point.y.toFloat())
@@ -211,9 +228,18 @@ class GoogleMapProvider(private val context: Context) :
   }
 
   override fun onMarkerClick(marker: Marker): Boolean {
+    dismissNonBubbledCallout()
+
     markerToViewMap[marker]?.let { view ->
       val point = googleMap?.projection?.toScreenLocation(marker.position)
       view.emitPressEvent(point?.x?.toFloat() ?: 0f, point?.y?.toFloat() ?: 0f)
+
+      val calloutView = view.calloutView
+      if (calloutView != null && !calloutView.bubbled && calloutView.hasCustomContent) {
+        googleMap?.animateCamera(CameraUpdateFactory.newLatLng(marker.position))
+        showNonBubbledCallout(marker, calloutView)
+        return true
+      }
     }
     return false
   }
@@ -224,6 +250,7 @@ class GoogleMapProvider(private val context: Context) :
       view.setCoordinate(marker.position.latitude, marker.position.longitude)
       val point = googleMap?.projection?.toScreenLocation(marker.position)
       view.emitDragStartEvent(point?.x?.toFloat() ?: 0f, point?.y?.toFloat() ?: 0f)
+      if (!view.rasterize) positionLiveMarker(view)
     }
   }
 
@@ -232,6 +259,7 @@ class GoogleMapProvider(private val context: Context) :
       view.setCoordinate(marker.position.latitude, marker.position.longitude)
       val point = googleMap?.projection?.toScreenLocation(marker.position)
       view.emitDragChangeEvent(point?.x?.toFloat() ?: 0f, point?.y?.toFloat() ?: 0f)
+      if (!view.rasterize) positionLiveMarker(view)
     }
   }
 
@@ -241,7 +269,92 @@ class GoogleMapProvider(private val context: Context) :
       view.setCoordinate(marker.position.latitude, marker.position.longitude)
       val point = googleMap?.projection?.toScreenLocation(marker.position)
       view.emitDragEndEvent(point?.x?.toFloat() ?: 0f, point?.y?.toFloat() ?: 0f)
+      if (!view.rasterize) positionLiveMarker(view)
+    }
+  }
+
+  override fun getInfoWindow(marker: Marker): View? {
+    // Non-bubbled callouts are rendered as live views, not info windows
+    return null
+  }
+
+  override fun getInfoContents(marker: Marker): View? {
+    val markerView = markerToViewMap[marker] ?: return null
+    val calloutView = markerView.calloutView ?: return null
+    if (!calloutView.hasCustomContent || !calloutView.bubbled) return null
+
+    val bitmap = calloutView.createContentBitmap() ?: return null
+    return ImageView(context).apply { setImageBitmap(bitmap) }
+  }
+
+  private fun showNonBubbledCallout(marker: Marker, calloutView: LuggCalloutView) {
+    val wrapper = wrapperView ?: return
+    val contentView = calloutView.contentView
+
+    calloutView.onUpdate = {
+      layoutNonBubbledCallout()
+      positionNonBubbledCallout()
     }
+
+    dismissInfoWindows()
+    wrapper.addView(contentView)
+    activeNonBubbledMarker = marker
+    layoutNonBubbledCallout()
+    positionNonBubbledCallout()
+  }
+
+  private fun dismissInfoWindows() {
+    for ((marker, _) in markerToViewMap) {
+      if (marker.isInfoWindowShown) {
+        marker.hideInfoWindow()
+      }
+    }
+  }
+
+  private fun dismissNonBubbledCallout() {
+    val marker = activeNonBubbledMarker ?: return
+    val markerView = markerToViewMap[marker] ?: return
+    val calloutView = markerView.calloutView ?: return
+    val contentView = calloutView.contentView
+
+    calloutView.onUpdate = null
+    (contentView.parent as? android.view.ViewGroup)?.removeView(contentView)
+    activeNonBubbledMarker = null
+  }
+
+  private fun layoutNonBubbledCallout() {
+    val marker = activeNonBubbledMarker ?: return
+    val markerView = markerToViewMap[marker] ?: return
+    val calloutView = markerView.calloutView ?: return
+    val contentView = calloutView.contentView
+
+    var contentWidth = 0
+    var contentHeight = 0
+    for (i in 0 until contentView.childCount) {
+      val child = contentView.getChildAt(i)
+      val childRight = child.left + child.width
+      val childBottom = child.top + child.height
+      if (childRight > contentWidth) contentWidth = childRight
+      if (childBottom > contentHeight) contentHeight = childBottom
+    }
+
+    contentView.measure(
+      View.MeasureSpec.makeMeasureSpec(contentWidth, View.MeasureSpec.EXACTLY),
+      View.MeasureSpec.makeMeasureSpec(contentHeight, View.MeasureSpec.EXACTLY)
+    )
+    contentView.layout(0, 0, contentWidth, contentHeight)
+  }
+
+  private fun positionNonBubbledCallout() {
+    val marker = activeNonBubbledMarker ?: return
+    val markerView = markerToViewMap[marker] ?: return
+    val calloutView = markerView.calloutView ?: return
+    val contentView = calloutView.contentView
+    val map = googleMap ?: return
+
+    val point = map.projection.toScreenLocation(marker.position)
+    contentView.translationX = point.x - contentView.width * calloutView.anchorX
+    contentView.translationY = point.y - contentView.height * calloutView.anchorY
   }
 
   // endregion
@@ -382,6 +495,7 @@ class GoogleMapProvider(private val context: Context) :
   }
 
   override fun removeMarkerView(markerView: LuggMarkerView) {
+    removeLiveMarker(markerView)
     markerView.marker?.let { markerToViewMap.remove(it) }
     markerView.marker?.remove()
     markerView.marker = null
@@ -411,9 +525,14 @@ class GoogleMapProvider(private val context: Context) :
       isDraggable = markerView.draggable
     }
 
-    if (markerView.hasCustomView && markerView.scaleChanged) {
-      markerView.applyScaleToMarker()
-      markerView.clearScaleChanged()
+    if (markerView.hasCustomView) {
+      if (markerView.scaleChanged) {
+        markerView.applyScaleToMarker()
+        markerView.clearScaleChanged()
+      }
+      if (!markerView.rasterize) {
+        positionLiveMarker(markerView)
+      }
     }
   }
 
@@ -440,7 +559,64 @@ class GoogleMapProvider(private val context: Context) :
 
     markerView.marker = marker
     markerToViewMap[marker] = markerView
-    markerView.applyIconToMarker()
+
+    if (markerView.hasCustomView) {
+      if (markerView.rasterize) {
+        markerView.applyIconToMarker()
+      } else {
+        showLiveMarker(markerView)
+      }
+    }
+  }
+
+  // Workaround: AdvancedMarker.iconView is buggy on Android, so we manually add the custom
+  // content view to the wrapper and position it via screen projection instead. The underlying
+  // marker uses a transparent bitmap matching the content size so taps still trigger onMarkerClick.
+  private fun showLiveMarker(markerView: LuggMarkerView) {
+    val wrapper = wrapperView ?: return
+
+    markerView.onUpdate = {
+      updateLiveMarkerHitArea(markerView)
+      positionLiveMarker(markerView)
+    }
+
+    val contentView = markerView.contentView
+    contentView.pointerEvents = com.facebook.react.uimanager.PointerEvents.NONE
+    (contentView.parent as? android.view.ViewGroup)?.removeView(contentView)
+    wrapper.addView(contentView)
+    liveMarkerViews.add(markerView)
+    markerView.layoutContentView()
+    updateLiveMarkerHitArea(markerView)
+    positionLiveMarker(markerView)
+  }
+
+  private fun updateLiveMarkerHitArea(markerView: LuggMarkerView) {
+    val marker = markerView.marker ?: return
+    val contentView = markerView.contentView
+    val w = contentView.width.coerceAtLeast(1)
+    val h = contentView.height.coerceAtLeast(1)
+    marker.setIcon(BitmapDescriptorFactory.fromBitmap(createBitmap(w, h)))
+  }
+
+  private fun removeLiveMarker(markerView: LuggMarkerView) {
+    markerView.onUpdate = null
+    val contentView = markerView.contentView
+    (contentView.parent as? android.view.ViewGroup)?.removeView(contentView)
+    liveMarkerViews.remove(markerView)
+  }
+
+  private fun positionLiveMarkers() {
+    for (markerView in liveMarkerViews) {
+      positionLiveMarker(markerView)
+    }
+  }
+
+  private fun positionLiveMarker(markerView: LuggMarkerView) {
+    val map = googleMap ?: return
+    val contentView = markerView.contentView
+    val point = map.projection.toScreenLocation(LatLng(markerView.latitude, markerView.longitude))
+    contentView.translationX = point.x - contentView.width * markerView.anchorX
+    contentView.translationY = point.y - contentView.height * markerView.anchorY
   }
 
   // endregion