Google maps destination

**Simon Canning** · May 3rd, 2012, 11:22 PM

I am using the Google maps API to create an embedded map that traces a route from a start destination to an end destination after clicking on a button.
This works well. However, if I enter new values into the two textboxes after I have already selected the button, the new route is not displayed.

Can I please have some help with this?

Here is my code:

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Multi-Point Routing</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyA2ZL9yi_puTGkUdLJTYxLFLOK10wnBBZo" type="text/javascript"></script>
</head>
<body onload="GLoad()" onunload="GUnload()">

<ul>
<li>Specify the start location. You can either enter an address at the bottom or click on the map.
<li>Specify the destination. You can either enter an address at the bottom or click on the map.
<li>You can also drag the start and end points.
<li>Click on "get directions".
<li>If the route cannot be calculated, or is not suitable, adjust the
positions of the points, and try again.
</ul>

<table>
<tr>
<td width=700>
<div id="map" style="width: 700px; height: 600px; border:1px solid black"></div>
</td>
<td width=400>
<div id="path" style="width: 400px; height: 600px; overflow:auto; border:1px solid black"></div>
</td>
</tr>
</table>

<div id="start">
Enter the address of the starting point or click the map.
<form onsubmit="showAddress(); return false" action="#">
<input id="search" size="60" type="text" value="Wellington" />
</form>
</div>

<div id="end">
Enter the address of the destination point or click the map.
<form onsubmit="showAddress(); return false" action="#">
<input id="search2" size="60" type="text" value="Newlands" />
</form>
</div>

<div id="drag">
Drag the markers as required.
<input type="button" value="Get Directions" onclick="directions()" />
</div>

<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>

<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {

var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(-41,174),5);

var bounds = new GLatLngBounds();

// ====== Create a Client Geocoder ======
var geo = new GClientGeocoder(new GGeocodeCache());

// ====== Array for decoding the failure codes ======
var reasons=[];
reasons[G_GEO_SUCCESS] = "Success";
reasons[G_GEO_MISSING_ADDRESS] = "Missing Address: The address was either missing or had no value.";
reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address: No corresponding geographic location could be found for the specified address.";
reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address: The geocode for the given address cannot be returned due to legal or contractual reasons.";
reasons[G_GEO_BAD_KEY] = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
reasons[G_GEO_SERVER_ERROR] = "Server error: The geocoding request could not be successfully processed.";
reasons[G_GEO_BAD_REQUEST] = "A directions request could not be successfully parsed.";
reasons[G_GEO_MISSING_QUERY] = "No query was specified in the input.";
reasons[G_GEO_UNKNOWN_DIRECTIONS] = "The GDirections object could not compute directions between the points.";

// ====== Geocoding ======
function showAddress() {

if (state==0) {
var search = document.getElementById("search").value;
addresses[0] = search;
}
if (state==1) {
var search = document.getElementById("search2").value;
addresses[4] = search;
}
geo.getLatLng(search, function (point)
{
if (point) {
if (state==1) {doEnd(point)}
if (state==0) {doStart(point)}
}
else {
var result=geo.getCache().get(search);
if (result) {
var reason="Code "+result.Status.code;
if (reasons[result.Status.code]) {
reason = reasons[result.Status.code]
}
} else {
var reason = "";
}
alert('Could not find "'+search+ '" ' + reason);
}
}
);
}

function swapMarkers(i) {
map.removeOverlay(gmarkers[i]);
createMarker(path[i],i,icon2);
}

var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.iconSize=new GSize(24,38);

var icon1 = G_START_ICON;
var icon2 = G_PAUSE_ICON;
var icon3 = G_END_ICON;
var icon4 = new GIcon(baseIcon,"http://labs.google.com/ridefinder/images/mm_20_white.png");
icon4.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon4.iconSize = new GSize(12, 20);
icon4.shadowSize = new GSize(22, 20);
icon4.iconAnchor = new GPoint(6, 20);
icon4.infoWindowAnchor = new GPoint(5, 1);

function createMarker(point,i,icon) {
var marker = new GMarker(point, {draggable:true,icon:icon});
gmarkers[i]=marker;
GEvent.addListener(marker, "dragend", function() {
path[i] = marker.getPoint();
if (!active[i]) {
setTimeout('swapMarkers('+i+')', 1000);
}
active[i] = true;
addresses[i] = "";
});
map.addOverlay(marker);
}

// ===== Array to contain the points of the path =====
var path = [];
var active = [true,false,false,false,true];
var gmarkers = [];
var addresses = [];

// ===== State Driven Processing =====
var state = 0;

GEvent.addListener(map, "click", function(overlay,point) {
if (point) {
if (state == 1) { doEnd(point) }
if (state == 0) { doStart(point) }
}
});

function doStart(point) {
createMarker(point,0,icon1);
path[0] = point;
state = 1;
}

function doEnd(point) {
createMarker(point,4,icon3);
path[4] = point;
state = 2;
for (var i=1; i<4; i++) {
var lat = (path[0].lat()*(4-i) + path[4].lat()*i)/4;
var lng = (path[0].lng()*(4-i) + path[4].lng()*i)/4;
var p = new GLatLng(lat,lng);
createMarker(p,i,icon4);
path[i] = p;
}
bounds.extend(path[0]);
bounds.extend(path[4]);
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
}

var gdir=new GDirections(null, document.getElementById("path"));

GEvent.addListener(gdir,"error", function() {
var code = gdir.getStatus().code;
var reason="Code "+code;
if (reasons[code]) {
reason = "Code "+code +" : "+reasons

Code:

        } 
        alert("Failed to obtain directions, "+reason);
      });

      var poly;
      GEvent.addListener(gdir, "load", function() {
        if (poly) map.removeOverlay(poly);
        poly = gdir.getPolyline();
        map.addOverlay(poly);
      });
        
		function searchFunc(point) { 
    if (point) {
        if (state==1) {doEnd(point)}
        if (state==0) {doStart(point)}
    } else {
        var result=geo.getCache().get(search);
        if (result) {
            var reason="Code "+result.Status.code;
            if (reasons[result.Status.code]) {
                reason = reasons[result.Status.code]
            }
        } else {
          var reason = "";
        } 
        alert('Could not find "'+search+ '" ' + reason);
    }
}

function GLoad() {          
    var search = document.getElementById("search").value,
        search2 = document.getElementById("search2").value;
    addresses[0] = search;
    addresses[4] = search2;
    geo.getLatLng(search, searchFunc);
    geo.getLatLng(search2, searchFunc);        
}


      function directions() {
	  
        if (addresses[0]) {var a = addresses[0] + "@" + path[0].toUrlValue(6)}
          else {var a = path[0].toUrlValue(6)} 
        if (addresses[4]) {var b = addresses[4] + "@" + path[4].toUrlValue(6)}
          else {var b = path[4].toUrlValue(6)} 
        for (var i=3; i>0; i--) {
          if (active[i]) {
            b = path[i].toUrlValue(6) +" to: "+b;
          }
        }
        var a = "from: "+a + " to: " + b;
        gdir.load(a, {getPolyline:true});
      }
    }
    
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/

    //]]>
    </script>
  </body>

</html>

**Nightwalker83** · May 4th, 2012, 10:07 PM

How are you inputting the coordinates, via textbox or hard coding them?

Edit:

Also, you are missing the "/" from your closing [code] tag.

**Simon Canning** · May 5th, 2012, 01:42 AM

textbox. The names of the textboxes are search and search2.

Can you please help me modify my code to work in this scenario?

thanks

Thread: Google maps destination

Thread Tools

Display

Google maps destination

Re: Google maps destination

Re: Google maps destination

Posting Permissions