0

I have so far a working covert script to get Longitude and Latitude from an Address. Problem is that I can't submit, while the submit button is used to get the Longitude and Latitude.

So I would like the following: Address will be placed in a hidden field. (populated by my CMS, ExpressionEngine) Than on page load the Longitude and Latitude will be collected in two input fields than press submit and done.

But how to do this, I use the following code so far. Please help.

     <!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>
        <title>Longitude and Latitude from address</title>

        <script src="http://maps.google.com/maps?file=api&v=2&key=YOUR KEY" type="text/javascript" charset="utf-8">

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

        function load() {
          if (GBrowserIsCompatible()) {
            geocoder = new GClientGeocoder();
           }
        }

        function showAddress(geolocation) {
          if (geocoder) {
            geocoder.getLatLng(
              geolocation,
              function(point) {
                if (!point) {
                  alert(geolocation + " not found");
                } else {
                  document.geoform.longitude.value = point.x;
                  document.geoform.latitude.value = point.y;
                }
              }
            );
          }
        } 

        //]]>
        </script>
        </head>
      <body onload="load()">

     <form action="#" name="geoform" id="geoform" onsubmit="showAddress(this.geolocation.value); return false">
     <input  type="hidden" name="geolocation" value="Address goes here, populated by cms" size="50"  />

     Decimal Longitude:
     <input  name="longitude" type="text" id="longitude" value="" />

     Decimal Latitude:
     <input  name="latitude" type="text"  id="latitude"  value="" />

     <input type="submit" value="Longitude/latitude codes" />
     </form>
     </body>
     </html>
j0k
  • 22,600
  • 28
  • 79
  • 90
  • Hello Matrix, I am not getting an error. If I use above script as is I would get the long and lat. If I remove "return false" from form it's submitting but not getting the long and lat. That's why I want to use on page load. (I tried .submit() but without any luck) – Martijn Broeders Jan 24 '12 at 09:09

1 Answers1

1

By the time you're submitting the form, it's too late to make a request to geocode an address. It's better to geocode the address on the page load, and then just submit the form.

    function load() {
      if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        geocoder.getLatLng(
          document.geoform.geolocation.value,
          function(point) {
            if (!point) {
              alert(geolocation + " not found");
            } else {
              document.geoform.longitude.value = point.x;
              document.geoform.latitude.value = point.y;
            }
          }
        );
      }
    } 

By the way, three important points:

  1. It's against Google's Terms of Service to geocode without displaying the results on a Google Map. See 10.1.1(g)
  2. You shouldn't be developing with v2 anymore, it's deprecated and going away soon. Use v3 instead.
  3. There is a web service geocoding API you can use to do this all in the server, and avoid this complexity altogether.
djd
  • 4,988
  • 2
  • 25
  • 35