CODEWITHSUNDEEP
google-maps
Nocklas
Nocklas

Reputation: 1367

Google Maps API V3: Show the whole world

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

Upvotes: 20

Views: 33439

Answers (5)

Tom G
Tom G

Reputation: 3650

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

Upvotes: -2

Kunal
Kunal

Reputation: 474

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

Upvotes: 13

adsy
adsy

Reputation: 11407

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>

Upvotes: 4

Nocklas
Nocklas

Reputation: 1367

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

Upvotes: -3

javram
javram

Reputation: 2645

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.

Upvotes: 4

Related Questions