mirror of
https://github.com/google-map-react/google-map-react.git
synced 2025-12-08 18:26:32 +00:00
Allow add any keys to google bootstrap url
This commit is contained in:
parent
13277fcb16
commit
862a6e85c4
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user