Un buscador de localizaciones te ayuda a encontrar el lugar exacto que el usuario te quiere proporcionar. Generalmente, se utiliza un campo input HTML para obtener la dirección del usuario, en donde el usuario introduce su dirección manualmente. Pero si quieres que la caja de localización sea mucho más usable, implementar un buscador de localizaciones con autocompletado es una muy buena idea. Mediante este control el usuario podrá seleccionar su ubicación exacta en Google Maps.
En este tutorial, te mostraremos cómo implementar un buscador de localizaciones con autocompletado en una aplicación web utilizando la API de Google Maps, jQuery y jQuery UI. ¿Comenzamos?
Librería Bootstrap
En este ejemplo utilizaremos la librería Bootstrap para darle un poco de estilo a nuestro campo input y al botón. Si no quieres utilizar la librería Bootstrap, no es necesario incluirla.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Librería jQuery y jQuery UI
Utilizaremos jQuery para obtener y definir la localización, así que tendremos que incluir la librería. Utilizaremos jQuery UI para añadir la característica de autocompletar en la caja de búsqueda.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
API de Google Maps
Utilizaremos la API de Google Maps para obtener la información de la localización (dirección, latitud y longitud) y mostrarla en el mapa. Debes contar con una API key de Google Developers Console y haber habilitado la librería de Geolocalización. Especifica la API key en la URL de la llamada a la librería.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY"></script>
Código Javascript
El código Javascript consta de cuatro secciones:
- El método initialize() crea un mapa de Google y marca una localización con el marcador por defecto de Google Maps. Inicialmente, mostraremos una posición por defecto en el mapa. Pero si se selecciona una localización a través de la caja de búsqueda, cambiaremos la posición del marcador en el mapa. También, mostraremos su respectiva dirección, latitud y longitud debajo del mapa.
- En la segunda sección, añadiremos la funcionalidad de autocompletar al input (search_location). Cuando se seleccione una dirección del autocompletador, se mostrará la localización en el mapa de Google con un marcador. También, mostraremos su respectiva dirección, latitud y longitud debajo del mapa.
- Ejecutaremos la tercera sección cuando se haga clic en el botón Locate (get_map). Extraeremos los datos de la geolocalización basándonos en la dirección dada y los mostraremos en el mapa de Google con un marcador. También, mostraremos su respectiva dirección, latitud y longitud debajo del mapa.
- La cuarta sección es para cambiar la localización cuando se cambie la posición del marcador mediane drag&drop.
<script>
var geocoder;
var map;
var marker;
/*
* Google Map with marker
*/
function initialize() {
var initialLat = $('.search_latitude').val();
var initialLong = $('.search_longitude').val();
initialLat = initialLat?initialLat:36.169648;
initialLong = initialLong?initialLong:-115.141000;
var latlng = new google.maps.LatLng(initialLat, initialLong);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("geomap"), options);
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true,
position: latlng
});
google.maps.event.addListener(marker, "dragend", function () {
var point = marker.getPosition();
map.panTo(point);
geocoder.geocode({'latLng': marker.getPosition()}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
$('.search_addr').val(results[0].formatted_address);
$('.search_latitude').val(marker.getPosition().lat());
$('.search_longitude').val(marker.getPosition().lng());
}
});
});
}
$(document).ready(function () {
//load google map
initialize();
/*
* autocomplete location search
*/
var PostCodeid = '#search_location';
$(function () {
$(PostCodeid).autocomplete({
source: function (request, response) {
geocoder.geocode({
'address': request.term
}, function (results, status) {
response($.map(results, function (item) {
return {
label: item.formatted_address,
value: item.formatted_address,
lat: item.geometry.location.lat(),
lon: item.geometry.location.lng()
};
}));
});
},
select: function (event, ui) {
$('.search_addr').val(ui.item.value);
$('.search_latitude').val(ui.item.lat);
$('.search_longitude').val(ui.item.lon);
var latlng = new google.maps.LatLng(ui.item.lat, ui.item.lon);
marker.setPosition(latlng);
initialize();
}
});
});
/*
* Point location on google map
*/
$('.get_map').click(function (e) {
var address = $(PostCodeid).val();
geocoder.geocode({'address': address}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker.setPosition(results[0].geometry.location);
$('.search_addr').val(results[0].formatted_address);
$('.search_latitude').val(marker.getPosition().lat());
$('.search_longitude').val(marker.getPosition().lng());
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
e.preventDefault();
});
//Add listener to marker for reverse geocoding
google.maps.event.addListener(marker, 'drag', function () {
geocoder.geocode({'latLng': marker.getPosition()}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('.search_addr').val(results[0].formatted_address);
$('.search_latitude').val(marker.getPosition().lat());
$('.search_longitude').val(marker.getPosition().lng());
}
}
});
});
});
</script>
Código HTML
El campo input lo utilizaremos para buscar direcciones y el botón Locate lo utilizaremos para obtener la información de la dirección dada. Mostraremos el mapa de google dentro del div geomap. El resto del HTML lo utilizaremos para mostrar información relativa a la localización (dirección, latitud y longitud).
<!-- search input box -->
<form>
<div class="form-group input-group">
<input type="text" id="search_location" class="form-control" placeholder="Search location">
<div class="input-group-btn">
<button class="btn btn-default get_map" type="submit">
Locate
</button>
</div>
</div>
</form>
<!-- display google map -->
<div id="geomap"></div>
<!-- display selected location information -->
<h4>Location Details</h4>
<p>Address: <input type="text" class="search_addr" size="45"></p>
<p>Latitude: <input type="text" class="search_latitude" size="30"></p>
<p>Longitude: <input type="text" class="search_longitude" size="30"></p>
Código CSS
El siguiente CSS define el alto y ancho del div del mapa.
#geomap{
width: 100%;
height: 400px;
}
Fuente: codexworld.com