associating buttons with map positions

index.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>



<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization,drawing,places,weather,geometry"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>



<script>
	var map = null;


	jQuery(document).ready(function() {
		//jQuery('#map-canvas').width(width);
		jQuery('#map-canvas').height('700');
		jQuery(document).on('click','#RESET',function() {
			map.setZoom(5);
			map.setCenter({lat:41, lng:-89.5});
		});

		jQuery(document).on('click','#CA',function() {
			map.setZoom(7);
			map.setCenter({lat:36.4, lng:-120.9});
		});

		jQuery(document).on('click','#FA',function() {
			map.setZoom(7);
			map.setCenter({lat:28, lng:-81});
		});

	}); 
	function initialize() {
		 		map = new google.maps.Map(document.getElementById('map-canvas'), {
					zoom: 5,
					center: {lat: 41, lng: -89.5}
				});
		
		 
	}

	google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div class="container-fluid">
  <div class="col-md-2">
  <ul>
  <li><button class="btn btn-default" id="RESET">Reset Zoom</button></li>
  <li><button class="btn btn-default" id="CA">California</button></li>
  <li><button class="btn btn-default" id="FA">Florida</button></li>
  </ul>
  </div>
  <div class="col-md-10" id="map-canvas"></div>
</div>
</body>
</html>