La capa de mapa de calor permite a los clientes renderizar mapas de calor.
Descripción general
Un mapa de calor es una visualización que representa la intensidad de los datos en distintos puntos geográficos. Cuando se habilita la capa de mapa de calor, aparece una superposición de color sobre el mapa. De manera predeterminada, las áreas de mayor intensidad se muestran en color rojo, y las de menor intensidad aparecen en color verde.
Carga la biblioteca de visualizaciones
La capa de mapa de calor forma parte de la biblioteca google.maps.visualization y no se carga de forma predeterminada. Las clases de visualización constituyen una biblioteca independiente separada del código principal de la API de Maps JavaScript. Para usar la funcionalidad que ofrece esta biblioteca, primero debes cargarla con el parámetro libraries en la URL de arranque de la API de Maps JavaScript:
Para agregar una capa de mapa de calor, primero debes crear un objeto HeatmapLayer nuevo y proporcionar algunos datos geográficos en forma de array o de objeto MVCArray[]. Los datos pueden corresponder a un objeto LatLng o a un objeto WeightedLocation. Después de crear una instancia del objeto HeatmapLayer, llama al método setMap() para agregarlo al mapa.
En el siguiente ejemplo, se agregan 14 datos a un mapa de San Francisco.
/* Data points defined as an array of LatLng objects */varheatmapData=[newgoogle.maps.LatLng(37.782,-122.447),newgoogle.maps.LatLng(37.782,-122.445),newgoogle.maps.LatLng(37.782,-122.443),newgoogle.maps.LatLng(37.782,-122.441),newgoogle.maps.LatLng(37.782,-122.439),newgoogle.maps.LatLng(37.782,-122.437),newgoogle.maps.LatLng(37.782,-122.435),newgoogle.maps.LatLng(37.785,-122.447),newgoogle.maps.LatLng(37.785,-122.445),newgoogle.maps.LatLng(37.785,-122.443),newgoogle.maps.LatLng(37.785,-122.441),newgoogle.maps.LatLng(37.785,-122.439),newgoogle.maps.LatLng(37.785,-122.437),newgoogle.maps.LatLng(37.785,-122.435)];varsanFrancisco=newgoogle.maps.LatLng(37.774546,-122.433523);map=newgoogle.maps.Map(document.getElementById('map'),{center:sanFrancisco,zoom:13,mapTypeId:'satellite'});varheatmap=newgoogle.maps.visualization.HeatmapLayer({data:heatmapData});heatmap.setMap(map);
Agrega datos ponderados
Un mapa de calor puede renderizar objetos LatLng o WeightedLocation, o una combinación de ambos. Ambos objetos representan datos únicos en un mapa, pero un objeto WeightedLocation te permite, además, especificar una ponderación para cada uno de ellos. Aplicar una ponderación a un dato específico hará que WeightedLocation se renderice con una mayor intensidad que un objeto LatLng simple. La ponderación es una escala lineal en la que cada objeto LatLng tiene una ponderación implícita de 1; agregar una sola WeightedLocation de {location: new google.maps.LatLng(37.782, -122.441), weight: 3} tendrá el mismo efecto que agregar google.maps.LatLng(37.782, -122.441) tres veces.
Puedes combinar objetos weightedLocation y LatLng en un mismo array.
Utilizar un objeto WeightedLocation en lugar de un objeto LatLng puede ser útil en los siguientes casos:
Si agregas grandes cantidades de datos en una única ubicación (renderizar un solo objeto WeightedLocation con una ponderación de 1,000 es más rápido que renderizar 1,000 objetos LatLng)
Si deseas enfatizar ciertos datos conforme a valores arbitrarios (por ejemplo, puedes usar objetos LatLng cuando aplicas datos de terremotos, pero podría ser conveniente usar una WeightedLocation para medir la magnitud de cada terremoto en la escala de Richter)
/* Data points defined as a mixture of WeightedLocation and LatLng objects */varheatMapData=[{location:newgoogle.maps.LatLng(37.782,-122.447),weight:0.5},newgoogle.maps.LatLng(37.782,-122.445),{location:newgoogle.maps.LatLng(37.782,-122.443),weight:2},{location:newgoogle.maps.LatLng(37.782,-122.441),weight:3},{location:newgoogle.maps.LatLng(37.782,-122.439),weight:2},newgoogle.maps.LatLng(37.782,-122.437),{location:newgoogle.maps.LatLng(37.782,-122.435),weight:0.5},{location:newgoogle.maps.LatLng(37.785,-122.447),weight:3},{location:newgoogle.maps.LatLng(37.785,-122.445),weight:2},newgoogle.maps.LatLng(37.785,-122.443),{location:newgoogle.maps.LatLng(37.785,-122.441),weight:0.5},newgoogle.maps.LatLng(37.785,-122.439),{location:newgoogle.maps.LatLng(37.785,-122.437),weight:2},{location:newgoogle.maps.LatLng(37.785,-122.435),weight:3}];varsanFrancisco=newgoogle.maps.LatLng(37.774546,-122.433523);map=newgoogle.maps.Map(document.getElementById('map'),{center:sanFrancisco,zoom:13,mapTypeId:'satellite'});varheatmap=newgoogle.maps.visualization.HeatmapLayer({data:heatMapData});heatmap.setMap(map);
Personaliza la capa de mapa de calor
Puedes personalizar la manera en que se renderizará tu mapa de calor con las siguientes opciones: Consulta la documentación sobre HeatmapLayerOptions para obtener más información.
dissipating: Especifica si deseas que el mapa de calor se disipe al aplicar el zoom. Cuando el valor de disipación es falso, el radio de influencia aumenta con el nivel de zoom para garantizar la preservación de la intensidad del color en cualquier ubicación geográfica. El valor predeterminado es verdadero.
gradient: Es el gradiente de color del mapa de calor, especificado como un array de strings de color CSS. Se admiten todos los colores CSS3, incluidos los RGBA, salvo los colores con nombres extendidos y los valores HSL(A).
maxIntensity: Es la intensidad máxima del mapa de calor. De forma predeterminada, los colores del mapa de calor se disponen en una escala dinámica según la máxima concentración de puntos de un píxel determinado del mapa. Esta propiedad te permite especificar un valor máximo fijo. Configurar la intensidad máxima puede ser útil cuando tu conjunto de datos contiene valores atípicos de intensidad inusualmente elevada.
radius: Es el radio de influencia de cada dato, en píxeles.
opacity: Es la opacidad del mapa de calor, expresada con un número entre 0 y 1.
En el siguiente ejemplo, se muestran algunas de las opciones de personalización disponibles.
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-08-06 (UTC)"],[[["\u003cp\u003eThe Heatmap Layer visualizes data intensity at geographical points using color gradients, typically with red for high intensity and green for low.\u003c/p\u003e\n"],["\u003cp\u003eTo use the Heatmap Layer, you must load the \u003ccode\u003egoogle.maps.visualization\u003c/code\u003e library using the \u003ccode\u003elibraries\u003c/code\u003e parameter in the Maps JavaScript API bootstrap URL.\u003c/p\u003e\n"],["\u003cp\u003eHeatmaps can be customized using options like \u003ccode\u003edissipating\u003c/code\u003e, \u003ccode\u003egradient\u003c/code\u003e, \u003ccode\u003emaxIntensity\u003c/code\u003e, \u003ccode\u003eradius\u003c/code\u003e, and \u003ccode\u003eopacity\u003c/code\u003e to control their appearance and behavior.\u003c/p\u003e\n"],["\u003cp\u003eData points for the heatmap can be provided as \u003ccode\u003eLatLng\u003c/code\u003e objects or \u003ccode\u003eWeightedLocation\u003c/code\u003e objects, with the latter allowing for specifying the intensity of each point using a weight value.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/android-sdk/utility/heatmap \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/utility/heatmap \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/heatmaplayer \"View this page for the JavaScript platform docs.\")\n\n1. [Overview](#overview)\n2. [Load the visualization library](#load_the_visualization_library)\n3. [Add Weighted Data Points](#add_weighted_data_points)\n4. [Customize a Heatmap Layer](#customize_a_heatmap_layer)\n\n| **[Deprecated:](/maps/deprecations)** The Heatmap Layer\n| functionality in the Maps JavaScript API will no longer be supported. This API was deprecated in\n| May 2025 and be made unavailable in a later version of the Maps JavaScript API, releasing in May\n| 2026. As a replacement for the Heatmap Layer, consider using third-party library integrations\n| like deck.gl, which offers a HeatmapLayer implementation. You can find more information in the\n| [deck.gl documentation](https://deck.gl/docs/api-reference/aggregation-layers/heatmap-layer).\n\nThe Heatmap Layer provides client side rendering of heatmaps.\n\nOverview\n\nA heatmap is a visualization used to depict the intensity of data at\ngeographical points. When the Heatmap Layer is enabled, a colored overlay will\nappear on top of the map. By default, areas of higher intensity will be colored\nred, and areas of lower intensity will appear green.\n\nLoad the visualization library\n\nThe Heatmap Layer is part of the `google.maps.visualization` library, and is not\nloaded by default. The Visualization classes are a self-contained library,\nseparate from the main Maps JavaScript API code. To use the functionality\ncontained within this library, you must first load it using the `libraries`\nparameter in the Maps JavaScript API bootstrap URL: \n\n```html\n\u003cscript async\n src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap\"\u003e\n\u003c/script\u003e\n```\n\nAdd a Heatmap Layer\n\nTo add a Heatmap Layer, you must first create a new `HeatmapLayer`\nobject, and provide it with some geographic data in the form of an array or an\n`MVCArray[]` object. The data may be either a\n[`LatLng`](/maps/documentation/javascript/reference#LatLng)\nobject or a\n[`WeightedLocation`](/maps/documentation/javascript/reference#WeightedLocation)\nobject. After instantiating the `HeatmapLayer` object, add it to the\nmap by calling the `setMap()` method.\n\nThe following example adds 14 data points to a map of San Francisco. \n\n```javascript\n/* Data points defined as an array of LatLng objects */\nvar heatmapData = [\n new google.maps.LatLng(37.782, -122.447),\n new google.maps.LatLng(37.782, -122.445),\n new google.maps.LatLng(37.782, -122.443),\n new google.maps.LatLng(37.782, -122.441),\n new google.maps.LatLng(37.782, -122.439),\n new google.maps.LatLng(37.782, -122.437),\n new google.maps.LatLng(37.782, -122.435),\n new google.maps.LatLng(37.785, -122.447),\n new google.maps.LatLng(37.785, -122.445),\n new google.maps.LatLng(37.785, -122.443),\n new google.maps.LatLng(37.785, -122.441),\n new google.maps.LatLng(37.785, -122.439),\n new google.maps.LatLng(37.785, -122.437),\n new google.maps.LatLng(37.785, -122.435)\n];\n\nvar sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);\n\nmap = new google.maps.Map(document.getElementById('map'), {\n center: sanFrancisco,\n zoom: 13,\n mapTypeId: 'satellite'\n});\n\nvar heatmap = new google.maps.visualization.HeatmapLayer({\n data: heatmapData\n});\nheatmap.setMap(map);\n```\n\nAdd Weighted Data Points\n\nA heatmap can render either\n[`LatLng`](/maps/documentation/javascript/reference#LatLng) or\n[`WeightedLocation`](/maps/documentation/javascript/reference#WeightedLocation)\nobjects, or a combination of the two. Both objects represent a single data\npoint on a map, but a `WeightedLocation` object allows you to additionally\nspecify a weight for that data point. Applying a weight to a data point will\ncause the `WeightedLocation` to be rendered with a greater intensity than a\nsimple `LatLng` object. The weight is a linear scale, in which each `LatLng`\nobject has an implicit weight of 1 --- adding a single `WeightedLocation`\nof `{location: new google.maps.LatLng(37.782, -122.441), weight: 3}` will have\nthe same effect as adding `google.maps.LatLng(37.782, -122.441)` three times.\nYou can mix `weightedLocation` and `LatLng` objects in a single array.\n\nUsing a `WeightedLocation` object in place of a `LatLng` can be useful when:\n\n- Adding large amounts of data at a single location. Rendering a single `WeightedLocation` object with a weight of 1000 will be faster than rendering 1000 `LatLng` objects.\n- Applying an emphasis to your data based upon arbitrary values. For example, you can use `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.\n\n```javascript\n/* Data points defined as a mixture of WeightedLocation and LatLng objects */\nvar heatMapData = [\n {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},\n new google.maps.LatLng(37.782, -122.445),\n {location: new google.maps.LatLng(37.782, -122.443), weight: 2},\n {location: new google.maps.LatLng(37.782, -122.441), weight: 3},\n {location: new google.maps.LatLng(37.782, -122.439), weight: 2},\n new google.maps.LatLng(37.782, -122.437),\n {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},\n\n {location: new google.maps.LatLng(37.785, -122.447), weight: 3},\n {location: new google.maps.LatLng(37.785, -122.445), weight: 2},\n new google.maps.LatLng(37.785, -122.443),\n {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},\n new google.maps.LatLng(37.785, -122.439),\n {location: new google.maps.LatLng(37.785, -122.437), weight: 2},\n {location: new google.maps.LatLng(37.785, -122.435), weight: 3}\n];\n\nvar sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);\n\nmap = new google.maps.Map(document.getElementById('map'), {\n center: sanFrancisco,\n zoom: 13,\n mapTypeId: 'satellite'\n});\n\nvar heatmap = new google.maps.visualization.HeatmapLayer({\n data: heatMapData\n});\nheatmap.setMap(map);\n```\n\nCustomize a Heatmap Layer\n\nYou can customize how your heatmap will be rendered with the following heatmap\noptions. See the\n[`HeatmapLayerOptions`](/maps/documentation/javascript/reference#HeatmapLayerOptions) documentation for more information.\n\n- `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.\n- `gradient`: The color gradient of the heatmap, specified as an array of CSS color strings. All [CSS3 colors](http://www.w3.org/TR/css3-color/#html4) --- including RGBA --- are supported except for [extended named\n colors](http://www.w3.org/TR/css3-color/#svg-color) and HSL(A) values.\n- `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.\n- `radius`: The radius of influence for each data point, in pixels.\n- `opacity`: The opacity of the heatmap, expressed as a number between 0 and 1.\n\nThe below example shows some of the customization options available.\n\n[View example](/maps/documentation/javascript/examples/layer-heatmap)"]]
