Skip to content

Latest commit

 

History

History
48 lines (43 loc) · 1.59 KB

README.md

File metadata and controls

48 lines (43 loc) · 1.59 KB

MapHeatmapLayer

The MapHeatmapLayer directive wraps the google.maps.visualization.HeatmapLayer class from the Google Maps Visualization JavaScript API. It displays a heatmap layer on the map when it is a content child of a GoogleMap component. Like GoogleMap, this directive offers an options input as well as a convenience input for passing in the data that is shown on the heatmap.

Example

// google-map-demo.component.ts
import {Component} from '@angular/core';
import {GoogleMap, MapHeatmapLayer} from '@angular/google-maps';

@Component({
  selector: 'google-map-demo',
  templateUrl: 'google-map-demo.html',
  imports: [GoogleMap, MapHeatmapLayer],
})
export class GoogleMapDemo {
  center = {lat: 37.774546, lng: -122.433523};
  zoom = 12;
  heatmapOptions = {radius: 5};
  heatmapData = [
    {lat: 37.782, lng: -122.447},
    {lat: 37.782, lng: -122.445},
    {lat: 37.782, lng: -122.443},
    {lat: 37.782, lng: -122.441},
    {lat: 37.782, lng: -122.439},
    {lat: 37.782, lng: -122.437},
    {lat: 37.782, lng: -122.435},
    {lat: 37.785, lng: -122.447},
    {lat: 37.785, lng: -122.445},
    {lat: 37.785, lng: -122.443},
    {lat: 37.785, lng: -122.441},
    {lat: 37.785, lng: -122.439},
    {lat: 37.785, lng: -122.437},
    {lat: 37.785, lng: -122.435}
  ];
}
<!-- google-map-demo.component.html -->
<google-map height="400px" width="750px" [center]="center" [zoom]="zoom">
  <map-heatmap-layer [data]="heatmapData" [options]="heatmapOptions" />
</google-map>