Usare l'autocomplete con Google Maps
Google Maps lo conosciamo tutti!
E prima o poi tutti i web developer si scontrano con l'autocomplete.
Oggi vediamo come unire le due cose: il risultato sarà una pagina con Google Maps e una casella per l'autocomplete, con i dati presi nel database di Google Maps.
Per fare questo useremo un plugin jQuery apposito: Geocomplete!
Faremo un esempio completo con queste funzionalità:
- una mappa con un marker di default
- la possibilità di trascinare il marker
- nel momento in cui facciamo una nuova ricerca, la mappa si sposterà sul nuovo punto
Questo il codice completo:
Intercettiamo vari tipi di eventi; non tutti vi serviranno, ma almeno conosciamo le potenzialità del plugin.
<!DOCTYPE html>
<html>
<head>
<title>Geocomplete</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.geocomplete.min.js"></script>
<script>
$(function () {
var options = {
map: ".map_canvas",
location: "Rome, Italy",
markerOptions: {
draggable: true
}
};
$("#geocomplete").geocomplete(options).bind("geocode:result", function (event, result) {
console.log("Result: " + result.formatted_address);
}).bind("geocode:error", function (event, status) {
console.log("ERROR: " + status);
}).bind("geocode:multiple", function (event, results) {
console.log("Multiple: " + results.length + " results found");
});
$("#geocomplete").bind("geocode:dragged", function (event, latLng) {
console.log(latLng.lat());
console.log(latLng.lng());
});
$("#find").click(function () {
$("#geocomplete").trigger("geocode");
});
});
</script>
<style>
.map_canvas { width: 600px;height: 400px; }
</style>
</head>
<body>
<input id="geocomplete" type="text" autofocus style="width: 500px;">
<input id="find" type="button" value="find">
<hr>
<div class="map_canvas"></div>
</body>
</html>
Enjoy!
javascript jquery google maps geocomplete autocomplete
Commentami!