Change Google Maps location and zoom with a Select control

index.html

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
#map-canvas {

	height:600px;
}
</style>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<script src="https://maps.googleapis.com/maps/api/js"></script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>



<script>
	var map;

	var markerData= [
		{lat: 36.4 , lng: -120.9  , zoom: 7 , name: "California"},
		{lat: 28 , lng: -81  , zoom: 7 , name: "Florida"},
		{lat: 40.39 , lng: -3.67  , zoom: 8 , name: "Madrid"},
	];
	 
	function initialize() {
		 	map = new google.maps.Map(document.getElementById('map-canvas'), {
				zoom: 3,
				center: {lat: 10, lng: 10}
			});
			markerData.forEach(function(data) {
				var newmarker= new google.maps.Marker({
					map:map,
					position:{lat:data.lat, lng:data.lng},
					title: data.name
				});
				jQuery("#selectlocation").append('<option value="'+[data.lat, data.lng,data.zoom].join('|')+'">'+data.name+'</option>');
			});

	}

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

	jQuery(document).on('change','#selectlocation',function() {
		var latlngzoom = jQuery(this).val().split('|');
		var newzoom = 1*latlngzoom[2],
		newlat = 1*latlngzoom[0],
		newlng = 1*latlngzoom[1];
		map.setZoom(newzoom);
		map.setCenter({lat:newlat, lng:newlng});
	});

</script>
</head>
<body>
  <div class="col-md-12 col-sm-12">
  
  	<select id="selectlocation">
  		<option value="10|10|3">Original Map</option>
  	</select>
   
  
  </div>
  <div class="col-md-12 col-sm-12" id="map-canvas"></div>

</body>
</html>