Results 1 to 3 of 3
  1. #1

    Thread Starter
    Frenzied Member
    Join Date
    Sep 2008

    Google maps destination

    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:

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

    <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&amp;v=2&amp;sensor=false&amp;key=AIzaSyA2ZL9yi_puTGkUdLJTYxLFLOK10wnBBZo" type="text/javascript"></script>
    <body onload="GLoad()" onunload="GUnload()">

    <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.

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

    <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" />

    <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" />

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

    <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.

    <script type="text/javascript">

    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) {

    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});
    GEvent.addListener(marker, "dragend", function() {
    path[i] = marker.getPoint();
    if (!active[i]) {
    setTimeout('swapMarkers('+i+')', 1000);
    active[i] = true;
    addresses[i] = "";

    // ===== 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) {
    path[0] = point;
    state = 1;

    function doEnd(point) {
    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);
    path[i] = p;

    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
            alert("Failed to obtain directions, "+reason);
          var poly;
          GEvent.addListener(gdir, "load", function() {
            if (poly) map.removeOverlay(poly);
            poly = gdir.getPolyline();
    		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/
    Last edited by Simon Canning; May 5th, 2012 at 01:39 AM.

  2. #2
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Adelaide, Australia

    Re: Google maps destination

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


    Also, you are missing the "/" from your closing [code] tag.
    Last edited by Nightwalker83; May 4th, 2012 at 10:08 PM. Reason: Adding more!
    when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    Please consider giving me some rep points if I help you a lot.
    Please rate my post if you find it helpful!
    Technology is a dangerous thing in the hands of an idiot! I am that idiot.

  3. #3

    Thread Starter
    Frenzied Member
    Join Date
    Sep 2008

    Re: Google maps destination

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

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

    Last edited by Simon Canning; May 5th, 2012 at 02:40 AM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts


Click Here to Expand Forum to Full Width

By using this site, you agree to the Privacy Policy