{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 孤傲高冷的网名 的问题《How do you switch from heatmap to clickable marker》','https://www.manongdao.com/q-732573.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I want to have a heat map for the initial view of my data, but when someone scrolls closer in, I want the heatmap to change to clickable markers. Right now it loads both. How do I make it change?
Javascript:
<script>
var map;
function initMap() {
var infowindow = new google.maps.InfoWindow();
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 39.2888414, lng: -76.6099112},
zoom: 12
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
map.data.loadGeoJson('https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=SHOOTING');
map.data.loadGeoJson('https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=HOMICIDE');
var data;
$.ajax({
dataType: "json",
url: "https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=SHOOTING",
data: data,
success: letsGo
});
var JSONLoaded;
var latLngList = [];
var heatMapData = [];
function letsGo(mapData){
console.log(mapData.features.length);
for (i=0; i < mapData.features.length; i++){
tempLocation = mapData.features[i]
latLngList.push(tempLocation.geometry.coordinates);
//console.log(latLngList);
}
console.log(latLngList);
console.log(latLngList.length);
for (i=0; i < latLngList.length; i++){
var tempLat = latLngList[i][1];
var tempLong = latLngList[i][0];
var tempVar = new google.maps.LatLng(tempLat, tempLong);
heatMapData.push(new google.maps.LatLng(tempLat, tempLong));
// console.log(tempLat);
// console.log(tempLong);
}
var pointArray = new google.maps.MVCArray(heatMapData);
console.log(pointArray);
var heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
console.log("got to heatmap");
heatmap.setMap(map);
}
map.data.addListener('click', function(event) {
infowindow.setContent(event.feature.getProperty('description')+"<br>"+event.feature.getProperty('crimedate'));
infowindow.setPosition(event.latLng);
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
infowindow.open(map);
});
google.maps.event.addDomListener(window, 'load', initMap);
}
</script>
Add a listener to the map
zoom_changedevent. when the zoom level increases above your threshold, hide the heatmap and show the markers (and vice versa).proof of concept fiddle
code snippet: