I was working on a project that involves taking coordinates (lat and long) and using them to create a bullet map (which is working) and a Heatmap (which is the focus of the problem). I used an example of this link example and adapted it to my scope .. . But it does not work. It does not display errors but the map simply does not load, it follows 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 think only the JVS presents "problem" but if you need more parts of the code, I'm willing to show it here.