Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This happens because the <code>fitBounds()</code> needs to snap to a viewport that fits the map canvas using the maximum zoom level possible. On the other hand, the viewport returned by the geocoder is not dependent on the size, layout or zoom level of the map canvas. Therefore the <code>fitBounds()</code> method adjusts the map's viewport in order to view the passed <code>LatLngBounds</code> in full at the centre of the map.</p> <p>You may want to check the following example for a clearer demonstation:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt; &lt;title&gt;Google Maps fitBounds Demo&lt;/title&gt; &lt;script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="map" style="width: 500px; height: 350px"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; var myOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"), myOptions); var geocoder = new google.maps.Geocoder(); geocoder.geocode({'address': 'RU'}, function (results, status) { var ne = results[0].geometry.viewport.getNorthEast(); var sw = results[0].geometry.viewport.getSouthWest(); map.fitBounds(results[0].geometry.viewport); 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); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Below are some screenshots for various countries from the above example. The red bounding box is the viewport returned by the geocoder. Note the difference between the bounding box and the actual viewport, as adjusted by <code>fitBounds()</code>:</p> <p>Country: US</p> <p><img src="https://i.imgur.com/R5qETMR.png" alt="US"></p> <p>Country: RU</p> <p><img src="https://i.imgur.com/awC1l0h.png" alt="RU"></p> <p>Country: IT</p> <p><img src="https://i.imgur.com/jSriTdc.png" alt="IT"></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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