How to get Google Maps API to set the correct zoom level for a country?
Is there a was of automatically setting the zoom level based on the size of the country that the map has been centered on?
maps.google.com does exactly what I need, so, for example, if I search for Russia I get a zoom level such that Russia just fits on screen, and when I search for Cuba I get a higher zoom level so that Cuba just fits.
Is there some way of giving the Maps Api a country location and getting an appropriate zoom level.
If not, I guess that I would have to manually (ugh!) create my own table for this information. Or is this information freely available somewhere?
Solution 1:
For V3 this code worked for me:
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.fitBounds(results[0].geometry.viewport);
}
});
Solution 2:
For API v3 check this answer.
You can use the Google Maps Client-side Geocoder to get the bounding box of the country, as in the following example:
// API version 2
var geocoder = new GClientGeocoder();
geocoder.getLocations("Russia", function (locations) {
var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
var east = locations.Placemark[0].ExtendedData.LatLonBox.east;
var west = locations.Placemark[0].ExtendedData.LatLonBox.west;
var bounds = new GLatLngBounds(new GLatLng(south, west),
new GLatLng(north, east));
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
});
// API version 3
// ... set north, south, east and west ...
var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(south, west),
new google.maps.LatLng(north, east));
map.fitBounds(bounds);
The screenshots below show the results of the above technique when searching for Russia and Cuba:
Solution 3:
If you don't want to use the geocoder client from google, because of usage limitations you could use your own list. You can get one from this github repo.
Here is a code example using jQuery's getJSON function and google maps API v3:
function initialize() {
// read the list of countries
$.getJSON('countries.json', function (countries) {
// will use the country with index 40 (Cyprus)
var index_country = 40;
var myOptions = {
center: new google.maps.LatLng(
countries[index_country].center_lat,
countries[index_country].center_lng),
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// set the bounds of the map
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(countries[index_country].sw_lat, countries[index_country].sw_lng),
new google.maps.LatLng(countries[index_country].ne_lat, countries[index_country].ne_lng) );
map.fitBounds(bounds);
});
}
Solution 4:
If you don't use google maps api and just use their geocoding you can use this formula:
var url = 'http://maps.google.com/maps/geo?q=YOUR_QUERY&output=json&oe=utf8&sensor=false&key=YOUR_KEYback=geoCodeDone';
jQuery.getScript(url);
function geoCodeDone(data)
{
if (data.Status.code == 200)
{
lng = data.Placemark[0].Point.coordinates[0];
lat = data.Placemark[0].Point.coordinates[1];
var east = data.Placemark[0].ExtendedData.LatLonBox.east;
var west = data.Placemark[0].ExtendedData.LatLonBox.west;
var zoom = 11 - Math.round(Math.log(Math.abs(west-east))/Math.log(2));
}
}