react-native-google-maps-plus 1.0.2 → 1.0.3-dev.1

package/README.md

@@ -1,30 +1,146 @@
 # react-native-google-maps-plus
 
-[![npm version](https://img.shields.io/npm/v/react-native-google-maps-plus.svg)](https://www.npmjs.com/package/react-native-google-maps-plus)
+[![npm version](https://img.shields.io/npm/v/react-native-google-maps-plus.svg?logo=npm&color=cb0000)](https://www.npmjs.com/package/react-native-google-maps-plus)
+[![Dev Release](https://img.shields.io/npm/v/react-native-google-maps-plus/dev.svg?label=dev%20release&color=orange&logo=githubactions)](https://www.npmjs.com/package/react-native-google-maps-plus)
 [![Release](https://github.com/pinpong/react-native-google-maps-plus/actions/workflows/release.yml/badge.svg)](https://github.com/pinpong/react-native-google-maps-plus/actions/workflows/release.yml)
-[![Issues](https://img.shields.io/github/issues/pinpong/react-native-google-maps-plus)](https://github.com/pinpong/react-native-google-maps-plus/issues)
-[![License](https://img.shields.io/github/license/pinpong/react-native-google-maps-plus)](./LICENSE)
-[![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io/)
-[![TypeScript](https://img.shields.io/badge/%3C/%3E-TypeScript-blue.svg)](https://www.typescriptlang.org/)
-[![Lint](https://img.shields.io/badge/lint-eslint-green.svg)](https://eslint.org/)
-[![React Native](https://img.shields.io/badge/react--native-%3E%3D0.81.0-61dafb.svg)](https://reactnative.dev/)
-[![Platform: Android](https://img.shields.io/badge/platform-android-green.svg)](https://developer.android.com/)
-[![Platform: iOS](https://img.shields.io/badge/platform-iOS-lightgrey.svg)](https://developer.apple.com/ios/)
+[![Issues](https://img.shields.io/github/issues/pinpong/react-native-google-maps-plus?logo=github)](https://github.com/pinpong/react-native-google-maps-plus/issues)
+[![License](https://img.shields.io/github/license/pinpong/react-native-google-maps-plus?logo=open-source-initiative&logoColor=green)](./LICENSE)
+[![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?logo=prettier&logoColor=white)](https://prettier.io/)
+[![TypeScript](https://img.shields.io/badge/%3C/%3E-TypeScript-blue.svg?logo=typescript)](https://www.typescriptlang.org/)
+[![Lint](https://img.shields.io/badge/lint-eslint-green.svg?logo=eslint&logoColor=white)](https://eslint.org/)
+[![React Native](https://img.shields.io/badge/react--native-%3E%3D0.81.0-61dafb.svg?logo=react)](https://reactnative.dev/)
+[![Platform: Android](https://img.shields.io/badge/platform-android-green.svg?logo=android&logoColor=white)](https://developer.android.com/)
+[![Platform: iOS](https://img.shields.io/badge/platform-iOS-lightgrey.svg?logo=apple&logoColor=black)](https://developer.apple.com/ios/)
 
 React-native wrapper for android & IOS google maps sdk
 
 ## Installation
 
+`react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
+
 ```sh
 yarn add react-native-google-maps-plus react-native-nitro-modules
-
-> `react-native-nitro-modules` is required as this library relies on [Nitro Modules](https://nitro.margelo.com/).
 ```
 
+Dependencies
+
+This package builds on native SVG rendering libraries:
+
+iOS: [SVGKit](https://github.com/SVGKit/SVGKit)
+
+Android: [AndroidSVG](https://bigbadaboom.github.io/androidsvg/)
+
+These are automatically linked when you install the package, but you may need to clean/rebuild your native projects after first install.
+
+## Setup API Key
+
+You will need a valid **Google Maps API Key** from the [Google Cloud Console](https://console.cloud.google.com/).
+
+### Android
+
+It's recommend to use [Secrets Gradle Plugin](https://developers.google.com/maps/documentation/android-sdk/secrets-gradle-plugin) to securely manage your Google Maps API Key.
+
+---
+
+### iOS
+
+See the official [Google Maps iOS SDK configuration guide](https://developers.google.com/maps/documentation/ios-sdk/config#get-key) for more details.
+
+1. Create a `Secrets.xcconfig` file inside the **ios/** folder:
+
+   ```properties
+   MAPS_API_KEY=YOUR_IOS_MAPS_API_KEY
+   ```
+
+   Include it in your project configuration file:
+
+   ```xcconfig
+   #include? "Secrets.xcconfig"
+   ```
+
+2. Reference the API key in your **Info.plist**:
+
+   ```xml
+   <key>MAPS_API_KEY</key>
+   <string>$(MAPS_API_KEY)</string>
+   ```
+
+3. Provide the key programmatically in **AppDelegate.swift**:
+
+   ```swift
+   import GoogleMaps
+
+   @UIApplicationMain
+   class AppDelegate: UIResponder, UIApplicationDelegate {
+     func application(_ application: UIApplication,
+                      didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+       if let apiKey = Bundle.main.object(forInfoDictionaryKey: "MAPS_API_KEY") as? String {
+           GMSServices.provideAPIKey(apiKey)
+       }
+       return true
+     }
+   }
+   ```
+
+---
+
 ## Usage
 
 Checkout the example app in the [example](./example) folder.
 
+# Troubleshooting
+
+## Android
+
+- **API key not found**
+  Make sure `secrets.properties` exists under `android/` and contains your `MAPS_API_KEY`.
+  Run `./gradlew clean` and rebuild.
+
+## iOS
+
+- **`GMSServices must be configured before use`**
+  Ensure your key is in `Info.plist` and/or provided via `GMSServices.provideAPIKey(...)` in `AppDelegate.swift`.
+
+- **Build fails with `Node.h` import error from SVGKit**
+  SVGKit uses a header `Node.h` which can conflict with iOS system headers.
+  You can patch it automatically in your **Podfile** inside the `post_install` hook:
+
+  ```ruby
+  post_install do |installer|
+    react_native_post_install(
+      installer,
+      config[:reactNativePath],
+      :mac_catalyst_enabled => false,
+    )
+    # Force iOS 16+ to avoid deployment target warnings
+    installer.pods_project.targets.each do |target|
+      target.build_configurations.each do |config|
+        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '16.0'
+      end
+    end
+
+    # Patch SVGKit includes to avoid Node.h conflicts
+    require 'fileutils'
+    svgkit_path = File.join(installer.sandbox.pod_dir('SVGKit'), 'Source')
+    Dir.glob(File.join(svgkit_path, '**', '*.{h,m}')).each do |file|
+      FileUtils.chmod("u+w", file)
+      text = File.read(file)
+      new_contents = text.gsub('#import "Node.h"', '#import "SVGKit/Node.h"')
+      File.open(file, 'w') { |f| f.write(new_contents) }
+    end
+  end
+  ```
+
+  After applying this, run:
+
+  ```sh
+  cd ios && pod install --repo-update
+  ```
+
+- **Maps not rendering**
+  - Check that your API key has **Maps SDK for Android/iOS** enabled in Google Cloud Console.
+  - Make sure the key is not restricted to wrong bundle IDs or SHA1 fingerprints.
+
 ## Contributing
 
 - [Development workflow](CONTRIBUTING.md#development-workflow)

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

@@ -1,7 +1,7 @@
 package com.rngooglemapsplus
 
-import android.annotation.SuppressLint
 import android.location.Location
+import android.widget.FrameLayout
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.uimanager.PixelUtil.dpToPx
@@ -9,9 +9,11 @@ import com.facebook.react.uimanager.ThemedReactContext
 import com.google.android.gms.common.ConnectionResult
 import com.google.android.gms.maps.CameraUpdateFactory
 import com.google.android.gms.maps.GoogleMap
+import com.google.android.gms.maps.GoogleMapOptions
 import com.google.android.gms.maps.MapView
-import com.google.android.gms.maps.OnMapReadyCallback
 import com.google.android.gms.maps.model.CameraPosition
+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.google.android.gms.maps.model.LatLngBounds
 import com.google.android.gms.maps.model.MapColorScheme
@@ -28,53 +30,46 @@ class GoogleMapsViewImpl(
   val locationHandler: LocationHandler,
   val playServiceHandler: PlayServicesHandler,
   val markerOptions: com.rngooglemapsplus.MarkerOptions,
-) : MapView(reactContext),
+) : FrameLayout(reactContext),
   GoogleMap.OnCameraMoveStartedListener,
   GoogleMap.OnCameraMoveListener,
   GoogleMap.OnCameraIdleListener,
   GoogleMap.OnMapClickListener,
-  OnMapReadyCallback,
   GoogleMap.OnMarkerClickListener,
+  GoogleMap.OnPolylineClickListener,
+  GoogleMap.OnPolygonClickListener,
+  GoogleMap.OnCircleClickListener,
   LifecycleEventListener {
+  private var initialized = false
+  private var mapReady = false
   private var googleMap: GoogleMap? = null
+  private var mapView: MapView? = null
 
-  private var pendingBuildingEnabled: Boolean = false
-  private var pendingTrafficEnabled: Boolean = false
-  private var pendingCustomMapStyle: MapStyleOptions? = null
-  private var pendingInitialCamera: CameraPosition =
-    CameraPosition
-      .builder()
-      .target(
-        LatLng(
-          0.0,
-          0.0,
-        ),
-      ).zoom(0f)
-      .bearing(0f)
-      .tilt(0f)
-      .build()
-  private var pendingUserInterfaceStyle: Int = MapColorScheme.FOLLOW_SYSTEM
-  private var pendingMinZoomLevel: Double = 0.0
-  private var pendingMaxZoomLevel: Double = 21.0
-  private var pendingMapPadding: RNMapPadding = RNMapPadding(0.0, 0.0, 0.0, 0.0)
-  private val pendingPolygons = mutableListOf<Pair<String, PolygonOptions>>()
-  private val pendingPolylines = mutableListOf<Pair<String, PolylineOptions>>()
   private val pendingMarkers = mutableListOf<Pair<String, MarkerOptions>>()
-  private var cameraMoveReason = -1
+  private val pendingPolylines = mutableListOf<Pair<String, PolylineOptions>>()
+  private val pendingPolygons = mutableListOf<Pair<String, PolygonOptions>>()
+  private val pendingCircles = mutableListOf<Pair<String, CircleOptions>>()
 
-  private val polygonsById = mutableMapOf<String, Polygon>()
-  private val polylinesById = mutableMapOf<String, Polyline>()
   private val markersById = mutableMapOf<String, Marker>()
+  private val polylinesById = mutableMapOf<String, Polyline>()
+  private val polygonsById = mutableMapOf<String, Polygon>()
+  private val circlesById = mutableMapOf<String, Circle>()
 
+  private var cameraMoveReason = -1
   private var lastSubmittedLocation: Location? = null
   private var lastSubmittedCameraPosition: CameraPosition? = null
 
   init {
     reactContext.addLifecycleEventListener(this)
-    getMap()
   }
 
-  private fun getMap() {
+  fun initMapView(
+    mapId: String?,
+    liteMode: Boolean?,
+    cameraPosition: CameraPosition?,
+  ) {
+    if (initialized) return
+    initialized = true
     val result = playServiceHandler.playServicesAvailability()
 
     when (result) {
@@ -103,8 +98,38 @@ class GoogleMapsViewImpl(
         onMapError?.invoke(RNMapErrorCode.UNKNOWN)
     }
 
-    onCreate(null)
-    getMapAsync(this@GoogleMapsViewImpl)
+    mapView =
+      MapView(
+        reactContext,
+        GoogleMapOptions().apply {
+          mapId?.let { mapId(it) }
+          liteMode?.let { liteMode(it) }
+          cameraPosition?.let {
+            camera(it)
+          }
+        },
+      )
+
+    super.addView(mapView)
+
+    mapView?.onCreate(null)
+    mapView?.getMapAsync { map ->
+      googleMap = map
+      googleMap?.setOnMapLoadedCallback {
+        googleMap?.setOnCameraMoveStartedListener(this@GoogleMapsViewImpl)
+        googleMap?.setOnCameraMoveListener(this@GoogleMapsViewImpl)
+        googleMap?.setOnCameraIdleListener(this@GoogleMapsViewImpl)
+        googleMap?.setOnMarkerClickListener(this@GoogleMapsViewImpl)
+        googleMap?.setOnPolylineClickListener(this@GoogleMapsViewImpl)
+        googleMap?.setOnPolygonClickListener(this@GoogleMapsViewImpl)
+        googleMap?.setOnCircleClickListener(this@GoogleMapsViewImpl)
+        googleMap?.setOnMapClickListener(this@GoogleMapsViewImpl)
+      }
+      initLocationCallbacks()
+      applyPending()
+    }
+    mapReady = true
+    onMapReady?.invoke(true)
   }
 
   override fun onCameraMoveStarted(reason: Int) {
@@ -195,22 +220,6 @@ class GoogleMapsViewImpl(
     )
   }
 
-  @SuppressLint("PotentialBehaviorOverride")
-  override fun onMapReady(map: GoogleMap) {
-    googleMap = map
-    googleMap?.setOnMapLoadedCallback {
-      googleMap?.setOnCameraMoveStartedListener(this)
-      googleMap?.setOnCameraMoveListener(this)
-      googleMap?.setOnCameraIdleListener(this)
-      googleMap?.setOnMarkerClickListener(this)
-      googleMap?.setOnMapClickListener(this)
-    }
-    initLocationCallbacks()
-    applyPending()
-
-    onMapReady?.invoke(true)
-  }
-
   fun initLocationCallbacks() {
     locationHandler.onUpdate = { location ->
       // / only the coordinated are relevant right now
@@ -235,27 +244,33 @@ class GoogleMapsViewImpl(
 
   fun applyPending() {
     onUi {
-      googleMap?.setPadding(
-        pendingMapPadding.left.dpToPx().toInt(),
-        pendingMapPadding.top.dpToPx().toInt(),
-        pendingMapPadding.right.dpToPx().toInt(),
-        pendingMapPadding.bottom.dpToPx().toInt(),
-      )
-
-      pendingInitialCamera.let {
-        googleMap?.moveCamera(
-          CameraUpdateFactory.newCameraPosition(
-            it,
-          ),
+      mapPadding?.let {
+        googleMap?.setPadding(
+          it.left.dpToPx().toInt(),
+          it.top.dpToPx().toInt(),
+          it.right.dpToPx().toInt(),
+          it.bottom.dpToPx().toInt(),
         )
       }
-
-      googleMap?.isBuildingsEnabled = pendingBuildingEnabled
-      googleMap?.isTrafficEnabled = pendingTrafficEnabled
-      googleMap?.setMapStyle(pendingCustomMapStyle)
-      googleMap?.mapColorScheme = pendingUserInterfaceStyle
-      googleMap?.setMinZoomPreference(pendingMinZoomLevel.toFloat())
-      googleMap?.setMaxZoomPreference(pendingMaxZoomLevel.toFloat())
+      buildingEnabled?.let {
+        googleMap?.isBuildingsEnabled = it
+      }
+      trafficEnabled?.let {
+        googleMap?.isTrafficEnabled = it
+      }
+      googleMap?.setMapStyle(customMapStyle)
+      mapType?.let {
+        googleMap?.mapType = it
+      }
+      userInterfaceStyle?.let {
+        googleMap?.mapColorScheme = it
+      }
+      minZoomLevel?.let {
+        googleMap?.setMinZoomPreference(it.toFloat())
+      }
+      maxZoomLevel?.let {
+        googleMap?.setMaxZoomPreference(it.toFloat())
+      }
     }
 
     if (pendingMarkers.isNotEmpty()) {
@@ -278,79 +293,110 @@ class GoogleMapsViewImpl(
       }
       pendingPolygons.clear()
     }
+
+    if (pendingCircles.isNotEmpty()) {
+      pendingCircles.forEach { (id, opts) ->
+        internalAddCircle(id, opts)
+      }
+      pendingCircles.clear()
+    }
   }
 
-  var buildingEnabled: Boolean
-    get() = googleMap?.isBuildingsEnabled ?: pendingBuildingEnabled
+  var buildingEnabled: Boolean? = null
     set(value) {
-      pendingBuildingEnabled = value
+      field = value
       onUi {
-        googleMap?.isBuildingsEnabled = value
+        value?.let {
+          googleMap?.isBuildingsEnabled = it
+        }
+          ?: run {
+            googleMap?.isBuildingsEnabled = false
+          }
       }
     }
 
-  var trafficEnabled: Boolean
-    get() = googleMap?.isTrafficEnabled ?: pendingTrafficEnabled
+  var trafficEnabled: Boolean? = null
     set(value) {
-      pendingTrafficEnabled = value
+      field = value
       onUi {
-        googleMap?.isTrafficEnabled = value
+        value?.let {
+          googleMap?.isTrafficEnabled = it
+        } ?: run {
+          googleMap?.isTrafficEnabled = false
+        }
       }
     }
 
-  var customMapStyle: MapStyleOptions?
-    get() = pendingCustomMapStyle
+  var customMapStyle: MapStyleOptions? = null
     set(value) {
-      pendingCustomMapStyle = value
+      field = value
       onUi {
         googleMap?.setMapStyle(value)
       }
     }
 
-  var initialCamera: CameraPosition
-    get() = pendingInitialCamera
+  var userInterfaceStyle: Int? = null
     set(value) {
-      pendingInitialCamera = value
+      field = value
+      onUi {
+        value?.let {
+          googleMap?.mapColorScheme = it
+        } ?: run {
+          googleMap?.mapColorScheme = MapColorScheme.FOLLOW_SYSTEM
+        }
+      }
     }
 
-  var userInterfaceStyle: Int
-    get() = pendingUserInterfaceStyle
+  var minZoomLevel: Double? = null
     set(value) {
-      pendingUserInterfaceStyle = value
+      field = value
       onUi {
-        googleMap?.mapColorScheme = value
+        value?.let {
+          googleMap?.setMinZoomPreference(it.toFloat())
+        } ?: run {
+          googleMap?.setMinZoomPreference(2.0f)
+        }
       }
     }
 
-  var minZoomLevel: Double
-    get() = pendingMinZoomLevel
+  var maxZoomLevel: Double? = null
     set(value) {
-      pendingMinZoomLevel = value
+      field = value
       onUi {
-        googleMap?.setMinZoomPreference(value.toFloat())
+        value?.let {
+          googleMap?.setMaxZoomPreference(it.toFloat())
+        } ?: run {
+          googleMap?.setMaxZoomPreference(21.0f)
+        }
       }
     }
 
-  var maxZoomLevel: Double
-    get() = pendingMaxZoomLevel
+  var mapPadding: RNMapPadding? = null
     set(value) {
-      pendingMaxZoomLevel = value
-      onUi {
-        googleMap?.setMaxZoomPreference(value.toFloat())
+      field = value
+      value?.let {
+        onUi {
+          googleMap?.setPadding(
+            it.left.dpToPx().toInt(),
+            it.top.dpToPx().toInt(),
+            it.right.dpToPx().toInt(),
+            it.bottom.dpToPx().toInt(),
+          )
+        }
+      } ?: run {
+        googleMap?.setPadding(0, 0, 0, 0)
       }
     }
 
-  var mapPadding: RNMapPadding
-    get() = pendingMapPadding
+  var mapType: Int? = null
     set(value) {
-      pendingMapPadding = value
+      field = value
       onUi {
-        googleMap?.setPadding(
-          value.left.dpToPx().toInt(),
-          value.top.dpToPx().toInt(),
-          value.right.dpToPx().toInt(),
-          value.bottom.dpToPx().toInt(),
-        )
+        value?.let {
+          googleMap?.mapType = it
+        } ?: run {
+          googleMap?.mapType = 1
+        }
       }
     }
 
@@ -360,6 +406,9 @@ class GoogleMapsViewImpl(
   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 onCameraChangeStart: ((RNRegion, RNCamera, Boolean) -> Unit)? = null
   var onCameraChange: ((RNRegion, RNCamera, Boolean) -> Unit)? = null
   var onCameraChangeComplete: ((RNRegion, RNCamera, Boolean) -> Unit)? = null
@@ -429,8 +478,8 @@ class GoogleMapsViewImpl(
       val latSpan = bounds.northeast.latitude - bounds.southwest.latitude
       val lngSpan = bounds.northeast.longitude - bounds.southwest.longitude
 
-      val latPerPixel = latSpan / height
-      val lngPerPixel = lngSpan / width
+      val latPerPixel = latSpan / (mapView?.height ?: 0)
+      val lngPerPixel = lngSpan / (mapView?.width ?: 0)
 
       builder.include(
         LatLng(
@@ -459,8 +508,10 @@ class GoogleMapsViewImpl(
 
       val paddedBounds = builder.build()
 
-      val adjustedWidth = (width - padding.left.dpToPx() - padding.right.dpToPx()).toInt()
-      val adjustedHeight = (height - padding.top.dpToPx() - padding.bottom.dpToPx()).toInt()
+      val adjustedWidth =
+        ((mapView?.width ?: 0) - padding.left.dpToPx() - padding.right.dpToPx()).toInt()
+      val adjustedHeight =
+        ((mapView?.height ?: 0) - padding.top.dpToPx() - padding.bottom.dpToPx()).toInt()
 
       val update =
         CameraUpdateFactory.newLatLngBounds(
@@ -639,22 +690,86 @@ class GoogleMapsViewImpl(
     pendingPolygons.clear()
   }
 
-  fun clearAll() {
+  fun addCircle(
+    id: String,
+    opts: CircleOptions,
+  ) {
+    if (googleMap == null) {
+      pendingCircles.add(id to opts)
+      return
+    }
+
+    onUi {
+      circlesById.remove(id)?.remove()
+    }
+    internalAddCircle(id, opts)
+  }
+
+  private fun internalAddCircle(
+    id: String,
+    opts: CircleOptions,
+  ) {
+    onUi {
+      val circle =
+        googleMap?.addCircle(opts).also {
+          it?.tag = id
+        }
+      if (circle != null) {
+        circlesById[id] = circle
+      }
+    }
+  }
+
+  fun updateCircle(
+    id: String,
+    block: (Circle) -> Unit,
+  ) {
+    val circle = circlesById[id] ?: return
+    onUi {
+      block(circle)
+    }
+  }
+
+  fun removeCircle(id: String) {
+    onUi {
+      circlesById.remove(id)?.remove()
+    }
+  }
+
+  fun clearCircles() {
+    onUi {
+      circlesById.values.forEach { it.remove() }
+    }
+    circlesById.clear()
+    pendingCircles.clear()
+  }
+
+  fun destroyInternal() {
     onUi {
       markerOptions.cancelAllJobs()
       clearMarkers()
       clearPolylines()
       clearPolygons()
+      clearCircles()
       locationHandler.stop()
       googleMap?.apply {
         setOnCameraMoveStartedListener(null)
         setOnCameraMoveListener(null)
         setOnCameraIdleListener(null)
         setOnMarkerClickListener(null)
+        setOnPolylineClickListener(null)
+        setOnPolygonClickListener(null)
+        setOnCircleClickListener(null)
         setOnMapClickListener(null)
       }
-      this@GoogleMapsViewImpl.onDestroy()
       googleMap = null
+      mapView?.apply {
+        onPause()
+        onStop()
+        onDestroy()
+        removeAllViews()
+      }
+      super.removeAllViews()
       reactContext.removeLifecycleEventListener(this)
     }
   }
@@ -684,19 +799,19 @@ class GoogleMapsViewImpl(
   override fun onHostResume() {
     onUi {
       locationHandler.start()
-      this@GoogleMapsViewImpl.onResume()
+      mapView?.onResume()
     }
   }
 
   override fun onHostPause() {
     onUi {
       locationHandler.stop()
-      this@GoogleMapsViewImpl.onPause()
+      mapView?.onPause()
     }
   }
 
   override fun onHostDestroy() {
-    clearAll()
+    destroyInternal()
   }
 
   override fun onMarkerClick(marker: Marker): Boolean {
@@ -704,6 +819,18 @@ class GoogleMapsViewImpl(
     return true
   }
 
+  override fun onPolylineClick(polyline: Polyline) {
+    onPolylinePress?.invoke(polyline.tag?.toString() ?: "unknown")
+  }
+
+  override fun onPolygonClick(polygon: Polygon) {
+    onPolygonPress?.invoke(polygon.tag?.toString() ?: "unknown")
+  }
+
+  override fun onCircleClick(circle: Circle) {
+    onCirclePress?.invoke(circle.tag?.toString() ?: "unknown")
+  }
+
   override fun onMapClick(coordinates: LatLng) {
     onMapPress?.invoke(
       RNLatLng(coordinates.latitude, coordinates.longitude),