Google Maps API V3: Show the whole world

Asked 27/3, 2012 at 16:26 Answered 10/7, 2018 at 16:57

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

Elevenses answered 27/3, 2012 at 16:26 Comment(0)

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

Foramen answered 24/7, 2013 at 15:23 Comment(5)

swt and nor are unused variables. Please clean up the code before pasting on SO. – Undulant 25/11, 2015 at 0:5

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: https://mcmap.net/q/102634/-how-to-show-entire-world-and-put-markers-on-it/878126 – Fireresistant 21/2, 2017 at 9: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. – Laplante 19/10, 2019 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. – Sagerman 28/1, 2020 at 17:5

@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. – Sagerman 28/1, 2020 at 17:5

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.

Leg answered 27/3, 2012 at 19:21 Comment(3)

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. – Elevenses 28/3, 2012 at 9:33

In addition, the options object is missing the center property which, according to the official documentation, is required. – Popcorn 29/9, 2012 at 22:35

This does not provide an answer to the question. – Sagerman 28/1, 2020 at 16:59

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>

Submarine answered 17/4, 2015 at 12:42 Comment(1)

This does not answer the question + you don't need jQuery in your code. – Sagerman 28/1, 2020 at 19:27

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

Subconscious answered 10/7, 2018 at 16:57 Comment(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? – Sagerman 28/1, 2020 at 17:3

-3

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

Elevenses answered 4/12, 2012 at 22:31 Comment(2)

What are the bounds you used ? – Railroad 8/2, 2013 at 14:49

This does not provide an answer to the (your own) question. – Sagerman 28/1, 2020 at 17:1

Recommended topics

Hot tags