API Карт Google V3: показать весь мир

Как я могу программно масштабировать карту так, чтобы она охватывала весь мир?

Ответ 1

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>

Ответ 2

При создании нового экземпляра карты вы можете указать уровень масштабирования.

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

Чем ниже значение масштабирования, тем больше отображается карта, поэтому значение 1 или 2 должно отображать весь земной шар (в зависимости от размера вашего холста карты). После создания карты вы можете позвонить:

map.setZoom(8);

Чтобы изменить уровень масштабирования.

Ответ 3

Не гарантируется отсутствие повторений, но, злоупотребляя тем фактом, что базовая плитка начинается с 256 (масштабирование 0) и удваивается при каждом приращении там - вы можете выбрать оптимальный уровень масштабирования с помощью функции логарифма.

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>

Ответ 4

Решение этой проблемы состояло в том, чтобы использовать метод fitBounds на объекте карты и указать соответствующие границы.