20

How can I programmatically zoom the map so that it covers the whole world?

Nocklas
  • 1,367
  • 4
  • 15
  • 27

5 Answers5

13

function initialize () {

var mapOptions = {
 center: new google.maps.LatLng(0, 0),
 zoom: 1,
 minZoom: 1
};

var map = new google.maps.Map(document.getElementById('map'),mapOptions );

var allowedBounds = new google.maps.LatLngBounds(
 new google.maps.LatLng(85, -180), // top left corner of map
 new google.maps.LatLng(-85, 180) // bottom right corner
);

var k = 5.0; 
var n = allowedBounds .getNorthEast().lat() - k;
var e = allowedBounds .getNorthEast().lng() - k;
var s = allowedBounds .getSouthWest().lat() + k;
var w = allowedBounds .getSouthWest().lng() + k;
var neNew = new google.maps.LatLng( n, e );
var swNew = new google.maps.LatLng( s, w );
boundsNew = new google.maps.LatLngBounds( swNew, neNew );
map .fitBounds(boundsNew);

}

google.maps.event.addDomListener(window, 'load', initialize);
#map {
    width: 500PX;
    height: 500px;
}
<html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
// map zoom level should be 1
Kunal
  • 464
  • 2
  • 8
  • 23
  • 2
    `swt` and `nor` are unused variables. Please clean up the code before pasting on SO. – brettwhiteman Nov 25 '15 at 00:05
  • I tried this solution on Android itself, but I got an exception: "java.lang.IllegalArgumentException: southern latitude exceeds northern latitude (85.0 > -85.0) ". After switching the coordinates, it didn't crash, but it still doesn't show entire world at all. How come? Here's a question about it: http://stackoverflow.com/q/42329186/878126 – android developer Feb 21 '17 at 09:59
  • I don't understand why we need the latlng arithmetic. Why can't you just create a boundary with -90, 90, -180, 180? These coordinates also show the world map several times. This does not look "good" and is probably not what most people need. These boundary coordinates worked best for me: `new google.maps.LatLng(-37, -92)`, `new google.maps.LatLng(61, 60)`. It does not show the whole world, but most of the inhabited part. Going further in any direction will display the world several times. – Frederik Claus Oct 19 '19 at 19:47
  • @kunal +85/-85 do not correspond to the real north/south edges of a map when displayed using the Mercator projection. If you use these values, you will miss a bit of the map on top/bottom areas. – MrUpsidown Jan 28 '20 at 17:05
  • @FrederikClaus +90/-90 do not correspond to the real north/south edges of a map when displayed using the Mercator projection. If you use these values, you will see a grey area on top/bottom of your map. – MrUpsidown Jan 28 '20 at 17:05
4

It's not guaranteed to not have repeats, but by abusing the fact the base tile starts at 256 (zoom 0) and doubles at each increment there on in -- you can select the optimum zoom level using a logarithm function.

function initialize () {
  var mapOptions = {
    center: new google.maps.LatLng(0, 0),
    zoom: Math.ceil(Math.log2($(window).width())) - 8,
  };
  
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
#map {
  width: 100%;
  height: 500px;
}
<html>
  <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
adsy
  • 8,531
  • 2
  • 20
  • 31
4

When creating a new map instance, you can specify the zoom level.

    var myOptions = {
      zoom:7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

The lower the zoom value, the more of the map you see, so a value of 1 or 2 should show the entire globe (depending on the size of your map canvas). After creating the map, you can call:

map.setZoom(8);

To change the zoom level.

javram
  • 2,635
  • 1
  • 13
  • 18
  • 2
    The problem is that the size of the canvas is relative to the window size. So it would have been nice be able to be able to say that it should show everything from coordinate A to coordinate B. – Nocklas Mar 28 '12 at 09:33
  • 3
    In addition, the options object is missing the `center` property which, according to the [official documentation](https://developers.google.com/maps/documentation/javascript/reference?hl=en#MapOptions), is required. – Timo Reimann Sep 29 '12 at 22:35
  • This does **not** provide an answer to the question. – MrUpsidown Jan 28 '20 at 16:59
-2

Here's a function worldViewFit I like to use:

function initMap() {
    var mapOptions = {
        center: new google.maps.LatLng(0, 0),
        zoom: 1,
        minZoom: 1
    };
    map = new google.maps.Map(document.getElementById('officeMap'), mapOptions);
    google.maps.event.addListenerOnce(map, 'idle', function() {
        //Map is ready
        worldViewFit(map);
    });
}
function worldViewFit(mapObj) {
    var worldBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(70.4043,-143.5291),  //Top-left
        new google.maps.LatLng(-46.11251, 163.4288)  //Bottom-right
    );
    mapObj.fitBounds(worldBounds, 0);
    var actualBounds = mapObj.getBounds();
    if(actualBounds.getSouthWest().lng() == -180 && actualBounds.getNorthEast().lng() == 180) {
        mapObj.setZoom(mapObj.getZoom()+1);
    }
}
Tom G
  • 3,650
  • 1
  • 20
  • 19
  • 1
    Where do these numbers come from and how is this an answer to the original question which was to *programmatically set the zoom so that the entire world is covered*? – MrUpsidown Jan 28 '20 at 17:03
-3

The solution for this problem was to use the fitBounds method on the map object and specify appropriate bounds.

Nocklas
  • 1,367
  • 4
  • 15
  • 27