Google Maps V3 - How to calculate the zoom level for a given bounds

Question

I m looking for a way to calculate the zoom level for a given bounds using the Google Maps V3 API  similar to getBoundsZoomLevel   in the V2 API   Here is what I want to do      These are exact bounds previously captured from the map object var sw   new google maps LatLng 42 763479  -84 338918   var ne   new google maps LatLng 42 679488  -84 524313   var bounds   new google maps LatLngBounds sw  ne   var zoom      do some magic to calculate the zoom level     Set the map to these exact bounds map setCenter bounds getCenter     map setZoom zoom       NOTE  fitBounds   will not work   Unfortunately  I can t use the fitBounds   method for my particular use case  It works well for fitting markers on the map  but it does not work well for setting exact bounds  Here is an example of why I can t use the fitBounds   method   map fitBounds map getBounds        not what you expect

User · Answer

Here a Kotlin version of the function   fun getBoundsZoomLevel bounds  LatLngBounds  mapDim  Size   Double           val WORLD DIM   Size 256  256          val ZOOM MAX   21 toDouble             fun latRad lat  Double   Double               val sin   Math sin lat   Math PI   180               val radX2   Math log  1   sin     1 - sin     2              return max min radX2  Math PI   -Math PI   2                    fun zoom mapPx  Int  worldPx  Int  fraction  Double   Double               return floor Math log mapPx   worldPx   fraction    Math log 2 0                      val ne   bounds northeast          val sw   bounds southwest           val latFraction    latRad ne latitude  - latRad sw latitude     Math PI           val lngDiff   ne longitude - sw longitude          val lngFraction   if  lngDiff  lt  0     lngDiff   360    else    lngDiff   360             val latZoom   zoom mapDim height  WORLD DIM height  latFraction           val lngZoom   zoom mapDim width  WORLD DIM width  lngFraction            return minOf latZoom  lngZoom  ZOOM MAX

User · Answer

Since all of the other answers seem to have issues for me with one or another set of circumstances  map width height  bounds width height  etc   I figured I d put my answer here     There was a very useful javascript file here  http   www polyarc us adjust js  I used that as a base for this   var com   com        com local   com local        com local gmaps3   com local gmaps3         com local gmaps3 CoordinateUtils   new function         var OFFSET   268435456     var RADIUS   OFFSET   Math PI                Gets the minimum zoom level that entirely contains the Lat Lon bounding rectangle given               param  google maps LatLngBounds  boundary the Lat Lon bounding rectangle to be contained        param  number  mapWidth the width of the map in pixels        param  number  mapHeight the height of the map in pixels        return  number  the minimum zoom level that entirely contains the given Lat Lon rectangle boundary           this getMinimumZoomLevelContainingBounds   function   boundary  mapWidth  mapHeight           var zoomIndependentSouthWestPoint   latLonToZoomLevelIndependentPoint  boundary getSouthWest            var zoomIndependentNorthEastPoint   latLonToZoomLevelIndependentPoint  boundary getNorthEast            var zoomIndependentNorthWestPoint     x  zoomIndependentSouthWestPoint x  y  zoomIndependentNorthEastPoint y          var zoomIndependentSouthEastPoint     x  zoomIndependentNorthEastPoint x  y  zoomIndependentSouthWestPoint y          var zoomLevelDependentSouthEast  zoomLevelDependentNorthWest  zoomLevelWidth  zoomLevelHeight        for  var zoom   21  zoom  gt   0  --zoom              zoomLevelDependentSouthEast   zoomLevelIndependentPointToMapCanvasPoint  zoomIndependentSouthEastPoint  zoom             zoomLevelDependentNorthWest   zoomLevelIndependentPointToMapCanvasPoint  zoomIndependentNorthWestPoint  zoom             zoomLevelWidth   zoomLevelDependentSouthEast x - zoomLevelDependentNorthWest x           zoomLevelHeight   zoomLevelDependentSouthEast y - zoomLevelDependentNorthWest y           if  zoomLevelWidth  lt   mapWidth  amp  amp  zoomLevelHeight  lt   mapHeight               return zoom                return 0            function latLonToZoomLevelIndependentPoint   latLon           return   x  lonToX  latLon lng      y  latToY  latLon lat                 function zoomLevelIndependentPointToMapCanvasPoint   point  zoomLevel           return            x  zoomLevelIndependentCoordinateToMapCanvasCoordinate  point x  zoomLevel             y  zoomLevelIndependentCoordinateToMapCanvasCoordinate  point y  zoomLevel                     function zoomLevelIndependentCoordinateToMapCanvasCoordinate   coordinate  zoomLevel           return coordinate  gt  gt    21 - zoomLevel             function latToY   lat           return OFFSET - RADIUS   Math log    1   Math sin  lat   Math PI   180         1 - Math sin  lat   Math PI   180         2           function lonToX   lon           return OFFSET   RADIUS   lon   Math PI   180             You can certainly clean this up or minify it if needed  but I kept the variable names long in an attempt to make it easier to understand   If you are wondering where OFFSET came from  apparently 268435456 is half of earth s circumference in pixels at zoom level 21  according to http   www appelsiini net 2008 11 introduction-to-marker-clustering-with-google-maps

User · Answer

Valerio is almost right with his solution  but there is some logical mistake   you must firstly check wether angle2 is bigger than angle  before adding 360 at a negative    otherwise you always have a bigger value than angle  So the correct solution is    var west   calculateMin data longitudes   var east   calculateMax data longitudes   var angle   east - west  var north   calculateMax data latitudes   var south   calculateMin data latitudes   var angle2   north - south  var zoomfactor  var delta   0  var horizontal   false   if angle2  gt  angle        angle   angle2      delta   3     if  angle  lt  0        angle    360     zoomfactor   Math floor Math log 960   360   angle   GLOBE WIDTH    Math LN2  - 2 - delta    Delta is there  because i have a bigger width than height

User · Answer

For swift version func getBoundsZoomLevel bounds  GMSCoordinateBounds  mapDim  CGSize  - gt  Double           var bounds   bounds         let WORLD DIM   CGSize width  256  height  256          let ZOOM MAX  Double   21 0         func latRad   lat  Double  - gt  Double               let sin2   sin lat    pi   180              let radX2   log10  1   sin2     1 - sin2     2             return max min radX2   pi   - pi    2                   func zoom   mapPx  CGFloat   worldPx  CGFloat   fraction  Double  - gt  Double               return floor log10 Double mapPx    Double worldPx    fraction   log10 2 0                      let ne   bounds northEast         let sw   bounds southWest         let latFraction    latRad ne latitude  - latRad sw latitude      pi         let lngDiff   ne longitude - sw longitude         let lngFraction   lngDiff  lt  0    lngDiff   360     lngDiff   360          let latZoom   zoom mapDim height  WORLD DIM height  latFraction           let lngZoom   zoom mapDim width  WORLD DIM width  lngFraction           return min latZoom  lngZoom  ZOOM MAX

User · Answer

The calculation of the zoom level for the longitudes of Giles Gardam works fine for me  If you want to calculate the zoom factor for latitude  this is an easy solution that works fine   double minLat        double maxLat        double midAngle    maxLat minLat  2    alpha is the non-negative angle distance of alpha and beta to midangle double alpha    maxLat-midAngle    Projection screen is orthogonal to vector with angle midAngle   portion of horizontal scale  double yPortion   Math sin alpha Math pi 180    2  double latZoom   Math log mapSize height   GLOBE WIDTH   yPortion    Math ln2     return min  max zoom  of both zoom levels double zoom   Math min lngZoom  latZoom

User · Answer

A similar question has been asked on the Google group  http   groups google com group google-maps-js-api-v3 browse thread thread e6448fc197c3c892  The zoom levels are discrete  with the scale doubling in each step  So in general you cannot fit the bounds you want exactly  unless you are very lucky with the particular map size    Another issue is the ratio between side lengths e g  you cannot fit the bounds exactly to a thin rectangle inside a square map   There s no easy answer for how to fit exact bounds  because even if you are willing to change the size of the map div  you have to choose which size and corresponding zoom level you change to  roughly speaking  do you make it larger or smaller than it currently is     If you really need to calculate the zoom  rather than store it  this should do the trick   The Mercator projection warps latitude  but any difference in longitude always represents the same fraction of the width of the map  the angle difference in degrees   360   At zoom zero  the whole world map is 256x256 pixels  and zooming each level doubles both width and height  So after a little algebra we can calculate the zoom as follows  provided we know the map s width in pixels  Note that because longitude wraps around  we have to make sure the angle is positive   var GLOBE WIDTH   256     a constant in Google s map projection var west   sw lng    var east   ne lng    var angle   east - west  if  angle  lt  0      angle    360    var zoom   Math round Math log pixelWidth   360   angle   GLOBE WIDTH    Math LN2

User · Answer

For version 3 of the API  this is simple and working   var latlngList       latlngList push new google maps LatLng lat  lng     var bounds   new google maps LatLngBounds    latlngList each function n        bounds extend n        map setCenter bounds getCenter       or use custom center map fitBounds bounds     and some optional tricks     remove one zoom level to ensure no marker is on the edge  map setZoom map getZoom   - 1        set a minimum zoom     if you got only 1 marker or all markers are on the same address map will be zoomed too much  if map getZoom    gt  15       map setZoom 15

User · Answer

Work example to find average default center with react-google-maps on ES6   const bounds   new google maps LatLngBounds    paths map  latLng    gt  bounds extend new google maps LatLng latLng     const defaultCenter   bounds getCenter     lt GoogleMap  defaultZoom  paths length   12   4   defaultCenter  defaultCenter   gt    lt Marker position    lat  lng      gt   lt  GoogleMap gt

User · Answer

None of the highly upvoted answers worked for me  They threw various undefined errors and ended up calculating inf nan for angles  I suspect perhaps the behavior of LatLngBounds has changed over time  In any case  I found this code to work for my needs  perhaps it can help someone  function latRad lat      var sin   Math sin lat   Math PI   180     var radX2   Math log  1   sin     1 - sin     2    return Math max Math min radX2  Math PI   -Math PI    2     function getZoom lat a  lng a  lat b  lng b           let latDif   Math abs latRad lat a  - latRad lat b         let lngDif   Math abs lng a - lng b         let latFrac   latDif   Math PI        let lngFrac   lngDif   360         let lngZoom   Math log 1 latFrac    Math log 2        let latZoom   Math log 1 lngFrac    Math log 2         return Math min lngZoom  latZoom

User · Answer

map getBounds   is not momentary operation  so I use in similar case event handler  Here is my example in Coffeescript   map fitBounds  bounds  google maps event addListenerOnce  map   bounds changed     gt     map setZoom 12  if  map getZoom    gt  12

User · Answer

Dart Version    double latRad double lat        final double sin   math sin lat   math pi   180       final double radX2   math log  1   sin     1 - sin     2      return math max math min radX2  math pi   -math pi    2         double getMapBoundZoom LatLngBounds bounds  double mapWidth  double mapHeight        final LatLng northEast   bounds northEast      final LatLng southWest   bounds southWest       final double latFraction    latRad northEast latitude  - latRad southWest latitude     math pi       final double lngDiff   northEast longitude - southWest longitude      final double lngFraction     lngDiff  lt  0     lngDiff   360    lngDiff    360       final double latZoom    math log mapHeight   256   latFraction    math ln2  floorToDouble        final double lngZoom    math log mapWidth   256   lngFraction    math ln2  floorToDouble         return math min latZoom  lngZoom

User · Answer

Thanks to Giles Gardam for his answer  but it addresses only longitude and not latitude  A complete solution should calculate the zoom level needed for latitude and the zoom level needed for longitude  and then take the smaller  further out  of the two   Here is a function that uses both latitude and longitude   function getBoundsZoomLevel bounds  mapDim        var WORLD DIM     height  256  width  256        var ZOOM MAX   21       function latRad lat            var sin   Math sin lat   Math PI   180           var radX2   Math log  1   sin     1 - sin     2          return Math max Math min radX2  Math PI   -Math PI    2             function zoom mapPx  worldPx  fraction            return Math floor Math log mapPx   worldPx   fraction    Math LN2              var ne   bounds getNorthEast        var sw   bounds getSouthWest         var latFraction    latRad ne lat    - latRad sw lat       Math PI       var lngDiff   ne lng   - sw lng        var lngFraction     lngDiff  lt  0     lngDiff   360    lngDiff    360       var latZoom   zoom mapDim height  WORLD DIM height  latFraction       var lngZoom   zoom mapDim width  WORLD DIM width  lngFraction        return Math min latZoom  lngZoom  ZOOM MAX       Demo on jsfiddle  Parameters   The  bounds  parameter value should be a google maps LatLngBounds object   The  mapDim  parameter value should be an object with  height  and  width  properties that represent the height and width of the DOM element that displays the map  You may want to decrease these values if you want to ensure padding  That is  you may not want map markers within the bounds to be too close to the edge of the map    If you are using the jQuery library  the mapDim value can be obtained as follows   var  mapDiv       mapElementId    var mapDim     height   mapDiv height    width   mapDiv width        If you are using the Prototype library  the mapDim value can be obtained as follows   var mapDim      mapElementId   getDimensions      Return Value   The return value is the maximum zoom level that will still display the entire bounds  This value will be between 0 and the maximum zoom level  inclusive   The maximum zoom level is 21   I believe it was only 19 for Google Maps API v2      Explanation   Google Maps uses a Mercator projection  In a Mercator projection the lines of longitude are equally spaced  but the lines of latitude are not  The distance between lines of latitude increase as they go from the equator to the poles  In fact the distance tends towards infinity as it reaches the poles  A Google Maps map  however  does not show latitudes above approximately 85 degrees North or below approximately  -85 degrees South   reference   I calculate the actual cutoff at   -85 05112877980658 degrees    This makes the calculation of the fractions for the bounds more complicated for latitude than for longitude  I used a formula from Wikipedia to calculate the latitude fraction  I am assuming this matches the projection used by Google Maps  After all  the Google Maps documentation page I link to above contains a link to the same Wikipedia page   Other Notes    Zoom levels range from 0 to the maximum zoom level  Zoom level 0 is the map fully zoomed out  Higher levels zoom the map in further   reference  At zoom level 0 the entire world can be displayed in an area that is 256 x 256 pixels   reference  For each higher zoom level the number of pixels needed to display the same area doubles in both width and height   reference  Maps wrap in the longitudinal direction  but not in the latitudinal direction

User · Answer

Thanks  that helped me a lot in finding the most suitable zoom factor to correctly display a polyline  I find the maximum and minimum coordinates among the points I have to track and  in case the path is very  vertical   I just added few lines of code   var GLOBE WIDTH   256     a constant in Google s map projection var west    lt  php echo  minLng    gt   var east    lt  php echo  maxLng    gt    var north    lt  php echo  maxLat    gt     var south    lt  php echo  minLat    gt    var angle   east - west  if  angle  lt  0        angle    360     var angle2   north - south    if  angle2  gt  angle  angle   angle2   var zoomfactor   Math round Math log 960   360   angle   GLOBE WIDTH    Math LN2     Actually  the ideal zoom factor is zoomfactor-1

[google-maps] Google Maps V3 - How to calculate the zoom level for a given bounds

Examples related to google-maps

Examples related to google-maps-api-3