Stay organized with collections Save and categorize content based on your preferences.
Deprecated: The Heatmap Layer functionality in the Maps JavaScript API will no longer be supported. This API was deprecated in May 2025 and be made unavailable in a later version of the Maps JavaScript API, releasing in May 2026. As a replacement for the Heatmap Layer, consider using third-party library integrations like deck.gl, which offers a HeatmapLayer implementation. You can find more information in the deck.gl documentation.
The Heatmap Layer provides client side rendering of heatmaps.
OverviewA heatmap is a visualization used to depict the intensity of data at geographical points. When the Heatmap Layer is enabled, a colored overlay will appear on top of the map. By default, areas of higher intensity will be colored red, and areas of lower intensity will appear green.
Load the visualization libraryThe Heatmap Layer is part of the google.maps.visualization library, and is not loaded by default. The Visualization classes are a self-contained library, separate from the main Maps JavaScript API code. To use the functionality contained within this library, you must first load it using the libraries parameter in the Maps JavaScript API bootstrap URL:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script> Add a Heatmap Layer
To add a Heatmap Layer, you must first create a new HeatmapLayer object, and provide it with some geographic data in the form of an array or an MVCArray[] object. The data may be either a LatLng object or a WeightedLocation object. After instantiating the HeatmapLayer object, add it to the map by calling the setMap() method.
The following example adds 14 data points to a map of San Francisco.
/* Data points defined as an array of LatLng objects */
var heatmapData = [
new google.maps.LatLng(37.782, -122.447),
new google.maps.LatLng(37.782, -122.445),
new google.maps.LatLng(37.782, -122.443),
new google.maps.LatLng(37.782, -122.441),
new google.maps.LatLng(37.782, -122.439),
new google.maps.LatLng(37.782, -122.437),
new google.maps.LatLng(37.782, -122.435),
new google.maps.LatLng(37.785, -122.447),
new google.maps.LatLng(37.785, -122.445),
new google.maps.LatLng(37.785, -122.443),
new google.maps.LatLng(37.785, -122.441),
new google.maps.LatLng(37.785, -122.439),
new google.maps.LatLng(37.785, -122.437),
new google.maps.LatLng(37.785, -122.435)
];
var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);
map = new google.maps.Map(document.getElementById('map'), {
center: sanFrancisco,
zoom: 13,
mapTypeId: 'satellite'
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData
});
heatmap.setMap(map); Add Weighted Data Points
A heatmap can render either LatLng or WeightedLocation objects, or a combination of the two. Both objects represent a single data point on a map, but a WeightedLocation object allows you to additionally specify a weight for that data point. Applying a weight to a data point will cause the WeightedLocation to be rendered with a greater intensity than a simple LatLng object. The weight is a linear scale, in which each LatLng object has an implicit weight of 1 — adding a single WeightedLocation of {location: new google.maps.LatLng(37.782, -122.441), weight: 3} will have the same effect as adding google.maps.LatLng(37.782, -122.441) three times. You can mix weightedLocation and LatLng objects in a single array.
Using a WeightedLocation object in place of a LatLng can be useful when:
WeightedLocation object with a weight of 1000 will be faster than rendering 1000 LatLng objects.LatLng objects when plotting earthquake data, but you may want to use a WeightedLocation to measure the magnitude of each earthquake on the richter scale./* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
new google.maps.LatLng(37.782, -122.445),
{location: new google.maps.LatLng(37.782, -122.443), weight: 2},
{location: new google.maps.LatLng(37.782, -122.441), weight: 3},
{location: new google.maps.LatLng(37.782, -122.439), weight: 2},
new google.maps.LatLng(37.782, -122.437),
{location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},
{location: new google.maps.LatLng(37.785, -122.447), weight: 3},
{location: new google.maps.LatLng(37.785, -122.445), weight: 2},
new google.maps.LatLng(37.785, -122.443),
{location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
new google.maps.LatLng(37.785, -122.439),
{location: new google.maps.LatLng(37.785, -122.437), weight: 2},
{location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];
var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);
map = new google.maps.Map(document.getElementById('map'), {
center: sanFrancisco,
zoom: 13,
mapTypeId: 'satellite'
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatmap.setMap(map); Customize a Heatmap Layer
You can customize how your heatmap will be rendered with the following heatmap options. See the HeatmapLayerOptions documentation for more information.
dissipating: Specifies whether heatmaps dissipate on zoom. When dissipating is false the radius of influence increases with zoom level to ensure that the color intensity is preserved at any given geographic location. Defaults to true.gradient: The color gradient of the heatmap, specified as an array of CSS color strings. All CSS3 colors — including RGBA — are supported except for extended named colors and HSL(A) values.maxIntensity: The maximum intensity of the heatmap. By default, heatmap colors are dynamically scaled according to the greatest concentration of points at any particular pixel on the map. This property allows you to specify a fixed maximum. Setting the maximum intensity can be helpful when your dataset contains a few outliers with an unusually high intensity.radius: The radius of influence for each data point, in pixels.opacity: The opacity of the heatmap, expressed as a number between 0 and 1.The below example shows some of the customization options available.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-08-14 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-14 UTC."],[[["The Heatmap Layer visualizes data intensity at geographical points using color gradients, typically with red for high intensity and green for low."],["To use the Heatmap Layer, you must load the `google.maps.visualization` library using the `libraries` parameter in the Maps JavaScript API bootstrap URL."],["Heatmaps can be customized using options like `dissipating`, `gradient`, `maxIntensity`, `radius`, and `opacity` to control their appearance and behavior."],["Data points for the heatmap can be provided as `LatLng` objects or `WeightedLocation` objects, with the latter allowing for specifying the intensity of each point using a weight value."]]],[]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4