1

How can I get distance(in kms) from mapCenter() to start/end position of map using Google Maps Javascript? Is there a way to do this?

Abraham Gnanasingh
  • 837
  • 2
  • 10
  • 31
  • Straight line distance - see http://stackoverflow.com/questions/1502590/calculate-distance-between-two-points-in-google-maps-v3 – Jaromanda X Sep 14 '15 at 06:12
  • I am only having the mapCenter() lat, lng(**say** p1). How can I get the left start/right end lat, lng(**say** p2) in map? – Abraham Gnanasingh Sep 14 '15 at 06:21
  • That would be https://developers.google.com/maps/documentation/javascript/reference?hl=en - `getBounds()` (just above `getCenter()` - which I presume you know about) – Jaromanda X Sep 14 '15 at 06:23
  • I am new to Google Maps Javascript API. When I use getBounds() in console, I am getting as Ea(G and j parameters inside) and Ja(G and j parameters inside) object parameters. Which one should I take for p2 lat, lng? – Abraham Gnanasingh Sep 14 '15 at 07:12

1 Answers1

2

You probably looking for a getBounds function:

Returns the lat/lng bounds of the current viewport. If more than one copy of the world is visible, the bounds range in longitude from -180 to 180 degrees inclusive. If the map is not yet initialized (i.e. the mapType is still null), or center and zoom have not been set then the result is null or undefined.

Then you could utilize Geometry Library in particular google.maps.geometry.spherical.computeDistanceBetween function to calculate distance between two points (in meters by default).

Example

function initialize() {
    var center = new google.maps.LatLng(55.755327, 37.622166);

    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });


    google.maps.event.addListener(map, 'bounds_changed', function() {
       var bounds = map.getBounds();
       var start = bounds.getNorthEast();
       var end = bounds.getSouthWest();
       var distStart = google.maps.geometry.spherical.computeDistanceBetween (center, start) / 1000.0;
       var distEnd = google.maps.geometry.spherical.computeDistanceBetween (center, end) / 1000.0;
      

       document.getElementById('output').innerHTML += 'Distiance from center to start:' + distStart; 
       document.getElementById('output').innerHTML += 'Distiance from center to end:' + distEnd + '<br/>'; 

    });
}

google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=geometry"></script>
<div id="map" style="width: 500px; height: 350px;"></div>
<div id='output'/>
Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193
  • I checked with your code and its working fine. But I have used the ''. If I do replace the libraries using geometry, the places API not working. How to solve this? – Abraham Gnanasingh Sep 14 '15 at 12:05
  • 1
    You just need to load both `places` and `geometry` libraries: https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=geometry,places For more details follow [Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/libraries) documentation – Vadim Gremyachev Sep 14 '15 at 12:12
  • 1
    I loaded both using **libraries=geometry,places**. Now all good. Thanks a lot for your time – Abraham Gnanasingh Sep 15 '15 at 05:48