Menu
How can I programmatically zoom the map so that it covers the whole world?
932
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
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.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
