44

I need to know how to retrieve the radius of the viewable zoom level in google maps API v3.

For example, if I am at zoom level 3, and depending on the users screen size (lets just say 400x400 viewable region) how do I get the "radius" circle of the viewable area.

Alternatively I'm currently using map.fitBounds() for all the points I've added to the map so really all I NEED is the radius of all the bounds. What I want is something like "20 miles" that I can feed into my database app.

Mech
  • 2,904
  • 3
  • 24
  • 29

4 Answers4

87

The radius would equal the distance from the center of the bounds to one of the bound's corners. Using the Great Circle Distance Formula from the calculations from this page, I came up with the following:

var bounds = map.getBounds();

var center = bounds.getCenter();
var ne = bounds.getNorthEast();

// r = radius of the earth in statute miles
var r = 3963.0;  

// Convert lat or lng from decimal degrees into radians (divide by 57.2958)
var lat1 = center.lat() / 57.2958; 
var lon1 = center.lng() / 57.2958;
var lat2 = ne.lat() / 57.2958;
var lon2 = ne.lng() / 57.2958;

// distance = circle radius from center to Northeast corner of bounds
var dis = r * Math.acos(Math.sin(lat1) * Math.sin(lat2) + 
  Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1));

After playing some more with this, I've noticed that map.getBounds() will contain the full map viewport. But if your LatLngBounds is built by extending to include LatLng points, and then you issue a map.fitBounds(bounds), the api increases the map's viewport a bit so that the bounds "box" has some padding.

If you use the map's current viewport, the radius from the center to the corner of the viewport might be a longer radius than you want. Maybe the distance from the viewport center to the middle of the furthest viewport edge. (If the map isn't a perfect square)

Eric C
  • 3,886
  • 3
  • 30
  • 26
  • 1
    Awesomesauce, just what I needed. Thanks! – Mech Aug 20 '10 at 15:54
  • To get this example working, the first 3 lines should be `var bounds = map.getBounds(); var center = bounds.getCenter(); var ne = bounds.getNorthEast();` – Electric Sheep Apr 09 '15 at 14:04
  • This does not work for me. I tried implementing this and I keep getting "Cannot read property 'getCenter' of undefined". Has the 'getBounds' function changed? – Erica S. Mar 05 '19 at 19:40
32

Refactored version of Eric's answer above using google.maps.geometry.spherical namespace (make sure you loaded Geometry library to make this work).

var bounds = map.getBounds();
var center = map.getCenter();
if (bounds && center) {
  var ne = bounds.getNorthEast();
  // Calculate radius (in meters).
  var radius = google.maps.geometry.spherical.computeDistanceBetween(center, ne);
}
Community
  • 1
  • 1
Ruslan Kabalin
  • 6,580
  • 2
  • 28
  • 20
9

I also refactored Eric's answer, mine is as a standalone function, and am returning the result in meters (as needed by the Places API search.

function getBoundsRadius(bounds){
  // r = radius of the earth in km
  var r = 6378.8
  // degrees to radians (divide by 57.2958)
  var ne_lat = bounds.getNorthEast().lat() / 57.2958
  var ne_lng = bounds.getNorthEast().lng() / 57.2958
  var c_lat = bounds.getCenter().lat() / 57.2958
  var c_lng = bounds.getCenter().lng() / 57.2958
  // distance = circle radius from center to Northeast corner of bounds
  var r_km = r * Math.acos(
    Math.sin(c_lat) * Math.sin(ne_lat) + 
    Math.cos(c_lat) * Math.cos(ne_lat) * Math.cos(ne_lng - c_lng)
    )
  return r_km *1000 // radius in meters
}
Kyle Falconer
  • 8,302
  • 6
  • 48
  • 68
  • pls add ";" at your line ends, so you can use this also in minified versions – kaiser Nov 26 '18 at 01:25
  • @kaiser semicolons are optional in JavaScript and aren't needed if the minification software is even halfway decent. – Kyle Falconer Dec 06 '18 at 21:02
  • This is the radius on which some area is considered which is not visible in viewport, bu If I have to find radius of the current view such that circle should only be in current view. What should I have to do? – Aman Jain Aug 18 '20 at 08:27
2

I believe Bounds have the getNorthEast() and getSouthWest() methods, but this would give you a rectangle (which bounds really is) and you could than calculate the distance between those two, etc. To calculate the circle out of that rectandle might be a bit of work...

Maybe this will help: http://code.google.com/apis/maps/articles/mvcfun.html

and the example: http://code.google.com/apis/maps/articles/mvcfun/step6.html

Dziad Borowy
  • 12,368
  • 4
  • 41
  • 53