@@ -8,31 +8,11 @@ File any bugs against the [angular/components repo](https://github.com/angular/c
8
8
9
9
To install, run ` npm install @angular/google-maps ` .
10
10
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
25
12
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.
30
14
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
36
16
37
17
The API can be loaded when the component is actually used by using the Angular HttpClient jsonp
38
18
method to make sure that the component doesn't load until after the API has loaded.
@@ -79,6 +59,10 @@ export class GoogleMapsDemoComponent {
79
59
apiLoaded: Observable <boolean >;
80
60
81
61
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
+
82
66
this .apiLoaded = httpClient .jsonp (' https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE' , ' callback' )
83
67
.pipe (
84
68
map (() => true ),
0 commit comments