JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>

<div id="st-container" class="st-container">
		
		<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>
						<h2>Filter</h2>
						<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="Rooster">Rooster</option>
									<option value="Quail">Quail</option>
									<option value="Miss">Miss</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 value="2018">2018</option>
								</select>
							</div>

							<div class="filter-set">
								<label for="month-select">Month:</label>
								<select name="month-select" id="month-select" class="month-select">
									<option value="0">Any</option>
									<option value="10">Oct</option>
									<option value="11">Nov</option>
									<option...

CSS

#map-canvas {
  width:100%;
  height:200px;
}
.map-container{
  height:200px;
}

JavaScript

var personData = [{"id":"18","firstname":"Jim","type":"Rooster","farm":"Sweet","lat":"44.231953","lng":"-116.908485","date_shot":"2016","month":"12"},{"id":"1","firstname":"Grant","type":"Rooster","farm":"Kerner","lat":"44.232029","lng":"-116.891426","date_shot":"2016","month":"11"},{"id":"29","firstname":"Grant","type":"Hen","farm":"Two Rivers","lat":"44.229061","lng":"-116.970703","date_shot":"2016","month":"11"}]
var myMap = function() {

	
var	options = {
		//zoom: 16,
		//center: new google.maps.LatLng(44.237226, -116.912341),
		//center: new google.maps.LatLng(0, 0),
		//center,
		mapTypeId: google.maps.MapTypeId.HYBRID
	}

	/*
		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'
          },
          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) {

		// 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];

			// if its already on the map, dont put...