• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 419
  • Last Modified:

classic asp, javascript and google map

I have the following codes to connect google map direction.
And now I would like to allow use to type from/to address, city, state, and zip
so it will work dynamic. Can expert help me how to do it with the following codes?

Thanks

<script type="text/javascript">
 
    var map;
    var gdir;
    var geocoder = null;
    var addressMarker;
 
    function initialize() {
      if (GBrowserIsCompatible()) {      
        map = new GMap2(document.getElementById("map_canvas"));
        gdir = new GDirections(map, document.getElementById("directions"));
        GEvent.addListener(gdir, "addoverlay", onGDirectionsLoad);
        GEvent.addListener(gdir, "error", handleErrors);
 
        setDirections("28409", "28403", "en_US");
      }
    }
   
    function setDirections(fromAddress, toAddress, locale) {
      gdir.load("from: " + fromAddress + " to: " + toAddress,
                { "locale": locale });
    }
 
    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.");
    }
 
  function onGDirectionsLoad(){
   var poly = gdir.getPolyline();
   if (poly.getVertexCount() > 500) {
     alert("This route has too many vertices");
     return;
   }
   var baseUrl = "http://maps.google.com/staticmap?";
 
   var params = [];
   params.push("center=" + map.getCenter().lat().toFixed(6) + "," + map.getCenter().lng().toFixed(6));
 
   var markersArray = [];
   markersArray.push(poly.getVertex(0).toUrlValue(5) + ",greena");
   markersArray.push(poly.getVertex(poly.getVertexCount()-1).toUrlValue(5) + ",greenb");
 
   params.push("markers=" + markersArray.join("|"));
 
   var polyParams = "rgba:0x0000FF80,weight:5|";
   var polyLatLngs = [];
   for (var j = 0; j < poly.getVertexCount(); j++) {
     polyLatLngs.push(poly.getVertex(j).lat().toFixed(5) + "," + poly.getVertex(j).lng().toFixed(5));
   }
   params.push("path=" + polyParams + polyLatLngs.join("|"));
   params.push("zoom=" + map.getZoom());
   params.push("size=310x400");
   var img = document.createElement("img");
   img.src = baseUrl + params.join("&") + "&key=key";
   document.getElementById("staticMapIMG").innerHTML = "";
   document.getElementById("staticMapIMG").appendChild(img);
 
   document.getElementById("staticMapURL").innerHTML = baseUrl + params.join("&") + "&key=key";
}
    </script>
0
Webboy2008
Asked:
Webboy2008
  • 5
  • 3
1 Solution
 
BadotzCommented:
From where does this data come now?
0
 
Webboy2008Author Commented:
from/to address should be entered by the users.
the map need to be shown on the webpage
0
 
BadotzCommented:
Right, but how is the data passed in now?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Webboy2008Author Commented:
now is set in the code setDirections("28409", "28403", "en_US");
0
 
BadotzCommented:
Create <input> fields on your page for the values, then create a function that invokes
setDirections(fromAddress, toAddress, locale)

Open in new window

after getting the values from the user's input.
0
 
Webboy2008Author Commented:
Badotz,

I am not javascript coder, can you put them in codes. thanks
0
 
BadotzCommented:
function map_it(e) {
    //
    // It is assumed that the HTML elements are <input> elements,
    // and that they have an ID that corresponds to the names in quotes in the
    // following three statements
    //
    var fromAddress = document.getElementById("txtFromAddress").value;
    var toddress = document.getElementById("txtToAddress").value;
    var locale = document.getElementById("txtLocale").value;
    //
    // Invoke the function
    //
    setDirections(fromAddress, toAddress, locale);
}

Open in new window

0
 
BadotzCommented:
The strong, silent type, eh?

No worries - glad to help.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now