如何使用 angular agm 使用谷歌地图热图功能

Question

I am using angular component @agm/core at https://github.com/SebastianM/angular-google-maps for my latest angular 5 project to show google maps. It works great, and now I want to add google maps heatmap layer from visualization library. I can't figure out how to do it. please help

Answer 1

The following steps worked for me ( to note that I haven't found other examples for this after long search).

1. Install agm and googlemaps types:

npm install @agm/core --save
npm install @types/googlemaps --save-dev

2. Add "google" to types array inside compilerOptions in tsconfig. Eg:

"types": [
    "google"
]

3. When configuring agm module, append the visualization to your api key. Eg:

AgmCoreModule.forRoot({
    apiKey: '...' + '&libraries=visualization'
})

4. In your component html:

<agm-map [latitude]="..." [longitude]="..." (mapReady)="onMapLoad($event)">
</agm-map>

5. In your component ts:

private map: google.maps.Map = null;
private heatmap: google.maps.visualization.HeatmapLayer = null;

...

onMapLoad(mapInstance: google.maps.Map) {
    this.map = mapInstance;

    // here our in other method after you get the coords; but make sure map is loaded

    const coords: google.maps.LatLng[] = ...; // can also be a google.maps.MVCArray with LatLng[] inside    
    this.heatmap = new google.maps.visualization.HeatmapLayer({
        map: this.map,
        data: coords
    });
}

Make sure your map works fine first without the heatmap code (eg, set height, api key etc).

Answer 2

Instead of appending your api key, use the libraries key for AgmCoreModule inside app.module.ts to import the visualization library as so:

AgmCoreModule.forRoot({
  apiKey: environment.googleMapsAPIKey,
  libraries: ['visualization'],
}),

Answer 3

If you see something like:

@types/googlemaps/index.d.ts is not a module

just create a file called index.d.ts directly within your src directory and add the following line:

declare module 'googlemaps';

Answer 4

Thank you André Mantas for your solution

I faced a number of issues related to the 'google' types. So, I added this line to the component controller

declare var google: any;

private map: any;
private heatmap: any;

and it worked