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"],
}),
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>