jquery - example - Dirección de Autocompletar+API de Google Maps
google maps autocomplete get address (5)
Puede usar la API de Google Places para tener un autocompletar para la dirección. Cuando se selecciona la dirección, el campo address_components contiene datos de dirección estructurados (por ejemplo, calle, ciudad, país) y podría convertirse fácilmente en campos separados.
Aquí hay una breve demostración de trabajo:
<!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>
Quiero presentar a mis usuarios un cuadro de texto en el que puedan escribir su dirección. A medida que escriben su dirección, quiero proporcionar a los usuarios sugerencias / predicciones sobre la dirección que intentan escribir. También me preocupa la relevancia de esta dirección (por ejemplo, que la dirección no es una dirección que se encuentra en la mitad del mundo).
es posible? Estoy usando jQuery.
https://github.com/ubilabs/geocomplete debería funcionar para usted. También podrá mostrar un mapa, si es necesario.
Si usa el complemento sin mostrar un mapa, debe mostrar el logotipo "powered by Google" debajo del campo de texto.
Ejecución de la versión de @Maksym Kozlenko respuesta Para aquellos que quieren ver esto en acción.
<!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>
Eche un vistazo a la sugerencia de dirección y la demostración . Está implementado con la API de geocodificación jQuery y Google Maps .
Tienes que usar una clave API.
Ver referencia aquí.
<!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>