Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added all google maps api libraries to api loader #921

Merged
merged 6 commits into from Aug 31, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
27 changes: 23 additions & 4 deletions API.md
Expand Up @@ -16,6 +16,7 @@ Example:
key: API_KEY,
language: 'ru',
region: 'ru',
libraries:['places'],
...otherUrlParams,
}}
>
Expand Down Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -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 changes: 21 additions & 3 deletions src/loaders/google_map_loader.js
Expand Up @@ -58,13 +58,31 @@ export default (bootstrapURLKeys, heatmapLibrary) => {
}
}

// Support for older version using heatMapLibrary option
if (heatMapLibrary) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be heatmapLibrary, got an error.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just found a bunch of bugs while running your code that didn't notice before, please be more careful in the future

Oh boy yeah, ok will be more diligent later.

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}`,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

libraries here is not defined

() =>
Expand Down