formexample GeoLocation City State

by Lucille Kenney

HTML

<form action="#" id="theForm" name="firstForm">
        <h4>Lookup happens <code>onchange</code></h4>
        Enter a Zip or Postal Code (worldwide)<br>
        <input placeholder="Postal Code" name="zip" id="zip" type="text"><br>

        Lat: <input size="20" placeholder="Lat" name="lat" id="lat" type="text"><br>
        Lon: <input size="20" placeholder="Lon" name="lon" id="lon" type="text">
        City: <input size="20" placeholder="City" name="city" id="city" type="text">
        State: <input size="20" placeholder="State" name="state" id="state" type="text">


       </form>
       <code><div id="output"></div></code>

JavaScript

/* formexample.js */

        var lat = document.getElementById("lat");
        var lon = document.getElementById("lon");
        var zip = document.getElementById("zip");
        var city = document.getElementById("city");
        var state = document.getElementById("state");

        zip.addEventListener("change", getGeo);

        function getGeo(e){

            // make an send an XmlHttpRequest
            var x = new XMLHttpRequest();
            x.open("GET","http://maps.googleapis.com/maps/api/geocode/json?address="+this.value,true);
            x.send();

            // set up a listener for the response
            x.onreadystatechange=function(){
                if (this.readyState==4 && this.status==200){
                    //alert(this.response);
                    var o = this.response;
 var c = JSON.parse(this.response).results[0].address_components[1].long_name;
                    //alert(c);
var s = JSON.parse(this.response).results[0].address_components[2].short_name;
                    //alert(s);

                    if (c) {
                        city.value = c;
                    }
                    if (s) {
                        state.value = s;
                    }

                    var o = this.response;
                    document.getElementById("output").innerHTML = o;
                    var l = JSON.parse(this.response).results[0].geometry.location;
                    if (l.lat) {
                        lat.value = l.lat;
                    }
                    if (l.lng) {
                        lon.value = l.lng;
                    }


                }
            }


        }