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>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="st-container" class="st-container">
  <! -- updated from SO. works now. see comments marked geocodezip -->
    <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 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 array or demo personData (data.js)
  	@param array personList [optional] (list of people to load)
  	@return undefined
  */
  function loadMarkers(personList) {
  	// added geocodezip
		var bounds = new google.maps.LatLngBounds();
    // optional argument of person
    var people = (typeof personList !== 'undefined') ? personList : personData;

    // var j = 1; // for lorempixel
    // called people not location
    for (i = 0; i < people.length; i++) {
      var person = people[i];
		// edit geocodezip
    var lat = person.lat,
        lng = person.lng,
        markerId = person.id;
      var posn = new google.maps.LatLng(lat, lng);
      //fit bounds step 2 of 3
      bounds.extend(posn);
      // if its already on the map, dont put it...