SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript / Ajax not working in Firefox of Safari..IE only

    Hi there...

    Trying to get a google maps postcode direction service working for my website.

    this is what i have created so far..

    http://www.synergyps.co.uk/test.html

    As you can (hopefully) see is that it works perfectly in IE. However it appears that the javascript / ajax does not want to work very nicely in Firefox of Safari and i cannot for the life of me figure out why.

    Main code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google Maps JavaScript API Example</title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzWsxUMzKiNzgk5W_Iu5SbxSCTS93GueUZUhCfHZrkF3klGg2IBS2c6R8c2RVDUTkGFtcj4-KzzbPJA"
          type="text/javascript"></script>
          <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAzWsxUMzKiNzgk5W_Iu5SbxSCTS93GueUZUhCfHZrkF3klGg2IBS2c6R8c2RVDUTkGFtcj4-KzzbPJA"
    	type="text/javascript"></script>
    
    
      </head>
      <body onload="initialize()" onunload="GUnload()">
      <script src="js/googledirections.js" type="text/javascript"></script>
      <table>
       <tr>
       	<td>
            	<input type="text" size="25" id="fromAddress" name="from" value=""/>
       	</td>
       	<td>
                <input type="submit" value="Get Directions" onclick="javascript:usePointFromPostcode(from.value, setDirections) " />
       	</td>
       </tr>
       </table>
        <br/>
        <h2>Office Map</h2>
        <div id="map_canvas" style="width: 500px; height: 500px"></div>
        <h2>Directions</h2>
        <div id="directions" style="width: 500px"></div>
      </body>
    </html>
    and the back end javascript..

    Code:
        var localSearch = new GlocalSearch();
        var OfficeLocation = "50.802443, -1.896274";
        var map;
        var gdir;
        var geocoder = null;
        var addressMarker;
    
    	function usePointFromPostcode(postcode, callbackFunction) {
             var locale = "en_US";
    	  localSearch.setSearchCompleteCallback(null,
    	    function() {
    	      if (localSearch.results[0]) {
    	        var resultLat = localSearch.results[0].lat;
    	        var resultLng = localSearch.results[0].lng;
    	        callbackFunction(resultLat,resultLng,locale);
    	      }else{
    	        alert("Postcode not found!");
    	      }
    	    });
    
    	  localSearch.execute(postcode + ", UK");
    	}
    
        function initialize() {
          if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map_canvas"));
            gdir = new GDirections(map, document.getElementById("directions"));
            GEvent.addListener(gdir, "load", onGDirectionsLoad);
            GEvent.addListener(gdir, "error", handleErrors);
            map.setCenter(new GLatLng(50.802443, -1.896274), 13);
          }
        }
    
    
        function setDirections(destLat,destLong, locale) {
          var fromAddress = destLat+", "+destLong;
          var toAddress = OfficeLocation;
          //This sets the address of EDHA HQ as a GEOCODE
          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_UNAVAILABLE_ADDRESS)  <--- Doc bug... this is either not defined, or Doc is wrong
    	//     alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\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(){
          // Use this function to access information about the latest load()
          // results.
    
          // e.g.
          // document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
    	  // and yada yada yada...
    	}
    i have adapted the google direction service with the ajax api from this website (http://www.tomanthony.co.uk/blog/geo...oogle-map-api/)

    can someone please help me.. what am i missing and what have i done wrong.

    Thank you

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <input type="submit" value="Get Directions" onclick="javascript:usePointFromPostcode(document.from.value, setDirections) "/>
    should be
    Code HTML4Strict:
    <input type="button" value="Get Directions" onclick="usePointFromPostcode(document.getElementById('fromAddress').value, setDirections) ">

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    beat me too it..i just figured that out this very minute...thanks anyhow

    Rodent

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note that I changed the type of the button to button, since you don't really want to submit the form.


Bookmarks

Posting Permissions

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