I am brand new to web development just moved over from the database side and I am having a bear of a time trying to remove clusters in google maps. I've probably spent roughly 12 hours trying to research what is going on. Attached is my code all help is welcome. Can someone please take my attached code and actually write out the function to delete all markers?
<!DOCTYPE html>
<html>
<head>
<title>Remove an overlay</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<title>Google Maps V3 API Sample</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>
<script>
var cityCircle;
var map;
var mapDiv;
var markers = [];
var infowindow = new google.maps.InfoWindow();
var locations = [
[1,42.59245,-87.822897],
[2,43.016695,-88.002726],
[3,42.717798,-87.797771],
[4,43.132656,-88.00595],
[5,43.107632,-87.9988],
[6,42.638115,-88.288572],
[7,42.581885,-87.855592],
[8,42.996331,-87.955759],
[9,43.089223,-88.003647],
[10,44.261833,-88.40967],
[11,43.183415,-88.004478],
[12,43.012298,-87.920453],
[13,42.959172,-87.922683],
[14,43.08411,-87.947087],
[15,43.007613,-88.221172],
[16,43.074878,-87.922854],
[17,43.028325,-87.909419],
[18,43.08841,-87.957117],
[19,42.575145,-88.200015],
[20,43.20548,-88.156139],
[21,43.089919,-87.952578],
[22,42.578313,-87.835552],
[23,44.475564,-88.855955],
[24,43.033751,-87.908375],
[25,43.018233,-87.983427],
[26,42.708372,-87.791437],
[27,43.605657,-88.521556],
[28,43.068039,-87.984644],
[29,43.120069,-88.02597],
[30,42.512295,-88.118546],
[31,43.021978,-87.909791],
[32,42.593017,-87.852616],
[33,43.089969,-88.011355],
[34,43.339912,-88.452006],
[35,43.027063,-87.907785],
[36,43.077829,-87.953848],
[37,43.177641,-88.022388],
[38,44.261815,-88.412594],
[39,44.326611,-88.35331],
[40,43.053911,-87.962394],
[41,43.091591,-87.95496],
[42,42.566298,-87.865203],
[43,43.207754,-87.924199],
[44,42.705527,-87.793668],
[45,43.092967,-87.980383],
[46,44.363728,-88.352264],
[47,42.494728,-87.952389],
[48,43.071944,-87.964419],
[49,42.697769,-87.88184],
[50,43.078664,-87.940991],
[51,42.715975,-87.79911],
[52,43.086218,-87.971484],
[53,42.702547,-87.826294],
[54,42.718037,-87.792728],
[55,42.694136,-87.95684],
[56,43.018534,-87.933081],
[57,43.067932,-87.960194],
[58,43.112797,-87.963677],
[59,42.558324,-87.83517],
[60,43.078406,-88.066639],
[61,42.999371,-87.969281],
[62,43.083689,-87.968481],
[63,42.579651,-88.227255],
[64,43.369989,-88.277766],
[65,43.082976,-87.967119],
[66,43.112341,-88.066992],
[67,44.260256,-88.418418],
[68,43.010448,-88.127216],
[69,43.018224,-87.983474],
[70,42.94975,-87.980284],
[71,43.070435,-87.92673],
[72,43.083683,-87.922254],
[73,42.741287,-88.705762],
[74,43.074175,-87.942338],
[75,43.008135,-87.936727],
[76,42.959172,-87.922662],
[77,43.111085,-87.982471],
[78,42.988342,-88.226055],
[79,42.988342,-88.226006],
[80,42.516522,-88.098194],
[81,42.705161,-87.792516],
[82,43.123478,-88.022011],
[83,44.262178,-88.378612],
[84,42.930038,-87.862314],
[85,43.105973,-87.947359],
[86,42.93572,-88.16294],
[87,43.013454,-87.91983],
[88,44.24285,-88.345014],
[89,43.065295,-87.982045],
[90,43.008542,-88.192821],
[91,42.829648,-87.950726],
[92,43.049032,-87.959585],
[93,43.050897,-87.957625],
[94,43.060625,-87.961481],
[95,42.922744,-87.908478],
[96,43.086681,-88.031995],
[97,43.021394,-87.961822],
[98,43.079494,-87.918495],
[99,43.079805,-87.915113],
[100,43.002426,-87.926019]];
var citymap = {};
citymap['#167417 '] = {center: new google.maps.LatLng(43.115275,-87.333823),population: 1}; //Green
citymap['#E97038 '] = {center: new google.maps.LatLng(43.000915,-87.658089),population: 2}; //Orange
citymap['#290CD1 '] = {center: new google.maps.LatLng(43.037409,-17.913571), population: 2000}; //Blue
var cityCircle;
function initialize() {{{{
mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(42.1250353571429,-88.00606),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
markMultiple();
}
for (var city in citymap) {
// Construct the circle for each value in citymap.
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: city.substring(0,7),
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: 8046//5 Mile Radius
};
cityCircle = new google.maps.Circle(populationOptions);
// Remove Circles on click.
google.maps.event.addListener(cityCircle, 'click', function() {
this.setMap(null);
});
}
var path = [
new google.maps.LatLng(43.168487,-88.365784),
new google.maps.LatLng(43.157469,-88.428268),
new google.maps.LatLng(43.121394,-88.415909),
new google.maps.LatLng(43.076271,-88.406296),
new google.maps.LatLng(43.034627,-88.409042),
new google.maps.LatLng(43.018062,-88.343811),
new google.maps.LatLng(42.956784,-88.307419),
new google.maps.LatLng(42.974370,-88.192749),
new google.maps.LatLng(42.899971,-88.186569),
new google.maps.LatLng(42.877332,-88.152924)
];
var path1 = [
new google.maps.LatLng(43.396426,-87.856293),
new google.maps.LatLng(43.402413,-87.998428),
new google.maps.LatLng(43.348011,-88.007355),
new google.maps.LatLng(43.349509,-88.099365),
new google.maps.LatLng(42.883732,-88.606110),
new google.maps.LatLng(42.876687,-88.301239),
new google.maps.LatLng(42.489030,-88.312225),
new google.maps.LatLng(42.488017,-87.946930)
];
var line = new google.maps.Polyline({
path: path,
strokeColor: 'FE2D2D',// Purposely blanked out
strokeOpacity: 1.0,
strokeWeight: 4
});
line.setMap(map);
var line1 = new google.maps.Polyline({
path: path1,
strokeColor: '30F81E',// Purposely blanked out
strokeOpacity: 1.0,
strokeWeight: 4
});
line1.setMap(map);
}
}
}
function markMultiple(x){
//$.getJSON('test.json', function(data) {
// $.each(data, function() {
// var latLng = new google.maps.LatLng(data.lat,data.lng);
// var content = data.id + ':' + data.lat + ',' + data.lng;
// markMap(latLng, content);
// });
//});
for (var i = 0; i < locations.length; i++) {
var loc = locations[i];
var latLng = new google.maps.LatLng(loc[1],loc[2]);
var content = loc[0] + ":" + loc[1] + "," + loc[2];
markMap(latLng, content);
}
var markerCluster = new MarkerClusterer(map, markers);
}
function markMap(position, content){
var marker = new google.maps.Marker({
position: position
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
markers.push(marker);
}
// Add a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the overlays from the map, but keeps them in the array.
function clearOverlays() {
setAllMap(null);
}
// Shows any overlays currently in the array.
function showOverlays() {
setAllMap(map);
}
// Deletes all markers in the array by removing references to them.
function deleteOverlays() {
clearOverlays();
markers = [];
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input onclick="clearOverlays();" type=button value="Hide Overlays">
<input onclick="Clear();" type=button value="Show All Overlays">
<input onclick="deleteOverlays();" type=button value="Delete Overlays">
</div>
<div id="map-canvas" style="width: 1400px; height: 1000px"></div>
<p>Click on the map to add markers.</p>
</body>
</html>