Google Map API Poly line between 2 locations

[marksie1988]

Hi Guys,

 

i have the below script which works out the driving distance between 2 points i am not great with JS and the google API and cant figure this out!

 

how do I create a poly line on the route that the 2 points has taken? i cant figure out how to get it to display on a map that i put in my html

var geocoder, location1, location2, gDir;

function initialize() {
geocoder = new GClientGeocoder();
gDir = new GDirections();
GEvent.addListener(gDir, "load", function() {
	var drivingDistanceMiles = (gDir.getDistance().meters / 1609.344).toFixed(1);
	var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
	document.getElementById('results').innerHTML = '<strong>Address 1: </strong>' + location1.address + ' (' + location1.lat + ':' + location1.lon + ')<br /><strong>Address 2: </strong>' + location2.address + ' (' + location2.lat + ':' + location2.lon + ')<br /><strong>Driving Distance: </strong>' + drivingDistanceMiles + ' miles (or ' + drivingDistanceKilometers + ' kilometers)';
	document.getElementById('miles').value = drivingDistanceMiles * 2;
});
}

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};
				gDir.load('from: ' + location1.address + ' to: ' + location2.address);
			}

		});
	}
});
}

 

 

the html i currently have is:

<h2>Calculate Distance</h2>
<center>

<form action="#" onsubmit="showLocation(); return false;">
      <table class="grid_table">
                    <tr class="grid_row_even">
					<td class="grid_cell">From Address: </td><td class="grid_cell"><input type="text" name="address1" class="address_input" size="40" /></td>
                    </tr>
                    <tr class="grid_row_even">
                    	<td class="grid_cell">To Address:</td><td class="grid_cell">
        <input type="text" name="address2" class="address_input" size="40" /></td>
                    </tr>
                </table>
        <input type="submit" name="find" value="Search" />
      </p>
    </form>
    <p id="results"></p>
</center>