index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
	<meta name="viewport" content="width=device-width">
	<style>
	html, body {
		width: 100%;
		height: 100%;
	}
	#map, #mapContainter { 

		margin: 0;
		padding: 0;
		height: 95%;
		width: 100%;
	}
	#location {
		z-index: 5;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		width: 30%;
	}
	#love {
		position:relative;
		z-index: 5;
		margin-left: auto;
		margin-right: auto;
		top: -20;
		left: 0;
		right: 0;
		width: 75%;
		text-align: center;
	}
	@media screen and (-webkit-min-device-pixel-ratio:0) { 
		select,
		textarea,
		input {
			font-size: 16px;
		}
	}
	</style>
	<meta charset="UTF-8">
	<title>RR Beer Finder</title>
</head>
<body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

	<div style="height:100%; width:100%;">
		<div id="divabove" style="width:100%">
			<select id="location" style="position:absolute;" onChange="setCenter();">
				<option value="MyLocation">My location</option>
				<option value="NorCal" selected>NorCal</option>
				<option value="Bay Area">Bay Area</option>
				<option value="SoCal">SoCal</option>
				<option value="Oregon">Oregon</option>
				<option value="Colorado">Colorado</option>
				<option value="Pennsylvania">Pennsylvania</option>
			</select>
		</div>
		<div id="mapContainter">
			<div id="map"></div>
			<p id="love" class="love">Made with <i class="icon ion-heart"></i> by <a href="https://www.linkedin.com/in/tim-ferguson-01451892/">Tim Ferguson</a></p>
		</div>
	</div>
	<script>
	/*
		If you've come to peek at the code, please know I threw this together very quickly. There are small bits of unused code and the coding practices aren't the best - this is just a hobby project I thought I'd share - Stay tuned and I will be updating it over the coming weeks, and cleaning up my code base. 
	*/
	var globalData;
	var labels;
	var map;
	var centers = {"NorCal": {lat: 38.441804, lng: -122.711617},"Bay Area": {lat:37.413001,  lng:-121.962524}, "SoCal": {lat:33.817313,  lng:-117.906398}, "Oregon":{lat:45.519443, lng: -122.678628}, "Colorado":{lat:39.734438, lng:-104.985611}, "Pennsylvania": {lat:40.091773, lng:-75.381653 }}
	function setCenter() {
		var loc = $('#location').val();
		if(loc == "MyLocation")
		{
			navigator.geolocation.getCurrentPosition(function(position) {
			  map.setCenter({lat: position.coords.latitude, lng:position.coords.longitude});
			  map.setZoom(10);	
			}, 
			function(){
				map.setCenter(centers["NorCal"]);
				map.setZoom(10);	
			});
		}
		map.setCenter(centers[loc]);
		map.setZoom(10);	
	}

	function initMap() {
		var mothership = {lat: 38.441804, lng: -122.711617};
		map = new google.maps.Map(document.getElementById('map'), {
			zoom: 15,
			minZoom: 7,
			center: mothership
		});
		var marker = new google.maps.Marker({
			position: mothership,
			map: map,
			title: 'Russian River Brewing Company',
			label: 'Russian River Brewing Company'
		});          

		var getContent = function(data){
			var addrCity = data.address + ', ' +data.city;
			var nameAddrCity = data.name + '-' +addrCity;

			return '<div id="content">'+
			'<div id="siteNotice">'+
			'</div>'+
			'<h1 id="firstHeading" class="firstHeading">'+data.name+'</h1>'+
			'<div id="bodyContent">'+
			'<p><b>Address:</b>'+ data.address +', '+ data.city+' '+
			'</p>'+
			'<br/>'+
			'<p>Link: <a href="http://maps.apple.com/?q='+encodeURIComponent(addrCity)+'" >'+ nameAddrCity +' </a>'+
			'</p>'+
			'</div>'+
			'</div>'
		}


		function handleMarkerClick(marker, index) {
			if (typeof infowindow === 'undefined') {
				infowindow = new google.maps.InfoWindow({});
			}
		    var data = globalData[index]//helpful data
		    //create content with dynamic data 
		    infowindow.setContent(getContent(data));
		    infowindow.open(marker.getMap(), marker);//modify as per your requirement
		}

		$.get( "/Locations", function( data ) {
			globalData = data;
			for(var i = 0; i < data.length; i ++)
			{
				var addrCity = data[i].address + ', ' +data[i].city;
				var nameAddrCity = data[i].name + '-' +addrCity;
				var marker = new google.maps.Marker({
					position: {lat: data[i].lat, lng:data[i].lng},
					map: map,
					title: data[i].name,
					clickable: true
					//label: data[i].name
				});	
				var contentString = '<div id="content">'+
				'<div id="siteNotice">'+
				'</div>'+
				'<h1 id="firstHeading" class="firstHeading">'+data[i].name+'</h1>'+
				'<div id="bodyContent">'+
				'<p><b>Address:</b>'+ data[i].address +', '+ data[i].city+' '+
				'</p>'+
				'<br/>'+
				'<p>Link: <a href="http://maps.apple.com/?q='+encodeURIComponent(addrCity)+'" >'+ nameAddrCity +' </a>'+
				'</p>'+
				'</div>'+
				'</div>';

				google.maps.event.addListener(marker, 'click', handleMarkerClick.bind(undefined, marker, i));
			}

		  //alert( "Load was performed." );
		});
	}
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHAjg4T55aMKSaAaXd4RfWUv6uOJyQKiQ&callback=initMap">
	</script>


</body>
</html>