add Android support for onPoiClick (react-native-maps#2050)

* add Android support for onPoiClick

* add example of onPoiClick event handling

* lint

* typo

* add support for GM on IOS

* Update docs since onPoiClick is now available on Android and IOS.

Author: julienR2

README.md

@@ -264,7 +264,7 @@ To run examples:
 
 ```bash
 npm i
-npm start 
+npm start
 
 #Android
 npm run run:android
@@ -397,6 +397,12 @@ Enable lite mode on Android with `liteMode` prop. Ideal when having multiple map
 
 ![](http://i.giphy.com/qZ2lAf18s89na.gif)
 
+### On Poi Click (Google Maps Only)
+
+Poi are clickable, you can catch the event to get its information (usually to get the full detail from Google Place using the placeId).
+
+![](https://media.giphy.com/media/3480VsCKnHr31uCLU3/giphy.gif)
+
 ### Animated Region
 
 The MapView can accept an `AnimatedRegion` value as its `region` prop. This allows you to utilize the Animated API to control the map's center and zoom.

docs/mapview.md

@@ -51,6 +51,7 @@ To access event data, you will need to use `e.nativeEvent`. For example, `onPres
 | `onUserLocationChange` | `{ coordinate: LatLng }` | Callback that is called when the underlying map figures our users current location. Make sure **showsUserLocation** is set to *true* and that the provider is `"google"`.
 | `onPress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user taps on the map.
 | `onPanDrag` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user presses and drags the map. **NOTE**: for iOS `scrollEnabled` should be set to false to trigger the event
+| `onPoiClick` | `{ coordinate: LatLng, position: Point, placeId: string, name: string }` | Callback that is called when user click on a POI.
 | `onLongPress` | `{ coordinate: LatLng, position: Point }` | Callback that is called when user makes a "long press" somewhere on the map.
 | `onMarkerPress` |  | Callback that is called when a marker on the map is tapped by the user.
 | `onMarkerSelect` |  | Callback that is called when a marker on the map becomes selected. This will be called when the callout for that marker is about to be shown. **Note**: iOS only.

example/App.js

@@ -40,6 +40,7 @@ import MapKml from './examples/MapKml';
 import BugMarkerWontUpdate from './examples/BugMarkerWontUpdate';
 import ImageOverlayWithAssets from './examples/ImageOverlayWithAssets';
 import ImageOverlayWithURL from './examples/ImageOverlayWithURL';
+import OnPoiClick from './examples/OnPoiClick';
 
 const IOS = Platform.OS === 'ios';
 const ANDROID = Platform.OS === 'android';
@@ -158,6 +159,7 @@ class App extends React.Component {
       [BugMarkerWontUpdate, 'BUG: Marker Won\'t Update (Android)', true],
       [ImageOverlayWithAssets, 'Image Overlay Component with Assets', true],
       [ImageOverlayWithURL, 'Image Overlay Component with URL', true],
+      [OnPoiClick, 'On Poi Click', true],
     ]
     // Filter out examples that are not yet supported for Google Maps on iOS.
     .filter(example => ANDROID || (IOS && (example[2] || !this.state.useGoogleMaps)))

example/examples/OnPoiClick.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Dimensions,
+} from 'react-native';
+
+import MapView, { Callout, Marker, ProviderPropType } from 'react-native-maps';
+
+const { width, height } = Dimensions.get('window');
+
+const ASPECT_RATIO = width / height;
+const LATITUDE = 37.78825;
+const LONGITUDE = -122.4324;
+const LATITUDE_DELTA = 0.0922;
+const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
+
+class OnPoiClick extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      region: {
+        latitude: LATITUDE,
+        longitude: LONGITUDE,
+        latitudeDelta: LATITUDE_DELTA,
+        longitudeDelta: LONGITUDE_DELTA,
+      },
+      poi: null,
+    };
+
+    this.onPoiClick = this.onPoiClick.bind(this);
+  }
+
+  onPoiClick(e) {
+    const poi = e.nativeEvent;
+
+    this.setState({
+      poi,
+    });
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <MapView
+          provider={this.props.provider}
+          style={styles.map}
+          initialRegion={this.state.region}
+          onPoiClick={this.onPoiClick}
+        >
+          {this.state.poi && (
+            <Marker
+              coordinate={this.state.poi.coordinate}
+            >
+              <Callout>
+                <View>
+                  <Text>Place Id: { this.state.poi.placeId }</Text>
+                  <Text>Name: { this.state.poi.name }</Text>
+                </View>
+              </Callout>
+            </Marker>
+          )}
+        </MapView>
+      </View>
+    );
+  }
+}
+
+OnPoiClick.propTypes = {
+  provider: ProviderPropType,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  map: {
+    ...StyleSheet.absoluteFillObject,
+  },
+});
+
+export default OnPoiClick;

index.d.ts

@@ -89,6 +89,7 @@ declare module "react-native-maps" {
         onMarkerDragStart?: (value: { coordinate: LatLng, position: Point }) => void;
         onMarkerDrag?: (value: { coordinate: LatLng, position: Point }) => void;
         onMarkerDragEnd?: (value: { coordinate: LatLng, position: Point }) => void;
+        onPoiClick?: (value: {coordinate: LatLng, position: Point, placeId: string, name: string }) => void;
         minZoomLevel?: number;
         maxZoomLevel?: number;
         kmlSrc?: string;

lib/android/src/main/java/com/airbnb/android/react/maps/AirMapManager.java

@@ -322,7 +322,8 @@ public Map getExportedCustomDirectEventTypeConstants() {
         "onMarkerDrag", MapBuilder.of("registrationName", "onMarkerDrag"),
         "onMarkerDragEnd", MapBuilder.of("registrationName", "onMarkerDragEnd"),
         "onPanDrag", MapBuilder.of("registrationName", "onPanDrag"),
-        "onKmlReady", MapBuilder.of("registrationName", "onKmlReady")
+        "onKmlReady", MapBuilder.of("registrationName", "onKmlReady"),
+        "onPoiClick", MapBuilder.of("registrationName", "onPoiClick")
     ));
 
     return map;

lib/android/src/main/java/com/airbnb/android/react/maps/AirMapView.java

@@ -43,6 +43,7 @@
 import com.google.android.gms.maps.model.LatLngBounds;
 import com.google.android.gms.maps.model.Marker;
 import com.google.android.gms.maps.model.MarkerOptions;
+import com.google.android.gms.maps.model.PointOfInterest;
 import com.google.android.gms.maps.model.Polygon;
 import com.google.android.gms.maps.model.Polyline;
 import com.google.maps.android.data.kml.KmlContainer;
@@ -64,7 +65,7 @@
 import static android.support.v4.content.PermissionChecker.checkSelfPermission;
 
 public class AirMapView extends MapView implements GoogleMap.InfoWindowAdapter,
-    GoogleMap.OnMarkerDragListener, OnMapReadyCallback {
+    GoogleMap.OnMarkerDragListener, OnMapReadyCallback, GoogleMap.OnPoiClickListener {
   public GoogleMap map;
   private KmlLayer kmlLayer;
   private ProgressBar mapLoadingProgressBar;
@@ -178,6 +179,7 @@ public void onMapReady(final GoogleMap map) {
     this.map = map;
     this.map.setInfoWindowAdapter(this);
     this.map.setOnMarkerDragListener(this);
+    this.map.setOnPoiClickListener(this);
 
     manager.pushEvent(context, this, "onMapReady", new WritableNativeMap());
 
@@ -806,6 +808,16 @@ public void onMarkerDragEnd(Marker marker) {
     manager.pushEvent(context, markerView, "onDragEnd", event);
   }
 
+  @Override
+  public void onPoiClick(PointOfInterest poi) {
+    WritableMap event = makeClickEventData(poi.latLng);
+
+    event.putString("placeId", poi.placeId);
+    event.putString("name", poi.name);
+
+    manager.pushEvent(context, this, "onPoiClick", event);
+  }
+
   private ProgressBar getMapLoadingProgressBar() {
     if (this.mapLoadingProgressBar == null) {
       this.mapLoadingProgressBar = new ProgressBar(getContext());

lib/components/MapView.js

@@ -382,6 +382,11 @@ const propTypes = {
    */
   onPanDrag: PropTypes.func,
 
+  /**
+   * Callback that is called when user click on a POI
+   */
+  onPoiClick: PropTypes.func,
+
   /**
    * Callback that is called when a marker on the map is tapped by the user.
    */

lib/ios/AirGoogleMaps/AIRGoogleMap.h

@@ -28,6 +28,7 @@
 @property (nonatomic, copy) RCTBubblingEventBlock onUserLocationChange;
 @property (nonatomic, copy) RCTBubblingEventBlock onMarkerPress;
 @property (nonatomic, copy) RCTBubblingEventBlock onChange;
+@property (nonatomic, copy) RCTBubblingEventBlock onPoiClick;
 @property (nonatomic, copy) RCTDirectEventBlock onRegionChange;
 @property (nonatomic, copy) RCTDirectEventBlock onRegionChangeComplete;
 @property (nonatomic, strong) NSMutableArray *markers;
@@ -57,6 +58,7 @@
 - (void)didLongPressAtCoordinate:(CLLocationCoordinate2D)coordinate;
 - (void)didChangeCameraPosition:(GMSCameraPosition *)position;
 - (void)idleAtCameraPosition:(GMSCameraPosition *)position;
+- (void)didTapPOIWithPlaceID:(NSString *)placeID name:(NSString *) name location:(CLLocationCoordinate2D) location;
 
 + (MKCoordinateRegion)makeGMSCameraPositionFromMap:(GMSMapView *)map andGMSCameraPosition:(GMSCameraPosition *)position;
 + (GMSCameraPosition*)makeGMSCameraPositionFromMap:(GMSMapView *)map andMKCoordinateRegion:(MKCoordinateRegion)region;

lib/ios/AirGoogleMaps/AIRGoogleMap.m

@@ -272,6 +272,20 @@ - (void)didChangeCameraPosition:(GMSCameraPosition *)position {
   if (self.onChange) self.onChange(event);
 }
 
+- (void)didTapPOIWithPlaceID:(NSString *)placeID
+                        name:(NSString *)name
+                    location:(CLLocationCoordinate2D)location {
+  id event = @{@"placeId": placeID,
+               @"name": name,
+               @"coordinate": @{
+                   @"latitude": @(location.latitude),
+                   @"longitude": @(location.longitude)
+                   }
+               };
+
+  if (self.onPoiClick) self.onPoiClick(event);
+}
+
 - (void)idleAtCameraPosition:(GMSCameraPosition *)position {
   id event = @{@"continuous": @NO,
                @"region": regionAsJSON([AIRGoogleMap makeGMSCameraPositionFromMap:self andGMSCameraPosition:position]),
@@ -456,7 +470,7 @@ + (NSString *)GetIconUrl:(GMUPlacemark *) marker parser:(GMUKMLParser *) parser
       }
     }
   }
-  
+
   return marker.style.iconUrl;
 }
 
@@ -465,28 +479,28 @@ - (NSString *)KmlSrc {
 }
 
 - (void)setKmlSrc:(NSString *)kmlUrl {
-    
+
   _kmlSrc = kmlUrl;
-  
+
   NSURL *url = [NSURL URLWithString:kmlUrl];
   NSData *urlData = nil;
-  
+
   if ([url isFileURL]) {
     urlData = [NSData dataWithContentsOfURL:url];
   } else {
     urlData = [[NSFileManager defaultManager] contentsAtPath:kmlUrl];
   }
-  
+
   GMUKMLParser *parser = [[GMUKMLParser alloc] initWithData:urlData];
   [parser parse];
-  
+
   NSUInteger index = 0;
   NSMutableArray *markers = [[NSMutableArray alloc]init];
 
   for (GMUPlacemark *place in parser.placemarks) {
-        
+
     CLLocationCoordinate2D location =((GMUPoint *) place.geometry).coordinate;
-    
+
     AIRGoogleMapMarker *marker = (AIRGoogleMapMarker *)[[AIRGoogleMapMarkerManager alloc] view];
     if (!marker.bridge) {
       marker.bridge = _bridge;
@@ -499,9 +513,9 @@ - (void)setKmlSrc:(NSString *)kmlUrl {
     marker.imageSrc = [AIRGoogleMap GetIconUrl:place parser:parser];
     marker.layer.backgroundColor = [UIColor clearColor].CGColor;
     marker.layer.position = CGPointZero;
-      
+
     [self insertReactSubview:(UIView *) marker atIndex:index];
-    
+
     [markers addObject:@{@"id": marker.identifier,
                          @"title": marker.title,
                          @"description": marker.subtitle,
@@ -513,7 +527,7 @@ - (void)setKmlSrc:(NSString *)kmlUrl {
 
     index++;
   }
-  
+
   id event = @{@"markers": markers};
   if (self.onKmlReady) self.onKmlReady(event);
 }

lib/ios/AirGoogleMaps/AIRGoogleMapManager.m

@@ -71,6 +71,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(onMarkerPress, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onRegionChangeComplete, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onPoiClick, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(mapType, GMSMapViewType)
 RCT_EXPORT_VIEW_PROPERTY(minZoomLevel, CGFloat)
 RCT_EXPORT_VIEW_PROPERTY(maxZoomLevel, CGFloat)
@@ -304,16 +305,16 @@ - (UIView *)view
                              [coordinate[@"latitude"] doubleValue],
                              [coordinate[@"longitude"] doubleValue]
                              );
-  
+
   [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
     id view = viewRegistry[reactTag];
     if (![view isKindOfClass:[AIRGoogleMap class]]) {
       RCTLogError(@"Invalid view returned from registry, expecting AIRMap, got: %@", view);
     } else {
       AIRGoogleMap *mapView = (AIRGoogleMap *)view;
-      
+
       CGPoint touchPoint = [mapView.projection pointForCoordinate:coord];
-      
+
       callback(@[[NSNull null], @{
                    @"x": @(touchPoint.x),
                    @"y": @(touchPoint.y),
@@ -330,16 +331,16 @@ - (UIView *)view
                            [point[@"x"] doubleValue],
                            [point[@"y"] doubleValue]
                            );
-  
+
   [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
     id view = viewRegistry[reactTag];
     if (![view isKindOfClass:[AIRGoogleMap class]]) {
       RCTLogError(@"Invalid view returned from registry, expecting AIRMap, got: %@", view);
     } else {
       AIRGoogleMap *mapView = (AIRGoogleMap *)view;
-      
+
       CLLocationCoordinate2D coordinate = [mapView.projection coordinateForPoint:pt];
-      
+
       callback(@[[NSNull null], @{
                 @"latitude": @(coordinate.latitude),
                 @"longitude": @(coordinate.longitude),
@@ -437,4 +438,12 @@ - (void)mapView:(GMSMapView *)mapView didDragMarker:(GMSMarker *)marker {
   AIRGMSMarker *aMarker = (AIRGMSMarker *)marker;
   [aMarker.fakeMarker didDragMarker:aMarker];
 }
+
+- (void)mapView:(GMSMapView *)mapView
+    didTapPOIWithPlaceID:(NSString *)placeID
+                    name:(NSString *)name
+                location:(CLLocationCoordinate2D)location {
+    AIRGoogleMap *googleMapView = (AIRGoogleMap *)mapView;
+    [googleMapView didTapPOIWithPlaceID:placeID name:name location:location];
+}
 @end