Sanjeewa Malalgoda's Blog: Find Distance Between 2 Cities Using Google Map

Copy This Code to file named main.html and save it

Then open with any web browser

//===========================================================

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<title>Google Maps Find Distance</title>
<script src="http://maps.google.com/maps?file=api&;v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script>
<script type="text/javascript">
   var geocoder, city1, city2;
    function initialize()
    {
      geocoder = new GClientGeocoder();
      //Creates a new instance of a geocoder that talks directly to Google servers.
    }
    function showLocation()
    {
       geocoder.getLocations(document.forms[0].address1.value, set1);
      //set1 method calls then get the address 1.if only location 1 get correct way
      //then only we can get the second address.else display error message
       //getLocations(java.lang.String address, GGeocodeAdvancedResultListener result)
      //getLocations(address, callback) none Sends a request to Google servers to geocode the specified address.
      //getLatLng(address, callback) none Sends a request to Google servers to geocode the specified address. If the
      //address was successfully located, the user-specified callback function is invoked with a GLatLng point. Otherwise,
      //the callback function is given a null point. In case of ambiguous addresses, only the point for the best match is passed to the callback function.
   }
   function calculateDistance()
    {
        try
        {
           var glatlng1 = new GLatLng(city1.lat, city1.lon);
          var glatlng2 = new GLatLng(city2.lat, city2.lon);
           var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);
            var kmdistance = (miledistance * 1.609344).toFixed(1);
           document.getElementById('results').innerHTML = '<strong>Address 1: </strong>' + city1.address + '<br /><strong>Address 2: </strong>' + city2.address + '<br /><strong>Distance: </strong>' + miledistance + ' miles (or ' + kmdistance + ' kilometers)';
        }
        catch (error)
        {
            alert(error);
        }
   }

      function set1(response)
       {
    //200 OK
       //Standard response for successful HTTP requests. The actual response will depend on the request method used. In a GET request,
    //the response will contain an entity corresponding to the requested resource. In a POST request the response will contain an entity
    //describing or containing the result of the action.
           if (!response || response.Status.code != 200)
        {
            alert("Sorry, we were unable to geocode the first address");
            //messages
        }
          else
        {
            //set the 1st location only get correct response
            city1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
             //.if only location 1 get correct way then only we can get the second address.else display error message
             geocoder.getLocations(document.forms[0].address2.value, set2);
        }
        }

    function set2(response)
            {
                if (!response || response.Status.code != 200)
                {
                    alert("Sorry, we were unable to geocode the second address");
                }
                else
                {
                    //set the 2nd location coordinates
                    city2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                    //when both address get in correct way then we can calculate the distance
                    calculateDistance();
                    load();
                    addToMap(response);
                }
            }
function GoToNext()
{
window.location.href = 'map.html';
//go to next page
}

function help()
{
window.location.href = 'help.html';
//go to next page
}
   </script>
</head>

    <form action="#" onsubmit="showLocation(); return false;">
<h1 align="center"><font color="#CC0033" size="5" face="Geneva, Arial, Helvetica, sans-serif">Find
    Distance Between 2 Cities Using Google Map</font></h1>
<h1><font color="#00FF33" size="4" face="Courier New, Courier, mono"></font></h1>
<p><font color="#0066CC" size="4" face="Verdana, Arial, Helvetica, sans-serif">by:S.R.B.
    Malalgoda</font><font color="#00FF33" size="4" face="Courier New, Courier, mono">
    </font></p>
<p>
    <input type="text" name="address1" value="" class="address_input" size="40" />
    <input type="text" name="address2" value="" class="address_input" size="40" />
</p>
<p>
    <input type="submit" name="find" value="Calculate Distance" /><p><input type="submit" value="View Map" onClick="GoToNext()"
<p>
</p>
   </form>
    <p id="results"></p>

</body>
</html>

Sanjeewa Malalgoda's Blog

Find Distance Between 2 Cities Using Google Map

6 comments:

Empowering the Future of API Management: Unveiling the Journey of WSO2 API Platform for Kubernetes (APK) Project and the Anticipated Alpha Release