Skip to content

Commit 755194a

Browse files
authored
docs(google-maps): remove synchronous loading example (#27394)
* docs(google-maps): remove synchronous loading example fixes #27374 * fixup! docs(google-maps): remove synchronous loading example * fixup! docs(google-maps): remove synchronous loading example
1 parent c03b5f4 commit 755194a

File tree

1 file changed

+7
-23
lines changed

1 file changed

+7
-23
lines changed

src/google-maps/README.md

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,11 @@ File any bugs against the [angular/components repo](https://github.com/angular/c
88

99
To install, run `npm install @angular/google-maps`.
1010

11-
## Loading the API
12-
13-
- First follow [these steps](https://developers.google.com/maps/gmp-get-started) to get an API key that can be used to load Google Maps.
14-
- Load the [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API).
15-
- The Google Maps JavaScript API must be loaded before the `GoogleMap` component.
16-
17-
```html
18-
<!-- index.html -->
19-
<!doctype html>
20-
<head>
21-
...
22-
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
23-
</head>
24-
```
11+
## Getting the API Key
2512

26-
**Note:**
27-
If you're using the `<map-heatmap-layer>` directive, you also have to include the `visualization`
28-
library when loading the Google Maps API. To do so, you can add `&libraries=visualization` to the
29-
script URL:
13+
Follow [these steps](https://developers.google.com/maps/gmp-get-started) to get an API key that can be used to load Google Maps.
3014

31-
```html
32-
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization"></script>
33-
```
34-
35-
## Lazy Loading the API
15+
## Loading the API
3616

3717
The API can be loaded when the component is actually used by using the Angular HttpClient jsonp
3818
method to make sure that the component doesn't load until after the API has loaded.
@@ -79,6 +59,10 @@ export class GoogleMapsDemoComponent {
7959
apiLoaded: Observable<boolean>;
8060

8161
constructor(httpClient: HttpClient) {
62+
// If you're using the `<map-heatmap-layer>` directive, you also have to include the `visualization` library
63+
// when loading the Google Maps API. To do so, you can add `&libraries=visualization` to the script URL:
64+
// https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization
65+
8266
this.apiLoaded = httpClient.jsonp('https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE', 'callback')
8367
.pipe(
8468
map(() => true),

0 commit comments

Comments
 (0)