Change Google Maps location and zoom with a Select control

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

height:600px;
}
</style>

<script>
	var map;

}

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>

Modified http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js to a secure url

https://maps.googleapis.com/maps/api/js

https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js