diff --git a/API.md b/API.md index 70410e4..7547b6e 100644 --- a/API.md +++ b/API.md @@ -16,7 +16,6 @@ Example: key: API_KEY, language: 'ru', region: 'ru', - libraries:['places'], ...otherUrlParams, }} > @@ -351,7 +350,7 @@ For more details see the [google documentation](https://developers.google.com/ma ### Heatmap Layer -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. +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. The typescript interface for the heatmap prop is as follows: ```typescript @@ -373,38 +372,20 @@ interface heatmapProp { ```javascript - {markers} - + bootstrapURLKeys={{ key: [YOUR_KEY] }} + zoom={zoom} + center={center} + heatmapLibrary={true} + heatmap={{data}} + > + {markers} + ``` #### Important Note -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. +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. ### 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/CHANGELOG.md b/CHANGELOG.md index c438289..b3edfd9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ ## [2.1.0] - 2020-08-31 - #921 Add support to libraries: places, visualization, places, and geomerty. -And keeps support for previous heatmapLibrary prop to avoid breaking older usage. +And keeps support for previous heatMapLibrary prop to avoid breaking older usage. ## [2.0.4] - 2020-07-30 diff --git a/src/loaders/google_map_loader.js b/src/loaders/google_map_loader.js index e0158af..f718346 100644 --- a/src/loaders/google_map_loader.js +++ b/src/loaders/google_map_loader.js @@ -58,32 +58,12 @@ 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 } = bootstrapURLKeys; + const libraries = heatmapLibrary ? '&libraries=visualization' : ''; $script_( `${DEFAULT_URL}${API_PATH}${params}${libraries}`,