Google Maps v3 - Viewable map radius in miles

Question

How can I find the proximity of the visible area of my map ?

All this works and is a post to help others who may be looking.

This code looks at your Google Map v3 and outputs by var proximity the radius in miles of your current map view.

Make sure in your HTML you have

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=geometry"></script>

as libraries=geometry enables it.

// Get Gmap radius / proximity start
var bounds = new google.maps.LatLngBounds();
var sw = bounds.getSouthWest(); 
var ne = bounds.getNorthEast();

var proximitymeter = google.maps.geometry.spherical.computeDistanceBetween (sw, ne);
var proximitymiles = proximitymeter * 0.000621371192;
alert(" " + proximitymiles + " Miles Proximity");
var proxmity =  proximitymiles; 
// Get Gmap radius / proximity End

I hope it helps someone.

An additional edit ( untested ) which allows for screen rotation follows:

    // Get Gmap radius / proximity start
var bounds = new google.maps.LatLngBounds();
var sw = bounds.getSouthWest(); 
var ne = bounds.getNorthEast();
var se = bounds.getSouthEast(); 
var nw = bounds.getNorthWest();

var proximitymeterswne = google.maps.geometry.spherical.computeDistanceBetween (sw, ne);
var proximitymetersenw = google.maps.geometry.spherical.computeDistanceBetween (se, nw);

if (proximitymeterswne > proximitymetersenw) {proximitymeterswne = proximitymiles}
else {if (proximitymetersenw > proximitymeterswne) {proximitymetersenw = proximitymiles};}; 

var proximitymiles = proximitymeter * 0.000621371192;
alert(" " + proximitymiles + " Miles Proximity");
var proxmity =  proximitymiles; 
// Get Gmap radius / proximity End

Another EDIT

// Watches for map bounds change - if so - set radius and refresh data Start
function setproximityfrommap() {
    // http://stackoverflow.com/questions/3525670/radius-of-viewable-region-in-google-maps-v3
    // Get Gmap radius / proximity start
    var bounds = new google.maps.LatLngBounds();
    // bounds = map.LatLngBounds();
    //center = new google.maps.LatLng();

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

    //var center = map.LatLngBounds.getCenter();
    //var ne = map.LatLngBounds.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
    proximity = r * Math.acos(Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1));
    $('#proximity').val(proximity);
    // Get Gmap radius / proximity End
};

I put the edited code in the first post.

Terran

+1 I like your generous approach! But, to stay on the Q&A style of the site, I suggest you to post the goal in the question and the solution as an answer and then accept it (even if it's yours). Thanks ;) — bluish, Feb 03 '12 at 07:59
I could do with adding a check using other corners as this is for an app on a phone which could be turned around ( orientation wise ) as well. Based on readings taking the biggest number as the proximity to use. — Terran Brown, Feb 03 '12 at 12:31
I've not tested this but.... var se = bounds.getSouthEast(); var nw = bounds.getNorthWest(); var proximitymeterswne = google.maps.geometry.spherical.computeDistanceBetween (sw, ne); var proximitymetersenw = google.maps.geometry.spherical.computeDistanceBetween (se, nw); if (proximitymeterswne > proximitymetersenw) {proximitymeterswne = proximitymiles} else {if (proximitymetersenw > proximitymeterswne) {proximitymeterswne = proximitymiles};}; — Terran Brown, Feb 03 '12 at 12:39
I meant: write in the question which is the issue or the target you want to achieve (simply "In Google Map v3 I need to get the radius in miles of my current map view.") and add an answer (not a comment) with the complete solution. — bluish, Feb 03 '12 at 12:50
@TerranBrown, curious how you came up with the `0.000621371192` number. I ask because this is somewhat working for me, but it's a little bit off and it's kind of hard to debug why. I thought it might have to do with the Maps API thinking my map was a different size than the DOM is actually displaying it as, but even if I changed the height by, say 150px, the `sw` and `ne` bounds are still the same. — Trevan Hetzel, Jun 07 '15 at 04:18
Heh, nevermind, I see that that's the meters to miles calculation :) — Trevan Hetzel, Jun 07 '15 at 04:20
bounds.getNorthWest()? bounds.getSouthEast()? There are no such functions on the google.maps.LatLngBounds class... — pasx, Jul 19 '15 at 12:18
But in case you need them: getBoundsNorthWest : function(bounds) { var ne = bounds.getNorthEast(); var sw = bounds.getSouthWest(); return new google.maps.LatLng (ne.lat(), sw.lng()); }, getBoundsSouthEast : function(bounds) { var ne = bounds.getNorthEast(); var sw = bounds.getSouthWest(); return new google.maps.LatLng (sw.lat(), ne.lng()); } — pasx, Jul 19 '15 at 12:25

score 10 · Accepted Answer · edited Jan 14 '13 at 03:07

// Watches for map bounds change - if so - set radius and refresh data Start
function setproximityfrommap() {
    // http://stackoverflow.com/questions/3525670/radius-of-viewable-region-in-google-maps-v3
    // Get Gmap radius / proximity start
    // First, determine the map bounds
    var bounds = map.getBounds();

    // Then the points
    var swPoint = bounds.getSouthWest();
    var nePoint = bounds.getNorthEast();

    // Now, each individual coordinate
    var swLat = swPoint.lat();
    var swLng = swPoint.lng();
    var neLat = nePoint.lat();
    var neLng = nePoint.lng();

    var proximitymeter = google.maps.geometry.spherical.computeDistanceBetween(swPoint, nePoint);
    var proximitymiles = proximitymeter * 0.000621371192;
    proxmity = proximitymiles;
    console.log("Proxmity " + proximitymiles + " miles");
}

Google Maps v3 - Viewable map radius in miles

1 Answers1