diff --git a/src/google_map.js b/src/google_map.js index f299b41..8892bfb 100644 --- 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 index 8684e9f..e3109cc 100644 --- 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;