开发者

How to get Google Maps API to set the correct zoom level for a country?

开发者 https://www.devze.com 2022-12-20 00:19 出处:网络
Is there a was of automatically setting the zoom level based on the size of the country that the map has been centered on?

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 i开发者_运维技巧s this information freely available somewhere?


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);
      }
    });


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:

How to get Google Maps API to set the correct zoom level for a country?


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);
     });
 }


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));
    }
}
0

精彩评论

暂无评论...
验证码 换一张
取 消