javascript: I want to show city and state when the zip is filled in. I have the the geo location working but now I just want city and state to show when the zip is filled in.
This is my HTML:
<label for="city">City</label>
<input size="20" placeholder="Town or City" name="city" id="city" type="text">
<br>
<label for="state">State</label>
<input size="10" placeholder="State/Province" name="state" id="state" type="text">
And this is my JavaScript:
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){
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;
}
//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;
}
}
}
}
It's all in this jsfiddle http://jsfiddle.net/lakenney/gad7ntgk/
Looks like you already have a good start, but this example might help a bit. Run the code snippet and enter a postal code or city name. I kept it very simple, but you could check the data array length. When equal to 1 you have a match and could display geo location and other into on the page.
Keep in mind that you're doing a cross domain ajax call ... which will fail in IE < 10. Lots of questions about that on SO if you need help.
<!DOCTYPE HTML>
<html>
<head>
<title>Demo</title>
<style type="text/css">
#container {position: relative; }
#location {width: 20em; border: 1px steelblue solid;}
#results { border: 1px gray solid; padding: 2px; position: absolute;background-color:aliceblue;}
#results ul { list-style: none; padding: 0; }
#results ul li {padding: 2px; color: dimgray; }
</style>
</head>
<body>
<div id="container">
Enter a city or postal code:<br>
<input id="location" type="text" onKeyup="getLocation()" value="London">
<div id="results"></div>
</div>
<script type="text/javascript">
function getLocation( ) {
var value, xhr, html, data, i;
value = document.getElementById('location').value;
if (value.length < 2) return;
xhr = new XMLHttpRequest();
xhr.open("GET", "http://maps.googleapis.com/maps/api/geocode/json?address=" + value, true );
xhr.onreadystatechange = function() {
if (xhr.readyState==4 && xhr.status==200) {
data = JSON.parse(xhr.responseText);
html = '';
for(i=0; i< data.results.length; i++ ) {
html += '<li>' + data.results[i].formatted_address;
}
document.getElementById('results').innerHTML = '<ul>' + html + '</ul>';
}
}
xhr.send();
}
getLocation();
document.getElementById('location').focus();
</script>
</body>
</html>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments