title: How to find distance between any two markers on Google MAP javascript
body: <p>I have  a javascript which fetches many Latlong from database and put it on Google Map. Now I want to find distance between any two markers. I have serched but was unable to find relevant information..</p>
  
  <p>My Script is as below.. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var map,infoWindow;
  
  
  
  function getData() {
      
       var lat1 = map.getCenter().lat();  
       var lng1= map.getCenter().lng();
       var zoom1 = map.getZoom();
        
        
       map = new google.maps.Map(document.getElementById("map"), {
          center: new google.maps.LatLng(lat1, lng1),
          zoom: zoom1,
          mapTypeId: 'roadmap'
        });
        
        
       infoWindow = new google.maps.InfoWindow;
     
       downloadUrl("http://x.x.x.x/rfplan/getsitedata_1.php?ssa="+$("#ssa option:selected").text() +
              "&amp;type="+$("#type option:selected").val() +
              "&amp;make="+$("#make option:selected").val() +
              "&amp;comm="+$("#comm option:selected").val() +
              "&amp;sev="+$("#sev option:selected").val() +
              "&amp;include="+$("#include option:selected").val() +
              "&amp;can="+$("#cand option:selected").val() +
              "&amp;ip_vand="+$("#vand option:selected").val(), function(data){
                  
                  
                  var xml = data.responseXML;
                  var markers = xml.documentElement.getElementsByTagName("marker");
                  for (var i = 0; i &lt; markers.length; i++) {
                    var address = markers[i].getAttribute("info");
                    var point = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("latitude")),
                        parseFloat(markers[i].getAttribute("longitude")));
                    var html = "&lt;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt;" + address;
                    var icon = customIcons[markers[i].getAttribute("color")] || {};
                    var marker = new google.maps.Marker({
                      map: map,
                      position: point,
                      icon: icon.icon
                    });
                    bindInfoWindow(marker, map, infoWindow, html);
                  }
              
                             
          });    
          
          
          
      
  }
  
  
  
  
  
  function proc(){
      
      
  }
  
  
  
  
      function load() {
         map = new google.maps.Map(document.getElementById("map"), {
          center: new google.maps.LatLng(22, 71),
          zoom: 7
          mapTypeId: 'roadmap',
        });
         infoWindow = new google.maps.InfoWindow;
      }
      
      function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
          infoWindow.setContent(html);
          infoWindow.open(map, marker);
        });
      }
  
      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;
  
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };
              request.open('GET', url, true);
        request.send(null);
      }
  
      function doNothing() {}
      </code></pre>
  </div>
  </div>
  </p>