Squad

http://stackoverflow.com/questions/29808144/unable-to-toggle-multiple-dynamic-google-maps-marker-points-with-checkbox

by brendaz

HTML

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://www.dropbox.com/s/vs8abkuquarnfoj/squad1.png?dl=0"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>
<script src="http://s14.postimg.org/jiz0bwqel/squad1.png"></script>
<script src="http://s30.postimg.org/ii2uz820d/play.png"></script>
<script src="http://s14.postimg.org/6dt5gns8d/pause.png"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>
<body>
    <!-- Start of Menu Buttons -->
    <div id='cssmenu'>
        <!-- First Menu Button -->
        <ul>
            <li id="myButton" class='button'>
                <li class='squads'><a href='#'><span></span></a>

                    <!-- Second Menu Button -->
                    <ul>
                        <li><a href='#'></a>

                            <div id="checkBoxes" class="trackSquad">
                    </ul>
                    </div>
                    <div id="timeslider"></div>
                    <div id="slideTime">
                        <label for="amount">Minutes ago:</label>
                        <input type="text" id="amount" readonly>
                    </div>
                    <!-- <input type='button' value='Play' id='myButton'> -->
                    <div id="map-canvas"></div>
                    <!-- Info Box-->
                    <div class="infobox-wrapper">
                        <div id="infobox">
                            <li id="squadnames" class="infoBoxText"></li>
                            <li class="infoBoxText">Coordinates</li>
                            <li class="infoBoxText">Send Message</li>
                        </div>
    ...

CSS

/* Starter CSS for Flyout Menu */
 #cssmenu {
    top: 50%;
    padding: 0;
    margin: 0;
    border: 0;
    display:inline-block;
    position:relative;
}
#cssmenu ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#cssmenu ul {
    position: relative;
    z-index: 597;
    float: left;
}
#cssmenu ul li {
    float: left;
    min-height: 1px;
    line-height: 1em;
    vertical-align: middle;
}
#cssmenu ul li.hover, #cssmenu ul li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
}
/*squad hover menu*/
 #cssmenu ul ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    left: 0;
    z-index: 598;
    width: 100%;
    border-radius:25px;
}
#cssmenu ul ul li {
    float: right;
}
#cssmenu ul li:hover> ul {
    visibility: visible;
}
#cssmenu ul ul {
    top: 0;
    left: 100%;
}
#cssmenu ul li {
    float: none;
}
/* Custom Stuff */
 #cssmenu span, #cssmenu a {
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-decoration: none;
    border-radius:25px;
}
#cssmenu:after, #cssmenu ul:after {
    content:'';
    display: block;
    clear: both;
}
/*
#cssmenu > ul > li:first-child {
   -moz-border-radius: 0 0 5px 0;
  -webkit-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu > ul > li:last-child {
   -moz-border-radius: 0 0 5px 0;
  -webkit-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu > ul > li ul ul {
 -moz-border-radius: 0 0 5px 0;
  -webkit-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu > ul > li ul ul li:first-child {
 ...

JavaScript

mapCreated = false;


var mapPoints = [];
var names = [];
var times = [];
var colors = [];
var markers = [];
initialCenterFocused = false;
var map;
var bounds;
var imageArray = [];
var kmzLayer;
var mapOptions;
var markers = [];
var lines = [];
var fartherTimeThresholdMillis = 36000000;
var nearerTimeThresholdMillis = 0;
var now = new Date();
var endTimeCutOff = now.getTime() - fartherTimeThresholdMillis;
var startTimeCutOff = now.getTime() - nearerTimeThresholdMillis;
var timer;
var playTimer;
var isPlaying = false;
var radar = false;
var index;
var squads = {};

console.log(markers);

function eraseAllMarkersAndLines() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
    for (var i = 0; i < lines.length; i++) {
        lines[i].setMap(null);
    }
    markers = [];
    lines = [];
}

function fetchNewest() {
    console.log("fetching newest");
    nearerTimeThresholdMillis = parseInt(jQuery("#timeslider").slider("values", 0)) * 60000;
    fartherTimeThresholdMillis = parseInt(jQuery("#timeslider").slider("values", 1)) * 60000;

    now = new Date();
    endTimeCutOff = now.getTime() - fartherTimeThresholdMillis;
    startTimeCutOff = now.getTime() - nearerTimeThresholdMillis;

    mapPoints.push(new google.maps.LatLng(33.730362, -85.792725));
    names.push("Alpha");
    times.push("1425059747829");
    colors.push("Red");

    mapPoints.push(new google.maps.LatLng(33.7304572, -85.792498));
    names.push("Alpha");
    times.push("1425059747829");
    colors.push("Red");

    mapPoints.push(new google.maps.LatLng(33.7304346, -85.792634));
    names.push("Alpha");
    times.push("1425059747829");
    colors.push("Red");

    mapPoints.push(new google.maps.LatLng(33.73041, -85.79264));
    names.push("Alpha");
    times.push("1425059172108");
    colors.push("Blue");

    mapPoints.push(new google.maps.LatLng(33.730312, -85.792654));
    names.push("Delta");
    times.push("1425059747723");
    colors.push("Blue");



   ...