Google Maps API V2 Directions not working!

[parkz16]

Hi,

I am using the Google Maps API to integrate mapping into a web application. I am using HTML and JavaScript.

I am having difficaulty integrating the directions function. I have a form which collects the users address/current location which is supposed to display a set of turn by turn direction and a route on the map when the users submits. I currently have a custom image icon which works perfectly.

I cannot figure out why this does not work as i dont not receive any error codes which is very furstrating.

Here is my HTML form

<form id="address_form" onsubmit="displayDirections(); return false" action="#" >
            <p>
            	<label for="street">Street Address</label>
            	<input id="street" name="street_address" type="text" tabindex="1" />
            </p>
       
            <p>
            	<label for="city">City</label>
            	<input id="city" name="city" type="text" tabindex="2" />
            </p>
 
            <p>
            	<label for="county">County</label>
           		<input id="county" name="county" type="text" tabindex="3" />
            </p>
            
            <p>
            	<label for="post">Post Code</label>
            	<input id="post" name="post" type="text" maxlength="6" size="6" tabindex="4"/>
            </p>
            
            <input name="submit" type="submit" value="Get Directions" />
        </form>

and here is the javascript files code:

function initialize() {// JavaScript Document
	if (GBrowserIsCompatible()) { // if the browser is compatible with Google Map's
		//settings
		var map 		 = document.getElementById("map"); // Get div element
		var m			 = new GMap2(map); // new instance of the GMap2 class and pass in our div location.
		var gdir 		 = new GDirections(map, document.getElementById("directions"));
		var customLatLng = new GLatLng(50.41233275147139, -3.587390184402466);
		var markerImage  = "images/logo.png";//img src location
    	var markerSize	 = new GSize(80, 30); //width, height
		//set custom marker possition
		var customMarker = createMarker(customLatLng, markerImage, markerSize);
		
		//handles errors
		GEvent.addListener(gdir, "error", handleErrors);
		
		var toAddress = "Torbay Business Park, 13 Woodview Road, Paignton, Devon, TQ4 7HP"; 
		
		//set map center
		m.addOverlay(customMarker);
		m.setCenter(customLatLng, 13); // pass in latitude, longitude, and zoom level.
		//END settings
		
		m.openInfoWindow(m.getCenter(), document.createTextNode("100% Health is located here!")); // displays the text
		m.setMapType(G_NORMAL_MAP); // sets the default mode to normal. 
		
		//Zoom control
		var typeC = new GMapTypeControl(); 
		var zoomC = new GLargeMapControl();
		m.addControl(typeC);  
		m.addControl(zoomC); // creates zoom functionality
		//END zoom control

	} else {
		alert("Upgrade your browser! It is not compatable with Google Maps.");
	}
}

/*
**
* function to create/return the marker object
* with custom image
*/
function createMarker(latlng, imageURL, imageSize)
{ 
    var marker      = new GIcon(G_DEFAULT_ICON);
    marker.image    = imageURL;
    marker.iconSize = imageSize;
    
    var options     =  {icon: marker};
    
    return new GMarker(latlng, options); 
}


function displayDirections()
{
    var fromAddress =
      document.getElementById("street").value
      + " " + document.getElementById("city").value
      + " " + document.getElementById("county").value
      + " " + document.getElementById("post").value;
	  
    
    //var language  = document.getElementById("language").options[document.getElementById("language").selectedIndex].value;
    
    gdir.load("from: " + fromAddress + " to: " + toAddress);
}

function handleErrors(){
   if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
     alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
   else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
     alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
   else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
     alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
   else if (gdir.getStatus().code == G_GEO_BAD_KEY)
     alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);
   else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
     alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
   else alert("An unknown error occurred.");
}

Any help would be appriciated. If you could tell me what possibly going wrong and how it can be fixed that would be great.

The link to the map is http://www.tristanparker.co.uk/testing/map/index.html if it happens to help!

Thanks

[SolidSolutions]

I'm seeing gdir not defined message in your .js file for this line:

gdir.load("from: " + fromAddress + " to: " + toAddress);