google maps filter and zoom
zoom to new bounds on filter. not working.
by grant
HTML
<script src="//maps.google.com/maps/api/js?sensor=false"></script>
<div id="st-container" class="st-container">
<?php
// don't add header until above is removed
include '/www/rivers/hunt/includes/header.php';
//include '/www/rivers/hunt/includes/menu.php';
?>
<div class="outer-container">
<div class="inner-container cf">
<div class="map-container">
<div id="map-canvas"></div>
</div>
<div class="filter-container-lg">
<div>
<p>Filter</p>
<div class="filter-options">
<div class="filter-set" style="margin-top:0;">
<button id="load-btn" class="load-btn button is-success">Reload data</button>
</div>
<div class="filter-set">
<label for="name-select">Name:</label>
<select name="name-select" id="name-select" class="name-select">
<option value="0">Any</option>
<option value="Grant">Grant</option>
<option value="Jim">Jim</option>
<option value="Other" disabled>Other</option>
</select>
</div>
<div class="filter-set">
<label for="type-select">Type:</label>
<select name="type-select" id="type-select" class="type-select">
<option value="0">Any</option>
<option value="Grape">Grape</option>
<option value="Quail">Quail</option>
<option value="Corn">Corn</option>
<option value="Apple">Apple</option>
<option value="Hen">Hen</option>
</select>
</div>
<div class="filter-set">
<label for="year-select">Year:</label>
<select name="year-select" id="year-select" class="year-select">
<option value="0">Any</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option...
CSS
#map-canvas {
height: 210px;
width: 100%;
}
JavaScript
var personData = [{
"id": "18",
"firstname": "Jim",
"type": "Grape",
"farm": "Sweet",
"lat": "44.231953",
"lng": "-116.908485",
"date_s": "2016",
"month": "12"
},
{
"id": "1",
"firstname": "Grant",
"type": "Grape",
"farm": "Kerner",
"lat": "44.232029",
"lng": "-116.891426",
"date_s": "2016",
"month": "11"
},
{
"id": "2",
"firstname": "Grant",
"type": "Apple",
"farm": "Kerner",
"lat": "44.252029",
"lng": "-116.811426",
"date_s": "2017",
"month": "11"
},
{
"id": "29",
"firstname": "Grant",
"type": "Corn",
"farm": "Two Rivers",
"lat": "44.229061",
"lng": "-116.970703",
"date_s": "2018",
"month": "11"
}
]
var myMap = function() {
var options = {
disableDefaultUI: true,
//zoom: 16,
//center: new google.maps.LatLng(44.237226, -116.912341),
//center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
/*
Load the map then markers
@param object settings (configuration options for map)
@return undefined
*/
function init(settings) {
map = new google.maps.Map(document.getElementById(settings.idSelector), options);
markerLocation = settings.markerLocation;
loadMarkers();
}
// fit bounds 1 of 1
var bounds = new google.maps.LatLngBounds();
/*
=======
MARKERS
=======
*/
// using this one from developers example
var iconBase = 'https://lrio.com/kml/icons/';
var icons = {
Hen: {
icon: iconBase + 'hen.png'
},
Miss: {
icon: iconBase + 'shell.png'
},
Rooster: {
icon: iconBase + 'rooster.png'
},
Grape: {
icon: iconBase + 'grape.png'
},
Corn: {
icon: iconBase + 'corn.png'
},
Apple: {
icon: iconBase + 'apple.png'
},
Quail: {
icon: iconBase + 'quail.png'
}
};
markers = {};
markerList = [];
/*
Load markers onto the Google Map from a provided...