add animateCamera and fix animateToCenter

Author: kasajei

docs/stories/index.js

@@ -8,7 +8,8 @@ import { action } from '@storybook/addon-actions';
 storiesOf('MapView', module)
   .add('basic', () => (
     <View style={styles.container}>
-      <MapView region={{ latitude: 48.86, longitude: 2.34 }} />
+      <MapView defaultZoom={15} region={{ latitude: 48.86, longitude: 2.34 }} />
+      <MapView defaultZoom={10} region={{ latitude: 48.86, longitude: 2.34 }} />
     </View>
   ))
   .add('onRegionChangeComplete', () => (
@@ -48,26 +49,47 @@ storiesOf('MapView', module)
 storiesOf('Marker', module)
   .add('basic', () => (
     <View style={styles.container}>
-      <MapView region={{ latitude: 48.88, longitude: 2.32 }}>
+      <MapView ref={map => (this.map = map)} region={{ latitude: 48.88, longitude: 2.32 }}>
         <MapView.Marker
           title="BAM"
           description="Shape the future of mobile with us"
           coordinate={{ latitude: 48.8828463, longitude: 2.3229091 }}
-          onPress={action('onPresss')}
+          onPress={() => {
+            this.map.animateToRegion({
+              latitude: 48.8828463,
+              longitude: 2.3229091,
+              latitudeDelta: 0.1,
+              longitudeDelta: 0.1,
+            });
+          }}
+        />
+        <MapView.Marker
+          title="BAM"
+          description="Shape the future of mobile with us"
+          coordinate={{ latitude: 48.8828463, longitude: 2.3 }}
+          onPress={() => {
+            this.map.animateCamera({
+              zoom: 20,
+              center: {
+                lat: 48.8828463,
+                lng: 2.3,
+              },
+            });
+          }}
         />
       </MapView>
     </View>
   ))
   .add('Callout', () => (
     <View style={styles.container}>
-      <MapView region={{ latitude: 48.88, longitude: 2.32 }}>
+      <MapView ref={map => (this.map = map)} region={{ latitude: 48.88, longitude: 2.32 }}>
         <MapView.Marker
           title="BAM"
           ref={marker => (this.marker = marker)}
           description="Shape the future of mobile with us"
           coordinate={{ latitude: 48.8828463, longitude: 2.3229091 }}
           onPress={() => {
-            this.marker.showCallout();
+            this.marker1.showCallout();
           }}>
           <MapView.Callout onPress={action('onPress callout')}>
             <View style={{ padding: 10 }}>

src/index.js

@@ -19,6 +19,11 @@ class MapView extends Component {
     this.props.onMapReady && this.props.onMapReady();
   };
 
+  animateCamera(camera) {
+    this.setState({ zoom: camera.zoom });
+    this.setState({ center: camera.center });
+  }
+
   animateToRegion(coordinates) {
     this.setState({ center: { lat: coordinates.latitude, lng: coordinates.longitude } });
   }
@@ -35,38 +40,44 @@ class MapView extends Component {
   };
 
   render() {
-    const { region, initialRegion, onRegionChange, onPress, options } = this.props;
+    const { region, initialRegion, onRegionChange, onPress, options, defaultZoom } = this.props;
     const { center } = this.state;
     const style = this.props.style || styles.container;
 
-    const centerProps = region
+    const googleMapProps = center
+      ? { center }
+      : region
       ? {
           center: {
             lat: region.latitude,
             lng: region.longitude,
           },
         }
-      : center
-      ? { center }
       : {
           defaultCenter: {
             lat: initialRegion.latitude,
             lng: initialRegion.longitude,
           },
         };
     const zoom =
-      region && region.latitudeDelta
+      defaultZoom ||
+      (region && region.latitudeDelta
         ? Math.round(Math.log(360 / region.latitudeDelta) / Math.LN2)
         : initialRegion && initialRegion.latitudeDelta
         ? Math.round(Math.log(360 / initialRegion.latitudeDelta) / Math.LN2)
-        : 15;
+        : 15);
+    googleMapProps['zoom'] = this.state.zoom ? this.state.zoom : zoom;
     return (
       <View style={style}>
         <GoogleMapContainer
+          ref={map => (this.map = map)}
           handleMapMounted={this.handleMapMounted}
           containerElement={<div style={{ height: '100%' }} />}
           mapElement={<div style={{ height: '100%' }} />}
-          {...centerProps}
+          onZoomChanged={() => {
+            this.setState({ zoom: this.map.getZoom });
+          }}
+          {...googleMapProps}
           onDragStart={onRegionChange}
           onIdle={this.onDragEnd}
           defaultZoom={zoom}