archive-gh-me/google-map-react
1
0
Fork 0
mirror of https://github.com/google-map-react/google-map-react.git synced 2025-12-08 18:26:32 +00:00
Code Issues Projects Releases Wiki Activity

Added all google maps api libraries to api loader (#921)

Browse Source 
* Added all google maps api libraries to api loader

Supports places, visualization, places, and geomerty libs.
keeps support for previous heatMapLibrary prop to avoid breaking older usage.

* add libraries to props of GoogleMap

* Update google_map.js

* add warning about heatMapLibrary

* heatmap depreaction, clean libraries, docs

* clean up google map prop
This commit is contained in:
aviyadeveloper 2020-08-31 02:27:50 +02:00 committed by GitHub
parent d3f258de1c
commit 1718a4a941
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
API.md
View File

@ -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
<GoogleMapReact
bootstrapURLKeys={{ key: [YOUR_KEY] }}
bootstrapURLKeys={{
key: [YOUR_KEY],
libraries:['visualization']
}}
zoom={zoom}
center={center}
heatmapLibrary={true}
heatmap={{data}}
>
{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
<GoogleMapReact
bootstrapURLKeys={{
key: [YOUR_KEY],
libraries:['places', 'geometry', 'drawing', 'visualization']
}}
{markers}
</GoogleMapReact>
```

24
src/loaders/google_map_loader.js
View File

@ -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}`,
() =>