Heatmap from the Google API

Asked

Viewed 310 times

1

I was working on a project that involves taking coordinates (lat and long) and using them to create a Map with markers (which is working) and a Heatmap (which is the focus of the problem). I used an example of this link and adapted to my scope... But it does not work. No errors but the map simply does not load, follow the code of my JVS:

var map;
var infoWindow;

// A variável markersData guarda a informação necessária a cada marcador
// Para utilizar este código basta alterar a informação contida nesta variável
var markersData = new Array();

//GET JSON OCORRENCIAS
$.getJSON( "https://webserver-nao-vacila.herokuapp.com/ocorrencia/?format=json", function( data ) {
    markersData = data;
    // Chamada para a função que vai percorrer a informação
    // contida na variável markersData e criar os marcadores a mostrar no mapa
    displayMarkers();
    createHeatMap();
})


function initialize() {
   var mapOptions = {
      center: new google.maps.LatLng(-8.017655, -34.944377),
      zoom: 9,
      mapTypeId: 'roadmap',
   };

   map = new google.maps.Map(document.getElementById('map'), mapOptions);

   // cria a nova Info Window com referência à variável infowindow
   // o conteúdo da Info Window será atribuído mais tarde
   infoWindow = new google.maps.InfoWindow();

   // evento que fecha a infoWindow com click no mapa
   google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
   });


}
google.maps.event.addDomListener(window, 'load', initialize);

// Esta função vai percorrer a informação contida na variável markersData
// e cria os marcadores através da função createMarker
function displayMarkers(){

    // esta variável vai definir a área de mapa a abranger e o nível do zoom
    // de acordo com as posições dos marcadores
    var bounds = new google.maps.LatLngBounds();

    // Loop que vai estruturar a informação contida em markersData
    // para que a função createMarker possa criar os marcadores
    for (var i = 0; i < markersData.length; i++){

        var latlng = new google.maps.LatLng(markersData[i].latitude, markersData[i].longitude);
        var titulo = markersData[i].titulo;
        var data = markersData[i].data;
        var endereco = markersData[i].endereco;

        createMarker(latlng, titulo, data, endereco);

        // Os valores de latitude e longitude do marcador são adicionados à
        // variável bounds
        bounds.extend(latlng);
    }

    // Depois de criados todos os marcadores
    // a API através da sua função fitBounds vai redefinir o nível do zoom
    // e consequentemente a área do mapa abrangida.
    map.fitBounds(bounds);
}

// Função que cria os marcadores e define o conteúdo de cada Info Window.
function createMarker(latlng, titulo, data, endereco){
   var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: titulo
   });

   // Evento que dá instrução à API para estar alerta ao click no marcador.
   // Define o conteúdo e abre a Info Window.
   google.maps.event.addListener(marker, 'click', function() {

      // Variável que define a estrutura do HTML a inserir na Info Window.
      var iwContent = '<div id="iw_container">' +
            '<div class="iw_title">' + titulo + '</div>' +
         '<div class="iw_content">' + data + '<br />' +
         endereco + '<br />' + '</div></div>';

      // O conteúdo da variável iwContent é inserido na Info Window.
      infoWindow.setContent(iwContent);

      // A Info Window é aberta.
      infoWindow.open(map, marker);
   });
}

// Função que cria o mapa de calor
function createHeatMap(){

    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markersData.length; i++) {

        var latlng = new google.maps.LatLng(markersData[i].latitude, markersData[i].longitude);
    }
    bounds.extend(latlng)
    var heatmap = new google.maps.visualization.HeatmapLayer({
        data: markersData
    });
    heatmap.setMap(heatmap.getMap() ? null : markersData);


    map.fitBounds(bounds);

}

I believe that only the JVS presents "problem" but if you need more parts of the code to show here.

  • He makes some kind of mistake, I think you’ll have to give more details to us here

  • I tried a new implementation, much simpler. Function createHeatMap(){ heatmap = new google.maps.Visualization.Heatmaplayer({ date: markersData, map: map }); } createHeatMap();

  • The only error you have now is this: Uncaught Typeerror: Cannot read Property 'Heatmaplayer' of Undefined

  • Only I’m using the google key that it requires for you to use their API. In the example they give on the site, I copied and pasted, using a key and it ran smoothly...

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.