Home / Programmazione / Javascript - AJAX / Usare l'autocomplete con Google Maps
Mattepuffo

Usare l'autocomplete con Google Maps

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!