angulargoogle-mapsangular-google-maps

Angular google maps HeatmapLayer undefined


I am trying to create a heat map but on running the app it does show me a map but the heatLayer doesn't show up and in the console i get an error message saying heatmapLayer undefined. On further investigating the issue i see that on console.log(google.map) it gives me different objects but visualizing object does not exist in it. I have followed this stackblitz. Here is the code

Html

<div class="fuse-card auto-width p-16">
    <div #gmap class="map-heat-container" style="height: 500px; width: 500px"></div>
</div>

Component

 map: google.maps.Map;
 heatmap: google.maps.visualization.HeatmapLayer;   
ngOnInit() {
this.map = new google.maps.Map(this.gmapElement.nativeElement, {
              zoom: 3.5,
              center: new google.maps.LatLng(31.5204, 74.3587),
              mapTypeId: google.maps.MapTypeId.SATELLITE,
              zoomControl: false,
              streetViewControl: false,
              disableDefaultUI: true,
            });
            console.log(google.maps.visualization);
            this.heatmap = new google.maps.visualization.HeatmapLayer({
              data: this.getPoints(),
              map: this.map,
            });
  } 

  getPoints() {
    // create points
    let markers: Marker[] = [
      { lat: -23, lng: -46 },
      { lat: -24, lng: -53 },
      { lat: -23, lng: -46 },
    ];

    // transforming points
    return markers.map((point) => new google.maps.LatLng(point.lat, point.lng));
  }

I have added libraries: ["visualization"] with my google apiKey in module but still it doesn't work

 AgmCoreModule.forRoot({
      apiKey: "myApiKey",
      libraries: ["visualization"],
    }),

Solution

  • The problem was with maps cdn inside index.html file. The cdn contains libraries of geometry and places but not of visualization. So i updated that cdn and ran the app again and it worked. But the visualization library should be first one and imported before geometry and places for it to take effect.

    <script
        src="https://maps.googleapis.com/maps/api/js?key=xxxxw&libraries=visualization&geometry&places&language=en">
    </script>