var map;
var geocoder;
function initialize()
{
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById("map_canvas"),
{
zoom: 2,
center: new google.maps.LatLng(20.5937, 78.9629),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
findAddress("India");
}
function findAddress(address)
{
var addressStr=document.getElementById("stateselect").value;
if (!address && (addressStr != ''))
address = addressStr;
else
address = addressStr;
if ((address != '') && geocoder)
{
geocoder.geocode( { 'address': address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
if (status != google.maps.GeocoderStatus.ZERO_RESULTS)
{
if (results && results[0] && results[0].geometry && results[0].geometry.viewport)
map.fitBounds(results[0].geometry.viewport);
}
else
alert("No results found");
}
else
alert("Geocode was not successful for the following reason: " + status);
});
}
}
<html>
<head>
<title>Google Maps API v3 Example - Pan to State using Geocoding</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false®ion=IN"></script>
<script type="text/javascript">
<!-- Copy the Javascript code here in case you are trying the code. -->
</script>
</head>
<body onload="initialize()" >
<div id="TOPNAV" align="center">
<b>Select a state: </b><select id="stateselect" name="stateselect" class="textfeld" onclick="findAddress();return false" onchange="findAddress();return false" onfocus="">
<option value=''>Select a State....</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Madhya Pradesh">Madhya Pradesh</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Tripura">Tripura</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="West Bengal">West Bengal</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Lakshadweep">Lakshadweep</option>
<option value="Delhi">Delhi</option>
<option value="Pondicherry">Pondicherry</option>
</select>
</div>
<div id="map_canvas" style="width: 450px; height: 230px; top: 20px" align="center"></div>
</body>
</html>