Google Map toggle Markers JSON

Google Map toggle Markers JSON

HTML

<html>
<head>

<body>

<div class="menu">
 <dl class="dropdown">
  <dt>
    <a href="#">Multiple selection</a>
  </dt>
    <dd>
     <div class="multiSelect">
      <ul>
       <div class="checkbuttons">
        <input type="button" value="Check All" class="button" onclick="check();">
        <input type="button" value="Uncheck All" class="button" onclick="uncheck();">
        <p>
       </div>
        <li>
         <input class="checkbox" id="AmLeg" name="AmLeg" type="checkbox" value="AmLeg" />AmLeg</li>
        <li>
         <input class="checkbox" id="DaR" name="DaR" type="checkbox" value="DaR" />DaR</li>
       </ul>
      </div>
     </dd>
    </dl>
   </div>
  <br><br><br><br><br><br><br>
<div id="map" class="map"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>


</body>
</head>
</html>

CSS

.menu {
  float:left; 
  position: absolute top;
  
}

.checkbuttons{
   margin:auto;
   margin-bottom:10px;
   display:block;
   text-align:center;
}

.dropdown {
  position: absolute;
  font-family: arial;
}

a {
  color: #fff;
}

.dropdown dd,
.dropdown dt {
  margin: 0px;
  padding: 0px;
}

.dropdown ul {
  margin: -1px 0 0 0;
}

.dropdown dd {
  position: relative;
}

.dropdown a,
.dropdown a:visited {
  color: #fff;
  text-decoration: none;
  outline: none;
}

.dropdown dt a {
  background-color: #4F6877;
  display: block;
  padding: 8px 5px 5px 5px;
  min-height: 30px;
  line-height: 24px;
  overflow: hidden;
  border: 0;
  width: 250px;
}

.dropdown dt a span,
.dropdown dd ul {
  background-color: #4F6877;
  border: 0;
  color: #fff;
  display: none;
  left: 0px;
  padding: 2px 5px 2px 5px;
  position: absolute;
  top: 2px;
  width: 250px;
  list-style: none;
  height: 300px;
  overflow: auto;
}

.dropdown span.value {
  display: none;
}

.dropdown dd ul li a {
  display: block;
}

.dropdown dd ul li a:hover {
  background-color: #fff;
}

.button {
  background-color: #ddd;
  width: 100px;
  border: 0;
  margin: 0;
  padding: 2px 0px 2px 0px;
  text-align: center;
  color: black;
  font-family: arial;
}

.checkbox {
  margin-right: 5px;  
}

.map{
  width: 500px; 
  height: 400px; 
  float: right; 
  position: absolute right;  
}

JavaScript

/*
	Dropdown with Multiple checkbox select with jQuery
*/

$(".dropdown dt a").on('click', function() {
  $(".dropdown dd ul").slideToggle('fast');
});

$(".dropdown dd ul li a").on('click', function() {
  $(".dropdown dd ul").hide();
});
function check() {
  $('input[type="checkbox"]').prop("checked", true).change();
}

function uncheck() {
  $('input[type="checkbox"]').prop("checked", false).change();
}

function getSelectedValue(id) {
  return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});

$('.multiSelect input[type="checkbox"]').on('click', function() {

  var title = $(this).closest('.multiSelect').find('input[type="checkbox"]').val(),
    title = $(this).val() + ",";

  if ($(this).is(':checked')) {
    var html = '<span title="' + title + '">' + title + '</span>';
    $('.multiSel').append(html);

  } else {
    $('span[title="' + title + '"]').remove();


  }
});


$(window).load(function() {

var markers = new Array();

var iconSrc = {};

  iconSrc['DaR'] = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
  iconSrc['AmLeg'] = 'http://labs.google.com/ridefinder/images/mm_20_green.png';

var locations = [

    ['DaR1', '973, ext. 31', 'DaR', 40.902, -74.407, 1],
    ['DaR1', '931-336', 'DaR', 40.933, -74.425, 2],
    ['DaR', '973-5-0', 'DaR', 40.999497, -74.346326, 3],

    ['AmLeg1', '210  St.<br>Boi=nton, NJ 07005', 'AmLeg', 40.902857, -74.407712, 32],
    ['AmLeg2', '15 fgiel Ae.<br>Ber, NJ 0763', 'AmLeg', 41.00276744260799, -74.35810804367065, 33],
    ['AmLeg3', 'Boxi 121<br>Cham, NJ 77928', 'AmLeg', 40.73794, -74.38449, 34]
];

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: new google.maps.LatLng(40.7967667, -74.4815438),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

var infowindow = new google.maps.InfoWindow();

var marker, i;
  for (i = 0; i...