Control Google Map zoom level with a hyperlink

Question

How can I control the Zoom Level of my Google Map with hyperlinks? For instance I want three defined levels (Location in UK, UK in Europe, Europe in the World). Clicking on these links will display the map with a different zoom level.

I'm using Google Maps API v3

Answer 1

That shouldn't be too difficult to do.

When you create the map, you get a reference to the map object, e.g.

var mapOptions = {mapTypeId: google.maps.MapTypeId.TERRAIN};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

Once you have the object, you can zoom to a specific level like this:

function zoomToLevel() {
    map.setZoom(8);
}

So you'd just need to set the click event of your hyperlink to run the javascript function:

<a href="#" onclick="zoomToLevel(); return false;">Zoom to level 8</a>

For what you're doing though, it might be better to get the map to select it's own zoom level based on the area. This function is actually zooming to show the Pyrenees, but the idea could be used for any area, as long as your points are at diagonally opposite corners:

function zoomPyrenees() {
    var startPoint;
    var endPoint;
    var boundsPyrenees;

    startPoint = new google.maps.LatLng(43.373403, -1.774107);
    endPoint = new google.maps.LatLng(42.482463, 3.129875);
    boundsPyrenees = new google.maps.LatLngBounds();
    boundsPyrenees.extend(startPoint);
    boundsPyrenees.extend(endPoint);

    map.fitBounds(boundsPyrenees);
}