Merge pull request #5 from vitorebatista/key-children

Correct use of Google API Key. Considered children into maps image
yelled3 · May 27, 2017 · c57bcc2 · c57bcc2
2 parents 0a4c7ca + 66574ea
commit c57bcc2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git a/Example/MapExample.js b/Example/MapExample.js
@@ -17,7 +17,8 @@ const mockLocation = {
   size: {
     width: 300,
     height: 550
-  }
+  },
+  key: ''//'AAAAAAAAAA-BBBBBBBBBBBBBBBBB-CCCCCCCCCC'
 }
 
 
@@ -30,7 +31,9 @@ class MapExample extends Component {
     return (
         <View style={styles.content}>
           <Text style={styles.title} >Google Static Maps</Text>
-          <GoogleStaticMap style={styles.map} {...mockLocation} />
+          <GoogleStaticMap style={styles.map} {...mockLocation} >
+            <Text>Something here!</Text>
+          </GoogleStaticMap>
         </View>
     );
   }

diff --git a/GoogleStaticMap.js b/GoogleStaticMap.js
@@ -109,7 +109,9 @@ class GoogleStaticMap extends Component {
     /**
      * Add a marker on the center
      */
-    hasCenterMarker: React.PropTypes.bool
+    hasCenterMarker: React.PropTypes.bool,
+
+    key: React.PropTypes.string.isRequired,
   };
 
   static defaultProps = {
@@ -124,7 +126,9 @@ class GoogleStaticMap extends Component {
       <Image
         style={[this.props.style, this.props.size]}
         source={{uri: this.staticMapUrl}}
-      />
+      >
+      {this.props.children}
+      </Image>
     );
   }
 
@@ -141,7 +145,7 @@ class GoogleStaticMap extends Component {
 
     const {width, height} = size;
     const rootUrl = this.constructor.RootUrl;
-
+    
     return `${rootUrl}?center=${latitude},${longitude}&zoom=${zoom}&scale=${scale}&size=${width}x${height}&maptype=${mapType}&format=${format}&${this.markerParams}&${this.apiKeyParam}`;
   }
 
@@ -157,7 +161,8 @@ class GoogleStaticMap extends Component {
   }
 
   get apiKeyParam() {
-    const apiKey = this.constructor.ApiKey;
+    const apiKey = this.props.key;
+
     return apiKey ? `key=${apiKey}` : '';
   }
 }

diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ class MapExample extends Component {
             longitude={'34.7748068'}
             zoom={13}
             size={{ width: 300, height: 550 }}
+            key={'YOUR-KEY-HERE'}
         />
     );
   }
@@ -41,7 +42,7 @@ class MapExample extends Component {
 |**`format`**|`string`|'png', 'png32', 'jpg', 'gif', 'jpg-baseline'. use the `GoogleStaticMap.ImageFormats` enum. default is `png`.|
 |**`mapType`**|`string`|'roadmap', 'satellite', 'terrain', 'hybrid'. use the `GoogleStaticMap.MapTypes` enum. default is `roadmap`.|
 |**`hasCenterMarker`**|`bool`|add a marker on the center. default is `true`.|
-
+|**`key`**|`string`|Google API Key|
 and also any `Image.propTypes`. 
 
 see: http://facebook.github.io/react-native/docs/image.html#props

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-google-static-map",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A wrapper for Google's Static Maps",
   "main": "GoogleStaticMap.js",
   "repository": {