CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
kambythet
kambythet

Reputation: 716

Google maps v3 API - calculate bounds given center coordinates and distance

So, I've seen this solution on how to calculate bounds given center and zoom, but I'm trying to calculate bounds given center coordinates and a distance in miles.

How could I do this?

Upvotes: 3

Views: 6084

Answers (1)

geocodezip
geocodezip

Reputation: 161384

Use computeOffset to calculate a point at a distance east and west of the center. Add those two points to a google.maps.LatLngBounds and call map.fitBounds on that bounds.

proof of concept fiddle

code snippet:

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.04831, lng: -95.297565}
  });
  var distance = 10000; // 10 km
  var bounds = new google.maps.LatLngBounds();
  var east = google.maps.geometry.spherical.computeOffset(map.getCenter(), distance, 90);
  bounds.extend(east);
  var west = google.maps.geometry.spherical.computeOffset(map.getCenter(), distance, 270);
  bounds.extend(west);
  map.fitBounds(bounds);
  var polyline = new google.maps.Polyline({
    path: [east, west],
    map: map
  });
  var lineLength = google.maps.geometry.spherical.computeLength(polyline.getPath());
  var infowindow = new google.maps.InfoWindow();
  infowindow.setContent("line length is "+(lineLength/1000).toFixed(2)+" km");
  infowindow.setPosition(map.getCenter());
  infowindow.open(map);
}
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
        async defer></script>

Upvotes: 4

Related Questions