web-dev-qa-db-fra.com

Adresse de saisie automatique + API Google Maps

Je souhaite présenter à mes utilisateurs une zone de texte dans laquelle ils peuvent saisir leur adresse. Au fur et à mesure qu'ils saisissent leur adresse, je souhaite fournir aux utilisateurs des suggestions/prédictions sur l'adresse qu'ils essaient de saisir. Je suis également préoccupé par la pertinence de cette adresse (par exemple, que l'adresse n'est pas une adresse à l'autre bout du monde).

Est-ce possible? J'utilise jQuery.

jquerygoogle-mapsgeolocationgoogle-maps-api-3geocoding
22
StackOverflowNewbie

Vous pouvez utiliser l'API Google Places pour avoir une saisie semi-automatique pour l'adresse. Lorsque l'adresse est sélectionnée, le champ address_components contient des données d'adresse structurées (par exemple, rue, ville, pays) et peut être facilement converti en champs séparés.

Voici une courte démo de travail:

<!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>
55
Maksym Kozlenko

Jetez un œil à adresse-suggestion, et la démo . Il est implémenté avec jQuery et Google Maps API de géocodage.

7
user471245

https://github.com/ubilabs/geocomplete devrait fonctionner pour vous. Vous pourrez également montrer une carte, si nécessaire.

Si vous utilisez le plugin sans afficher de carte, vous devez afficher le logo "powered by Google" sous le champ de texte.

6
DreifGenov

Version courante de @Maksym Kozlenko answer Pour ceux qui veulent voir cela en 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>
6
Anand Singh

Vous devez utiliser une clé API.

Voir référence ici.

<!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>
2
Mihai Alexandru-Ionut