Allow add any keys to google bootstrap url

This commit is contained in:
cybice 2015-10-24 14:05:08 +03:00
parent 13277fcb16
commit 862a6e85c4
2 changed files with 43 additions and 10 deletions

View File

@ -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;

View File

@ -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;