feat(google-maps): toggle marker tap panning and info windows (#376)

* feat(google-maps): toggle marker tap panning

* feat(google-maps): marker event readme

* Update packages/google-maps/index.android.ts

* chore: update variable name

* fix: readme

Author: herefishyfish

packages/google-maps/README.md

@@ -313,6 +313,7 @@ The following properties are available for adjusting the camera view on initiali
 `zoom` | `number` | Zoom level (described [here](https://developers.google.com/maps/documentation/javascript/tutorial#zoom-levels))
 `bearing` | `number` | Bearing, in degrees
 `tilt` | `number` | Tilt, in degrees
+`preventDefaultMarkerTapBehavior` | `boolean` | Prevents the default marker event handling (panning/info windows) done by Google Maps
 
 #### Events
 

packages/google-maps/common.ts

@@ -35,6 +35,11 @@ export const tiltProperty = new Property<MapViewBase, number>({
 	name: 'tilt',
 });
 
+export const preventDefaultMarkerTapBehaviorProperty = new Property<MapViewBase, boolean>({
+	name: 'preventDefaultMarkerTapBehavior',
+	defaultValue: false,
+});
+
 export class MapViewBase extends ContentView {
 	static readyEvent = 'ready';
 	static mapTapEvent = 'mapTap';
@@ -73,10 +78,12 @@ export class MapViewBase extends ContentView {
 	zoom: number;
 	bearing: number;
 	tilt: number;
+	preventDefaultMarkerTapBehavior: boolean;
 }
 
 latProperty.register(MapViewBase);
 lngProperty.register(MapViewBase);
 zoomProperty.register(MapViewBase);
 bearingProperty.register(MapViewBase);
 tiltProperty.register(MapViewBase);
+preventDefaultMarkerTapBehaviorProperty.register(MapViewBase);

packages/google-maps/index.android.ts

@@ -45,7 +45,7 @@ import {
 	Style,
 	TileOverlayOptions,
 } from '.';
-import { bearingProperty, JointType, latProperty, lngProperty, MapType, MapViewBase, tiltProperty, zoomProperty } from './common';
+import { bearingProperty, preventDefaultMarkerTapBehaviorProperty, JointType, latProperty, lngProperty, MapType, MapViewBase, tiltProperty, zoomProperty } from './common';
 
 import { intoNativeMarkerOptions, intoNativeCircleOptions, intoNativePolygonOptions, intoNativeGroundOverlayOptions, intoNativePolylineOptions, hueFromColor, intoNativeJointType, toJointType, intoNativeTileOverlayOptions, deserialize, serialize } from './utils';
 
@@ -185,13 +185,6 @@ export class MapView extends MapViewBase {
 										marker: Marker.fromNative(marker),
 									});
 									break;
-								case 'click':
-									ref?.get?.().notify(<MarkerTapEvent>{
-										eventName: MapView.markerTapEvent,
-										object: ref?.get?.(),
-										marker: Marker.fromNative(marker),
-									});
-									break;
 							}
 						},
 						onMapClickEvent(latLng: com.google.android.gms.maps.model.LatLng, isLongClick: boolean) {
@@ -369,6 +362,7 @@ export class MapView extends MapViewBase {
 						tilt: owner.tilt,
 						zoom: owner.zoom,
 					});
+					owner._setMapClickListener(map, owner.preventDefaultMarkerTapBehavior);
 				}
 
 				ref.get?.().notify?.({
@@ -504,6 +498,12 @@ export class MapView extends MapViewBase {
 		}
 	}
 
+	[preventDefaultMarkerTapBehaviorProperty.setNative](value) {
+		if (this._map) {
+			this._setMapClickListener(this._map, value);
+		}
+	}
+
 	_updateCamera(
 		map,
 		owner: {
@@ -555,6 +555,22 @@ export class MapView extends MapViewBase {
 			}
 		}
 	}
+
+	_setMapClickListener(map, preventDefaultMarkerTapBehavior) {
+		map.setOnMarkerClickListener(
+			new com.google.android.gms.maps.GoogleMap.OnMarkerClickListener({
+				onMarkerClick: (marker) => {
+					this.notify(<MarkerTapEvent>{
+						eventName: MapView.markerTapEvent,
+						object: this,
+						marker: Marker.fromNative(marker),
+					});
+
+					return preventDefaultMarkerTapBehavior;
+				},
+			})
+		);
+	}
 }
 
 export class IndoorLevel implements IIndoorLevel {

packages/google-maps/index.ios.ts

@@ -375,11 +375,17 @@ class GMSMapViewDelegateImpl extends NSObject implements GMSMapViewDelegate {
 	}
 
 	mapViewDidTapMarker(mapView: GMSMapView, marker: GMSMarker): boolean {
-		this._owner?.get?.().notify(<EventData & MarkerTapEvent>{
-			eventName: MapView.markerTapEvent,
-			object: this._owner?.get?.(),
-			marker: Marker.fromNative(marker),
-		});
+		const owner = this._owner?.get?.();
+		if (owner) {
+			owner.notify(<EventData & MarkerTapEvent>{
+				eventName: MapView.markerTapEvent,
+				object: owner,
+				marker: Marker.fromNative(marker),
+			});
+
+			return owner.preventDefaultMarkerTapBehavior;
+		}
+
 		return false;
 	}