web-dev-qa-db-fra.com

Comment créer un champ d'adresse de saisie semi-automatique avec l'API Google Maps?

À l'aide de l'API Google Maps et de JQuery, j'aimerais avoir un champ d'adresse qui, lors de la frappe, remplira automatiquement l'adresse entrée ici. Comment cela pourrait-il être réalisé?

javascriptjquerygoogle-maps
44
Esteban Feldman

Eh bien, mieux vaut tard que jamais. L'API Google maps v3 permet désormais la saisie semi-automatique des adresses.

Les documents API sont ici: http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete

Un bon exemple est ici: http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

63
alt
Below I split all the details of formatted address like City, State, Country and Zip code. 
So when you start typing your street name and select any option then street name write over street field, city name write over city field and all other fields like state, country and Zip code will fill automatically. 
Using Google APIs.
------------------------------------------------
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
    var places = new google.maps.places.Autocomplete(document
            .getElementById('txtPlaces'));
    google.maps.event.addListener(places, 'place_changed', function() {
        var place = places.getPlace();
        var address = place.formatted_address;
        var  value = address.split(",");
        count=value.length;
        country=value[count-1];
        state=value[count-2];
        city=value[count-3];
        var z=state.split(" ");
        document.getElementById("selCountry").text = country;
        var i =z.length;
        document.getElementById("pstate").value = z[1];
        if(i>2)
        document.getElementById("pzcode").value = z[2];
        document.getElementById("pCity").value = city;
        var latitude = place.geometry.location.lat();
        var longitude = place.geometry.location.lng();
        var mesg = address;
        document.getElementById("txtPlaces").value = mesg;
        var lati = latitude;
        document.getElementById("plati").value = lati;
        var longi = longitude;
        document.getElementById("plongi").value = longi;            
    });
});
5
Preet

Dérive un peu, mais il serait relativement facile de remplir automatiquement la ville/l'État américain ou la ville de Californie/Provence lorsque l'utilisateur entre son code postal à l'aide d'une table de recherche.

Voici comment vous pourriez le faire si vous pouviez forcer les gens à se plier à votre volonté:

  1. L'utilisateur entre: code postal (Zip)

    Vous remplissez: état, ville (province, pour le Canada)

  2. L'utilisateur commence à entrer: nom de rue

    Vous: remplissage automatique

  3. Vous affichez: une plage de numéros d'adresse autorisés

    tilisateur: saisit le nombre

Terminé.

Voici comment il est naturel pour les gens de le faire:

  1. L'utilisateur entre: numéro d'adresse

    Vous: ne faites rien

  2. L'utilisateur commence à entrer: nom de la rue

    Vous: remplissage automatique, en s'inspirant d'une énorme liste de toutes les rues du pays

  3. L'utilisateur entre: ville

    Vous: remplissage automatique

  4. L'utilisateur entre: état/provence

    Vous: vaut-il la peine de remplir automatiquement quelques caractères?

  5. Vous: remplissez automatiquement le code postal (Zip), si vous le pouvez (car certains codes chevauchent des villes).

Maintenant, vous savez pourquoi les gens facturent $$$ pour ce faire. :)

Pour l'adresse municipale, considérez qu'il y a deux parties: numérique et nom de rue. Si vous avez le code postal, vous pouvez réduire les rues disponibles, mais la plupart des gens entrent d'abord la partie numérique, qui est backwa

3
BryanH

C'est simple, mais les exemples de l'API Google vous expliquent en détail comment obtenir la carte pour afficher l'emplacement saisi. Pour la fonction de saisie semi-automatique uniquement, vous pouvez faire quelque chose comme ça.

Tout d'abord, activez le service Web de l'API Google Adresses. Obtenez la clé API. Vous devrez l'utiliser dans la balise script du fichier html.

<input type="text" id="location">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY_HERE]&libraries=places"></script>
<script src="javascripts/scripts.js"></scripts>

Utilisez un fichier de script pour charger la classe de saisie semi-automatique. Votre fichier scripts.js ressemblera à ceci.

    // scripts.js custom js file
$(document).ready(function () {
   google.maps.event.addDomListener(window, 'load', initialize);
});

function initialize() {
    var input = document.getElementById('location');
    var autocomplete = new google.maps.places.Autocomplete(input);
}
2
Piyush P

J'en doute vraiment - l'API Google Maps est idéale pour géocoder des adresses connues, mais elle renvoie généralement des données adaptées aux opérations de style de saisie semi-automatique. Peu importe le défi de ne pas utiliser l'API de manière à consommer très rapidement votre limite de requêtes de géocodage.

2
Wyatt Barnett

Il existe des bibliothèques impressionnantes telles que select2, mais cela ne correspond pas à mes besoins. J'ai fait un échantillon à partir de zéro afin d'utiliser un simple texte d'entrée.

J'utilise uniquement bootstrap et JQuery, j'espère que ce sera utile: exemple

HTML:

<div class="form-group col-md-12">
    <label for="address">Address</label>
    <input type="text" class="form-control" id="address">
</div>

<div class="form-group">
    <div class="col-md-4">
        <label for="number">number</label>
        <input type="text" class="form-control" id="number">
    </div>
    <div class="col-md-8">
        <label for="street">street</label>
        <input type="text" class="form-control" id="street">
    </div>  
</div>

<div class="form-group">
    <div class="col-md-4">
        <label for="Zip">Zip</label>
        <input type="text" class="form-control" id="Zip">
    </div>
    <div class="col-md-8">
        <label for="town">town</label>
        <input type="text" class="form-control" id="town">
    </div>  
</div>

<div class="form-group">
    <div class="col-md-4">
        <label for="department">Department</label>
        <input type="text" class="form-control" id="department">
    </div>
    <div class="col-md-4">
        <label for="region">Region</label>
        <input type="text" class="form-control" id="region">
    </div>  
    <div class="col-md-4">
        <label for="country">Country</label>
        <input type="text" class="form-control" id="country">
    </div>  
</div>

JS:

$("input#address").suggest({
    label : "Adresse complete", 
    street_number_input : {
        id : "number",
        label : "Numero de la rue"
    },
    street_name_input : {
        id : "street",
        label : "Nom de la rue"
    },
    Zip_input : {
        id : "Zip",
        label : "Code postal"
    },
    town_input : {
        id : "town",
        label : "Ville"
    },
    department_input : {
        id : "department",
        label : "Departement"
    },
    region_input : {
        id : "region",
        label : "Region"
    },
    country_input : {
        id : "country",
        label : "Pays"
    }
});
0
Yacine