Allow add any keys to google bootstrap url

istarkov · istarkov · commit 862a6e85c45d · 2015-10-24T14:05:16.000+03:00
diff --git a/src/google_map.js b/src/google_map.js
@@ -70,6 +70,8 @@ export default class GoogleMap extends Component {
 
   static propTypes = {
     apiKey: PropTypes.string,
+    bootstrapURLKeys: PropTypes.any,
+
     defaultCenter: React.PropTypes.oneOfType([
       PropTypes.array,
       PropTypes.shape({
@@ -152,6 +154,12 @@ export default class GoogleMap extends Component {
     this.childMouseUpTime_ = 0;
 
     if (process.env.NODE_ENV !== 'production') {
+      if (this.props.apiKey) {
+        console.warn( 'GoogleMap: ' +  // eslint-disable-line no-console
+                      'apiKey is deprecated, use ' +
+                      'bootstrapURLKeys={{key: YOUR_API_KEY}} instead.');
+      }
+
       if (this.props.onBoundsChange) {
         console.warn( 'GoogleMap: ' +  // eslint-disable-line no-console
                       'onBoundsChange is deprecated, use ' +
@@ -193,7 +201,12 @@ export default class GoogleMap extends Component {
 
     window.addEventListener('mouseup', this._onChildMouseUp, false);
 
-    this.props.googleMapLoader(this.props.apiKey); // we can start load immediatly
+    const bootstrapURLKeys = {
+      ...(this.props.apiKey && {key: this.props.apiKey}),
+      ...this.props.bootstrapURLKeys,
+    };
+
+    this.props.googleMapLoader(bootstrapURLKeys); // we can start load immediatly
 
     setTimeout(() => { // to detect size
       this._setViewSize();
@@ -307,7 +320,12 @@ export default class GoogleMap extends Component {
 
     this._onBoundsChanged(); // now we can calculate map bounds center etc...
 
-    this.props.googleMapLoader(this.props.apiKey)
+    const bootstrapURLKeys = {
+      ...(this.props.apiKey && {key: this.props.apiKey}),
+      ...this.props.bootstrapURLKeys,
+    };
+
+    this.props.googleMapLoader(bootstrapURLKeys)
     .then(maps => {
       if (!this.mounted_) {
         return;
diff --git a/src/utils/loaders/google_map_loader.js b/src/utils/loaders/google_map_loader.js
@@ -1,9 +1,12 @@
+import find from 'lodash/collection/find';
+import reduce from 'lodash/collection/reduce';
+
 let $script_ = null;
 
 let _loadPromise;
 
 // TODO add libraries language and other map options
-export default function googleMapLoader(apiKey) {
+export default function googleMapLoader(bootstrapURLKeys) {
   if (!$script_) {
     $script_ = require('scriptjs');
   }
@@ -32,15 +35,27 @@ export default function googleMapLoader(apiKey) {
       resolve(window.google.maps);
     };
 
-    const apiKeyString = apiKey ? `&key=${apiKey}` : '';
+    if (process.env.NODE_ENV !== 'production') {
+      if (find(Object.keys(bootstrapURLKeys), 'callback')) {
+        console.error('"callback" key in bootstrapURLKeys is not allowed, ' +
+                      'use onGoogleApiLoaded property instead');
+        throw new Error('"callback" key in bootstrapURLKeys is not allowed, ' +
+                        'use onGoogleApiLoaded property instead');
+      }
+    }
+
+    const queryString = reduce(
+      Object.keys(bootstrapURLKeys),
+      (r, key) => r + `&${key}=${bootstrapURLKeys[key]}`,
+      ''
+    );
 
     $script_(
-      `https://maps.googleapis.com/maps/api/js?callback=_$_google_map_initialize_$_${apiKeyString}`,
-      () => {
-        if (typeof window.google === 'undefined') {
-          reject(new Error('google map initialization error (not loaded)'));
-        }
-      });
+      `https://maps.googleapis.com/maps/api/js?callback=_$_google_map_initialize_$_${queryString}`,
+      () =>
+        typeof window.google === 'undefined' &&
+          reject(new Error('google map initialization error (not loaded)'))
+    );
   });
 
   return _loadPromise;
