Easy Code Stuff: Getting The Distance Between Two Markers In Google Map Using Google MAP API

In this article I'm going to show guys to get the distance between two locations. Please note that, this is not the direction distance. That mean if you select two locations you will get distance, which is going to very less than the travel distance. In-order to do that I have created a simple html page consisting google map with two markers. You can drag the markers as you wish. In the page below the map I have shown the selected locations Latitude and Longitude. After moving the markers you will get the distance.

Have a look on the code. It's simply created using Html and JavaScript.

<html>
 <head>
  <title>Getting The Distance Between Two Markers In Google Map Using Google MAP API</title>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
 </head>
 <body> 
  <div id="map-canvas" style="height:75%;"></div>
  <div>
   <strong>From Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="fromLat"/>
   <span>Longitude : </span>
   <input type="text" id="fromLng"/>
   <br/><br/>

   <strong>To Location</strong><br/>
   <span>Latitude : </span>
   <input type="text" id="toLat"/>
   <span>Longitude : </span>
   <input type="text" id="toLng"/>
   <br/><br/>

   <strong>Distance : </strong>
   <span id="distance">0.00</span>
   <span> meters</span>
  </div>
  <script type="text/javascript">
      var map;
      var fromLat = 6.928940573589038;
      var fromLng = 79.87219331750487;
      var toLat = 6.929110981212029;
      var toLng = 79.87013338098143;

      var fromIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
      var toIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';

      loadMap();
      setFromMarker();
      setToMarker();

      function loadMap() {
          map = new google.maps.Map(document.getElementById('map-canvas'), {
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: new google.maps.LatLng(fromLat, fromLng),
              zoom: 15
          });
      }

      function setFromMarker() {
          var fromMarker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(fromLat, fromLng),
              icon: fromIcon,
              animation: google.maps.Animation.DROP,
              draggable: true
          });

          google.maps.event.addListener(fromMarker, 'dragend', function (event) {
              fromLat = event.latLng.lat();
              fromLng = event.latLng.lng();
              setLatLngDetails();
          });
      }

      function setToMarker() {
          var toMarker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(toLat, toLng),
              icon: toIcon,
              animation: google.maps.Animation.DROP,
              draggable: true
          });

          google.maps.event.addListener(toMarker, 'dragend', function (event) {
              toLat = event.latLng.lat();
              toLng = event.latLng.lng();
              setLatLngDetails();
          });
      }

      function setLatLngDetails() {
          $("#fromLat").val(fromLat);
          $("#fromLng").val(fromLng);
          $("#toLat").val(toLat);
          $("#toLng").val(toLng);
          getDistance();
      }

      function getDistance() {
          var fromLocation = new google.maps.LatLng(fromLat, fromLng);
          var toLocation = new google.maps.LatLng(toLat, toLng);

          var distance = google.maps.geometry.spherical.computeDistanceBetween(fromLocation, toLocation).toFixed(2);
          $("#distance").html(distance);
      }
   
  </script>
 </body>
</html>

Simply copy and paste the above codes in a text editor and it in a browser. You will get the below outputs.

If you carefully read the above code, you will know that I have initialized the from and to locations. If you want to make this code more efficient way, where you want to get the user location as default location. Click Here to check the article.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Easy Code Stuff

Oct 17, 2015

Getting The Distance Between Two Markers In Google Map Using Google MAP API

No comments:

JWT Token Decode Using Jquery