Seattle

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>


	<head>

  		<title>Jerry</title>
  		<!-- Library -->
  		<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  		<!-- Grid -->
			<script src="https://cdn.rawgit.com/jashkenas/underscore/1.5.2/underscore.js"></script>
			<script src="https://cdn.rawgit.com/jashkenas/backbone/1.1.0/backbone.js"></script>
			<script src="https://cdn.rawgit.com/wyuenho/backbone-pageable/master/lib/backbone-pageable.js"></script>
			<script src="https://cdn.rawgit.com/wyuenho/backgrid/master/lib/backgrid.js"></script>
			<script src="https://cdn.rawgit.com/wyuenho/backgrid-filter/master/backgrid-filter.js"></script>
			
  		<!-- Map -->
		<!-- Your own codes -->
		<link href="style.css" rel="stylesheet" type="text/css" />

	</head>
	<body>
 
		<input type="text" id="startDate" placeholder="Enter a start date"></input>
		<input type="text" id="endDate" placeholder="Enter a end date"></input>
     <div id="main"></div>
    
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDE3lHV_x4Ie-Zolc4W10FlUA4G_za5d-Y&callback=initialize"></script>
		<script type="text/javascript" src="main.js"></script>
		<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
	</body>
</html>

CSS

#datepicker:hover {
	background-color: #d3d3d3;
}

.backgrid-container {
  position: relative;
  display: block;
  width: 100%;
  /* you may want to adjust this to fit a whole page */
  height: 494px;
  padding: 0;
  overflow: auto;
  border: 0;
}


/* Or maybe you enjoy zebra stripes */
.backgrid tbody tr:nth-child(even) {
  background-color: #d3d3d3;
}


html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

// JSON
var filteredData = '';
var data = [
    {
        "outage": "2017/03/01",
        "feeder": 2693,
        "type": "OH",
        "category": "Bird/Animal",
        "long": 47.6093694,
        "lat": -122.3361862
    },
    {
        "outage": "2017/03/07",
        "feeder": 2780,
        "type": "UG",
        "category": "Equipment Failure",
        "long": 47.6147868,
        "lat": -122.3140487
    },
    {
        "outage": "2017/03/08",
        "feeder": 2739,
        "type": "OH",
        "category": "Trees/Wire Down",
        "long": 47.6049805,
        "lat": -122.3369622
    },
    {
        "outage": "2017/03/08",
        "feeder": 2746,
        "type": "OH",
        "category": "Bird/Animal",
        "long": 47.605213,
        "lat": -122.3371235
    },
    {
        "outage": "2017/03/09",
        "feeder": 2626,
        "type": "UG",
        "category": "Equipment Failure",
        "long": 47.6057834,
        "lat": -122.3375339
    },
    {
        "outage": "2017/03/14",
        "feeder": 2711,
        "type": "UG",
        "category": "Equipment Failure",
        "long": 47.6047692,
        "lat": -122.3369023
    },
    {
        "outage": "2017/03/14",
        "feeder": 4662,
        "type": "OH",
        "category": "Trees/Wire Down",
        "long": 47.60563629,
        "lat": -122.3369613
    },
    {
        "outage": "2017/03/16",
        "feeder": 2600,
        "type": "OH",
        "category": "Trees/Wire Down",
        "long": 47.6051199,
        "lat": -122.3370917
    },
    {
        "outage": "2017/03/16",
        "feeder": 2605,
        "type": "OH",
        "category": "Trees/Wire Down",
        "long": 47.6045413,
        "lat": -122.3374805
    },
    {
        "outage": "2017/03/16",
        "feeder": 2609,
        "type": "OH",
        "category": "Trees/Wire Down",
        "long": 47.6183684,
        "lat": -122.3118135
    }
]



// Intialize the grid
    var powerRecords = new Backbone.Collection(data);

    var...