I want to present my users with a text box wherein they can type in their address. As they type their address, I want to provide the users with suggestions/predictions of what address they are trying to type. I'm also concerned about the relevance of this address (e.g. that the address is not an address halfway across the world).
Is this possible? I'm using jQuery.
You can use Google Places API to have an autocomplete for address. When address is selected, address_components field contains structured address data (e.g. street, city, country) and could be easily converted into separate fields.
Here is a short working demo:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="address" style="width: 500px;"></input>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
</body>
</html>
Take a look at address-suggestion, and the demo. It's implemented with jQuery and Google Maps geocode API.
https://github.com/ubilabs/geocomplete should work for you. You will also be able to show a map, if necessary.
If you use the plugin without showing a map you must display the "powered by Google" logo under the text field.
Running version of @Maksym Kozlenko answer For those how want to see this in action.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="address" style="width: 500px;"></input>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script>
<script>
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
</script>
</body>
</html>You have to use an API key.
See reference here.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="address" style="width: 500px;"></input>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIWSqJ5-3D-UviE0ZLO4U6AjhVcn58y4g&libraries=places&callback=initMap"></script>
<script>
function initMap(){
var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
console.log(place.address_components);
});
}
</script>
</body>
</html>
来源：https://stackoverflow.com/questions/4061125/autofill-address-google-maps-api