Question

I am trying to make the Google Maps API respond to an elementclick and zoom into a specific region.

For example. The Map is showing the entire United States, and I click Arizona, I want the map to zoom in the entire state of Arizona. Then I can either hit clear and have the map reset or click another state, say Florida. And have it zoom there.

Additionally, this needs to a global solution. I have regions in Europe, Germany, Russia, Australia I want to add this functionality too.

Thank you for your time.

Answer 1

You can define the coordinates and use the zoom level then center your map in that coordinate.

Consider this script.

var zoomLevel = 18; //The higher the zoomLevel means zoom in at a higher resolution
var map;

var arizonaCoor = new google.maps.LatLng(39.739318, -89.266507);
var otherCoor = new google.maps.LatLng(49.733418, -30.234507);
var origCoor = new google.maps.LatLng(39.739318, -89.266507);

var mapOptions = {
center: origCoor,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);


function onArizonaClick(){
    map.setCenter(arizonaCoor, zoomLevel);

}
function onClear(){
    map.setCenter(origCoor, 5);
}