diff --git a/API.md b/API.md index 7547b6e..2064b45 100644 --- a/API.md +++ b/API.md @@ -16,6 +16,7 @@ Example: key: API_KEY, language: 'ru', region: 'ru', + libraries:['places'], ...otherUrlParams, }} > @@ -350,7 +351,7 @@ For more details see the [google documentation](https://developers.google.com/ma ### Heatmap Layer -To use the heatmap layer, add `heatmapLibrary={true}` to add the visualizations library, and provide the data&configuration for the heatmap in `heatmap` as props. +To use the heatmap layer, add `visualization` to the libraries property array on `bootstrapURLKeys` and provide the data & configuration for the heatmap in `heatmap` as props. The typescript interface for the heatmap prop is as follows: ```typescript @@ -372,10 +373,12 @@ interface heatmapProp { ```javascript {markers} @@ -384,8 +387,24 @@ interface heatmapProp { #### Important Note -If you have multiple `GoogleMapReact` components in project and you want to use heatmap layer so provide `heatmapLibrary={true}` for all `GoogleMapReact` components so component will load heatmap library at the beginning with google map api. +If you have multiple `GoogleMapReact` components in project and you want to use heatmap layer provide `libraries:['visualization']` to `bootstrapURLKeys` so that the visualization library will be loaded with the google map api. ### Localizing the Map This is done by setting bootstrapURLKeys.[language](https://developers.google.com/maps/documentation/javascript/localization#Language) and bootstrapURLKeys.[region](https://developers.google.com/maps/documentation/javascript/localization#Region). Also notice that setting region to 'cn' is required when using the map from within China, see [google documentation](https://developers.google.com/maps/documentation/javascript/localization#GoogleMapsChina) for more info. Setting 'cn' will result in use of the specific API URL for China. + + +### Libraries + +If you want to include additional libraries to load with the maps api, indicate them in the libraries property of the `bootstrapURLKeys` object. + +Example: +```JSX + +``` diff --git a/src/loaders/google_map_loader.js b/src/loaders/google_map_loader.js index f718346..3f15142 100644 --- a/src/loaders/google_map_loader.js +++ b/src/loaders/google_map_loader.js @@ -58,13 +58,31 @@ export default (bootstrapURLKeys, heatmapLibrary) => { } } + // Support for older version using heatMapLibrary option + if (heatMapLibrary) { + bootstrapURLKeys.libraries + ? bootstrapURLKeys.libraries.append('visualization') + : (bootstrapURLKeys['libraries'] = ['visualization']); + console.warn( + "heatMapLibrary will be deprecated in the future. Please use bootstrapURLKeys.libraries property instead (libraries=['visualization'])." + ); + } + + // clean unknown and remove duplicates + const googleMapsLibs = ['places', 'drawing', 'geometry', 'visualization']; + if (bootstrapURLKeys.libraries) { + bootstrapURLKeys.libraries = bootstrapURLKeys.libraries.filter( + (lib, i) => + bootstrapURLKeys.libraries.indexOf(lib) === i && + googleMapsLibs.includes(lib) + ); + } + const params = Object.keys(bootstrapURLKeys).reduce( (r, key) => `${r}&${key}=${bootstrapURLKeys[key]}`, '' ); - - const libraries = heatmapLibrary ? '&libraries=visualization' : ''; - + $script_( `${DEFAULT_URL}${API_PATH}${params}${libraries}`, () =>