Can anyone shed some light on the below - I am trying to toggle the markers. I have tried a number of different avenues to no avail. My map is a json heat map up to a certain zoom and then markers are shown. The markers differ and I want the user to have the option to toggle them.
<div id="map" style="height:650px;"></div>
<input type="checkbox" id="Burglary" onclick="toggleGroup('Burglary and related offences')" CHECKED />Burglary and related offences</input>
<input type="checkbox" id="Theft" onclick="toggleGroup('Theft and related offences')" CHECKED />Theft and related offences</input>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=&libraries=visualization">
</script>
The script is shown below it is very code heavy but it seems to work up to a point.
var map;
var heatmap;
var markerGroups = {
"Sexual offences": [],
"Attempts/threats to murder, assaults, harassments and related offences": [],
"Kidnapping and related offences": [],
"Burglary and related offences": [],
"Theft and related offences": [],
"Fraud, deception and related offences": [],
"Controlled drug offences": [],
"Weapons and Explosives Offences": [],
"Damage to property and to the environment": [],
"Public order and other social code offences": [],
"Offences against government, justice procedures and organisation of crime": [],
};
function initMap() {
var infowindow = new google.maps.InfoWindow();
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, {
center: {
lat: 53.3070643,
lng: -7.83237079
},
zoom: 7,
mapTypeId: 'satellite'
);
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoom = map.getZoom();
if (zoom > 11) {
// hide the heatmap, show the markers
heatmap.setMap(null);
map.data.setMap(map);
} else {
// hide the markers, show the heatmap
heatmap.setMap(map);
map.data.setMap(null);
}
})
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
map.data.addGeoJson(geoJsonShooting);
var data;
var JSONLoaded;
var latLngList = [];
var heatMapData = [];
function letsGo(mapData) {
for (i = 0; i < mapData.features.length; i++) {
tempLocation = mapData.features[i]
latLngList.push(tempLocation.geometry.coordinates);
type = tempLocation.properties.description
markerGroups[type].push(tempLocation);
}
for (i = 0; i < latLngList.length; i++) {
var tempLat = latLngList[i][1];
//console.log(
var tempLong = latLngList[i][0];
var tempVar = new google.maps.LatLng(tempLat, tempLong);
heatMapData.push(new google.maps.LatLng(tempLat, tempLong));
}
var pointArray = new google.maps.MVCArray(heatMapData);
heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray
});
heatmap.setMap(map);
map.data.setMap(null);
}
map.data.setStyle(function(feature) {
var description = feature.getProperty('description');
var icons = customIcons[description] || {};
return {
icon: icons.icon
}
});
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);
});
letsGo(geoJsonShooting);
}
var iconBase =
'https://developers.google.com/maps/documentation/javascript/examples/full/images/';
var customIcons = {
"Sexual offences": {
icon: iconBase + 'library_maps.png’
},
"Attempts/threats to murder, assaults, harassments and related offences": {
icon: iconBase + 'library_maps.png'
},
"Kidnapping and related offences": {
icon: iconBase + 'info-i_maps.png'
},
"Burglary and related offences": {
icon: iconBase + 'library_maps.png'
},
"Theft and related offences": {
icon: iconBase + 'info-i_maps.png'
},
"Fraud, deception and related offences": {
icon: iconBase + 'library_maps.png'
},
"Controlled drug offences": {
icon: iconBase + 'info-i_maps.png'
},
"Weapons and Explosives Offences": {
icon: iconBase + 'library_maps.png'
},
"Damage to property and to the environment": {
icon: iconBase + 'library_maps.png'
},
"Public order and other social code offences": {
icon: iconBase + 'info-i_maps.png'
},
"Offences against government, justice procedures and organisation of crime": {
icon: iconBase + 'library_maps.png'
},
};
google.maps.event.addDomListener(window, 'load', initMap);
function toggleGroup(type) {
for () {
//#########
}
}
var geoJsonShooting = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-7.7921, 53.2424]
},
"properties": {
"crimedate": "{{ userlog.date }}",
"post": "",
"location_1_address": null,
"location": "",
"description": "Burglary and related offences",
"neighborhood": "",
"total_incidents": "",
"location_1_city": null,
"location_1_state": null,
"crimecode": "",
"weapon": "",
"location_1_zip": null,
"district": "",
"crimetime": ""
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-7.6421, 53.3424]
},
"properties": {
"crimedate": "{{ userlog.date }}",
"post": "",
"location_1_address": null,
"location": "",
"description": "Theft and related offences",
"neighborhood": "",
"total_incidents": "",
"location_1_city": null,
"location_1_state": null,
"crimecode": "",
"weapon": "",
"location_1_zip": null,
"district": "",
"crimetime": ""
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-7.6921, 53.1424]
},
"properties": {
"crimedate": "{{ userlog.date }}",
"post": "",
"location_1_address": null,
"location": "",
"description": "Theft and related offences",
"neighborhood": "",
"total_incidents": "",
"location_1_city": null,
"location_1_state": null,
"crimecode": "",
"weapon": "",
"location_1_zip": null,
"district": "",
"crimetime": ""
}
},
],
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
}
};
I have tried to toggle by description but no luck