StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy is google maps' fitBounds so inacurate?
text
Body
copied!<p>my problem is that fitBounds usually makes objects centered but too small. I expect it should center map on certain object and zoom it in as much as possible. In fact, zoom level could usually be one level higher. Please consider my <a href="http://jsfiddle.net/gnKJv/7/" rel="nofollow">example</a>. As you can see the country could be zoomed in one level and still be 100% visible. Is there any way to overcome it?</p> <p>Here is my code:</p> <pre><code>$(document).ready(function(){ var locationBBOX = [["14.149166 49.002914","24.14444 49.002914","24.14444 54.834442","14.149166 54.834442","14.149166 49.002914"]]; var map = new google.maps.Map( document.getElementById('map-div'), { center: new google.maps.LatLng(0, 0), disableDefaultUI: true, zoom: 1, mapTypeId: google.maps.MapTypeId.ROADMAP }); var _bounds = new google.maps.LatLngBounds(); for(var k in locationBBOX) { var _c1 = locationBBOX[k][0].split(' '); var _c2 = locationBBOX[k][2].split(' '); var _bbox = new google.maps.LatLngBounds(new google.maps.LatLng(parseFloat(_c1[1]),parseFloat(_c1[0])),new google.maps.LatLng(parseFloat(_c2[1]),parseFloat(_c2[0]))); _bounds.union(_bbox); } map.fitBounds(_bounds); var ne = _bounds.getNorthEast(); var sw = _bounds.getSouthWest(); var boundingBoxPoints = [ ne, new google.maps.LatLng(ne.lat(), sw.lng()), sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne ]; var boundingBox = new google.maps.Polyline({ path: boundingBoxPoints, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 2 }); boundingBox.setMap(map); }); </code></pre> <p>Thanks! </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload