title: Distance between two locations in javascript
body: <p>Can some one help me what went wrong on this code snippet ? My ultimate aim to find distance two locations using googles javascript API . I have used geocomplete jquery function for address autocomplete. On click of search nothing is happening.Im just a beginner please help </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Distance between Two Places&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
       &lt;script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"&gt;&lt;/script&gt;
       &lt;script type="text/javascript"&gt;
  
      var geocoder, location1, location2;
  
      function initialize() {
          geocoder = new GClientGeocoder();
      }
  
      function showLocation() {
          geocoder.getLocations(document.forms[0].address1.value, function (response) {
              if (!response || response.Status.code != 200)
              {
                  alert("Sorry, we were unable to geocode the first address");
              }
              else
              {
                  location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                  geocoder.getLocations(document.forms[0].address2.value, function (response) {
                      if (!response || response.Status.code != 200)
                      {
                          alert("Sorry, we were unable to geocode the second address");
                      }
                      else
                      {
                          location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                          calculateDistance();
                      }
                  });
              }
          });
      }
  
      function calculateDistance()
      {
          try
          {
              var glatlng1 = new GLatLng(location1.lat, location1.lon);
              var glatlng2 = new GLatLng(location2.lat, location2.lon);
              var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
              var kmdistance = (miledistance * 1.609344).toFixed(1);
  
              document.getElementById('results').innerHTML = '&lt;strong&gt;Distance: &lt;/strong&gt;' + miledistance + ' miles (or ' + kmdistance + ' kilometers)';
          }
          catch (error)
          {
              alert(error);
          }
      }
  
  
  
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="initialize()"&gt;
  
      &lt;form action="#" onsubmit="showLocation(); return false;"&gt;
        &lt;input id="geocomplete" type="text" name="address1" placeholder="Type in an address" size="90" /&gt;
          &lt;input id="geocomplete1" type="text" name="address2" placeholder="Type in an address" size="90" /&gt;
       &lt;input type="submit" name="find" value="Search" /&gt;
      &lt;/form&gt;
  
     &lt;p id="results"&gt;&lt;/p&gt;
  
      &lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;amp;libraries=places"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="../jquery.geocomplete.js"&gt;&lt;/script&gt;
      &lt;script src="logger.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
        $(function(){
  
          $("#geocomplete").geocomplete()
            .bind("geocode:result", function(event, result){
              $.log("Result: " + result.formatted_address);
            })
            .bind("geocode:error", function(event, status){
              $.log("ERROR: " + status);
            })
            .bind("geocode:multiple", function(event, results){
              $.log("Multiple: " + results.length + " results found");
            });
  
            $("#geocomplete1").geocomplete()
            .bind("geocode:result", function(event, result){
              $.log("Result: " + result.formatted_address);
            })
            .bind("geocode:error", function(event, status){
              $.log("ERROR: " + status);
            })
            .bind("geocode:multiple", function(event, results){
              $.log("Multiple: " + results.length + " results found");
            });
  
          $("#find").click(function(){
            $("#geocomplete").trigger("geocode");
          });
  
  
          $("#examples a").click(function(){
            $("#geocomplete").val($(this).text()).trigger("geocode");
            return false;
          });
  
        });
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>