Add initialRegion, options props

Author: Minishlink

docs/stories/index.js

@@ -14,7 +14,7 @@ storiesOf('MapView', module)
   .add('onRegionChangeComplete', () => (
     <View style={styles.container}>
       <MapView
-        region={{ latitude: 48.86, longitude: 2.34 }}
+        initialRegion={{ latitude: 48.86, longitude: 2.34 }}
         onRegionChangeComplete={action('onRegionChangeComplete toggled')}
       />
     </View>
@@ -23,6 +23,21 @@ storiesOf('MapView', module)
     <View style={styles.container}>
       <MapView region={{ latitude: 48.86, longitude: 2.34 }} onPress={action('onPress toggled')} />
     </View>
+  ))
+  .add('options', () => (
+    <View style={styles.container}>
+      <MapView
+        initialRegion={{ latitude: 48.86, longitude: 2.34 }}
+        options={{
+          zoomControlOptions: {
+            position: window.google.maps.ControlPosition.RIGHT_CENTER,
+          },
+          mapTypeControl: false,
+          streetViewControl: false,
+          fullscreenControl: false,
+        }}
+      />
+    </View>
   ));
 
 storiesOf('Marker', module).add('basic', () => (

src/index.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, ActivityIndicator, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { withGoogleMap, GoogleMap } from 'react-google-maps';
 import Marker from './Marker';
 import Polyline from './Polyline';
@@ -9,41 +9,49 @@ const GoogleMapContainer = withGoogleMap(props => (
 ));
 
 class MapView extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { center: { lat: props.region.latitude, lng: props.region.longitude } };
-  }
-
   handleMapMounted = map => (this.map = map);
 
   onDragEnd = () => {
-    const center = this.map.getCenter();
-    !!this.props.onRegionChangeComplete &&
-      this.props.onRegionChangeComplete({ latitude: center.lat(), longitude: center.lng() });
+    const { onRegionChangeComplete } = this.props;
+    if (this.map && onRegionChangeComplete) {
+      const center = this.map.getCenter();
+      onRegionChangeComplete({
+        latitude: center.lat(),
+        longitude: center.lng(),
+      });
+    }
   };
 
   render() {
+    const { region, initialRegion, onRegionChange, onPress, options } = this.props;
     const style = this.props.style || styles.container;
 
-    if (!this.state.center) {
-      return (
-        <View style={style}>
-          <ActivityIndicator />
-        </View>
-      );
-    }
+    const centerProps = region
+      ? {
+          center: {
+            lat: region.latitude,
+            lng: region.longitude,
+          },
+        }
+      : {
+          defaultCenter: {
+            lat: initialRegion.latitude,
+            lng: initialRegion.longitude,
+          },
+        };
 
     return (
       <View style={style}>
         <GoogleMapContainer
           handleMapMounted={this.handleMapMounted}
           containerElement={<div style={{ height: '100%' }} />}
           mapElement={<div style={{ height: '100%' }} />}
-          center={this.state.center}
-          onDragStart={!!this.props.onRegionChange && this.props.onRegionChange}
+          {...centerProps}
+          onDragStart={onRegionChange}
           onDragEnd={this.onDragEnd}
           defaultZoom={15}
-          onClick={this.props.onPress}>
+          onClick={onPress}
+          options={options}>
           {this.props.children}
         </GoogleMapContainer>
       </View>