Zoom and center on a Location in Google Maps using JavaScript

Last Reply on Apr 09, 2015 08:17 AM By Mudassar

Posted on Apr 08, 2015 01:41 AM

i want the map to be zoomed on the city which i select from the dropdownlist. how should i do that?

Posted on Apr 09, 2015 08:17 AM

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html