Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar la Google Maps JavaScript API

Para que puedas comenzar, te proporcionaremos orientación en la Google Developers Console a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar la Google Maps JavaScript API y servicios relacionados
  3. Crear claves correspondientes
Continuar

Capa del mapa de calor

  1. Información general
  2. Cargar la biblioteca de visualizaciones
  3. Agregar puntos de datos promediados
  4. Personalizar una capa del mapa de calor

La capa del mapa de calor permite la representación de mapas de calor por parte de los clientes.

Información general

Un mapa de calor es una visualización empleada para representar la intensidad de los datos en puntos geográficos. Cuando se habilita la capa del mapa de calor, aparece una superposición coloreada sobre el mapa. De manera predeterminada, las áreas de mayor intensidad llevarán color rojo y las de menor intensidad aparecerán con color verde.

La Google Maps JavaScript API puede representar datos de mapas de calor del cliente, a través de la capa del mapa de calor, o del servidor, a través de una tabla de fusión. A continuación, se muestran algunas de las diferencias claves entre los dos métodos:

Capa del mapa de calor Capa de tablas de fusión
Un número elevado de puntos de datos puede reducir el rendimiento. La presencia de más puntos de datos tendrá un impacto leve en el rendimiento.
Se puede personalizar el aspecto del mapa de calor modificando opciones como el gradiente de color, el radio de los puntos de datos y la intensidad de cada punto de datos. No es posible personalizar la apariencia del mapa de calor.
Se puede controlar la posibilidad de que disipen o no los datos de mapas de calor con niveles de zoom más altos. Todos los datos de mapas de calor se disiparán a medida que se aplique zoom.
Los datos pueden almacenarse en tu HTML o en un servidor, o calcularse en el momento. También pueden modificarse en el tiempo de ejecución. Todos los datos deben almacenarse en una tabla de fusión. Los datos no pueden modificarse fácilmente en el tiempo de ejecución.

Cargar la biblioteca de visualizaciones

La capa del mapa de calor forma parte de la biblioteca google.maps.visualization y no se carga de manera predeterminada. Las clases de visualización constituyen una biblioteca independiente separada del código Google Maps JavaScript API principal. Para usar la funcionalidad de esta biblioteca, primero debes cargarla usando el parámetro libraries en la URL de arranque de Maps JavaScript API:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>

Agregar una capa del mapa de calor

Para agregar una capa del mapa de calor, crea un nuevo objeto HeatmapLayer e incluye en él datos geográficos bajo la forma de un conjunto o un objeto MVCArray[]. Los datos pueden estar representados por objeto LatLng o WeightedLocation. Después de crear una instancia del objeto HeatmapLayer, agrégalo al mapa llamando al método setMap().

En el ejemplo siguiente se agregan 14 puntos de datos a un mapa de 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);

Agregar puntos de datos promediados

Un mapa de calor puede representar objetos LatLng o WeightedLocation, o una combinación de los dos. Ambos objetos representan un único punto de datos en un mapa, pero un objeto WeightedLocation te permite especificar de manera adicional un promedio para dicho punto de datos. Si se aplica un promedio a un punto de datos, WeightedLocation se representará con mayor intensidad que un objeto LatLng simple. El promedio es una escala lineal, en la cual cada objeto LatLng tiene un promedio implícito de 1. Agregar un 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 conjunto.

El uso de un objeto WeightedLocation en lugar de un objeto LatLng puede resultar útil cuando:

  • Se agregan grandes cantidades de datos en una única ubicación. Representar un objeto WeightedLocation con un promedio de 1000 será más rápido que representar 1000 objetos LatLng.
  • Se aplica énfasis a tus datos conforme a valores arbitrarios. Por ejemplo, puedes usar objetos LatLng al representar datos sobre terremotos, aunque probablemente te convenga usar un objeto WeightedLocation para medir la magnitud de cada terremoto en la escala de Richter.
/* 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);

Personalizar una capa del mapa de calor

Con las siguientes opciones para mapas de calor, puedes personalizar la manera en que se representará el tuyo. Para obtener más información, observa la documentación sobre HeatmapLayerOptions.

  • dissipating: especifica si un mapa se disipa al aplicarle zoom. Cuando el valor de disipación es “false”, 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 “false”.
  • gradient: gradiente de color del mapa de calor, especificado como un conjunto de cadenas de color CSS. Se admiten todos los colores CSS3 (incluido el sistema RGBA), excepción de los colores extendidos con nombre y los valores HSL(A).
  • maxIntensity: intensidad máxima del mapa de calor. De manera predeterminada, la escala de colores del mapa de calor se establece dinámicamente 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 resultar útil cuando tu conjunto de datos contiene valores atípicos de intensidad inusualmente elevada.
  • radius: radio de influencia de cada punto de datos, en píxeles.
  • opacity: opacidad del mapa de calor, expresada como un número entre 0 y 1.

En el siguiente ejemplo se muestran algunas de las opciones de personalización disponibles.

Ver el ejemplo de capa del mapa de calor

Enviar comentarios sobre...

Google Maps JavaScript API
Google Maps JavaScript API
Si necesitas ayuda, visita nuestra página de asistencia.