I have created an example where the Map is Zoomed to a location selected from DropDown.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(18.9600, 72.8200),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
}
function ZoomCenter(ddl) {
if (ddl.selectedIndex > 0) {
var option = ddl.options[ddl.selectedIndex];
var data = {};
data.lat = parseFloat(option.value.split(',')[0]);
data.lng = parseFloat(option.value.split(',')[1]);
data.title = option.innerHTML;
map.setZoom(13);
map.setCenter(new google.maps.LatLng(data.lat, data.lng));
} else {
map.setZoom(6);
map.setCenter(new google.maps.LatLng(18.9600, 72.8200));
}
}
</script>
<select onchange = "ZoomCenter(this)">
<option value="">Please select</option>
<option value="18.641400,72.872200">Alibaug</option>
<option value="18.964700,72.825800">Mumbai</option>
<option value="18.523600,73.847800">Pune</option>
</select>
<hr />
<div id="dvMap" style="width: 500px; height: 500px">
</div>
Demo