How to make an autocomplete address field with google maps api

Question

Using Google Maps API and JQuery I would like to have an Address field that when typing it will autocomplete the address entered there  How this could be achieved

User · Answer

There are some awesome libraries such as select2, but it doesn't match my need. I've made a sample from scratch in order to use a simple input text.

I only use bootstrap and JQuery, Hope it'll be useful: Example

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"
    }
});

User · Answer

Well  better late than never  Google maps API v3 now provides address autocompletion   API docs are here  http   code google com apis maps documentation javascript reference html Autocomplete  A good example is here  http   code google com apis maps documentation javascript examples places-autocomplete html

User · Answer

Drifting a bit  but it would be relatively easy to autofill the US City State or CA City Provence when the user enters her postal code using a lookup table   Here s how you could do it if you could force people to bend to your will    User enters  postal  zip  code  You fill  state  city  province  for Canada  User starts to enter  streetname  You  autofill You display  a range of allowed address numbers  User  enters the number   Done   Here s how it is natural for people to do it    User enters  address number  You  do nothing User starts to enter  street name  You  autofill  drawing from a massive list of every street in the country User enters  city  You  autofill User enters  state provence  You  is it worth autofilling a few chars  You  autofill postal  zip  code  if you can  because some codes straddle cities       Now you know why people charge     to do this      For the street address  consider there are two parts  numeric and streetname  If you have the zip code  then you can narrow down the available streets  but most people enter the numeric part first  which is backwa

User · Answer

I really doubt it--google maps API is great for geocoding known addresses  but it generally return data that is suitable for autocomplete-style operations  Nevermind the challenge of not hitting the API in such a way as to eat up your geocoding query limit very quickly

User · Answer

It is easy  but the Google API examples give you detailed explanation with how you can get the map to display the entered location  For only autocomplete feature  you can do something like this   First  enable Google Places API Web Service  Get the API key  You will have to use it in the script tag in html file    lt input type  text  id  location  gt   lt script type  text javascript  src  https   maps googleapis com maps api js key  YOUR KEY HERE  amp libraries places  gt  lt  script gt   lt script src  javascripts scripts js  gt  lt  scripts gt    Use script file to load the autocomplete class  Your scripts js file will look something like this          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

User · Answer

Like others have mentioned  the Google Places Autocomplete API is missing some important functions  Case in point  Google will not validate that the street number is real  and they also will not put it into a standardized format  So  it is the user s responsibility to enter that portion of the address correctly  Google also won t predict PO Boxes or apartment numbers  So  if you are using their API for shipping  address cleansing or data governance  you may want one that will validate the building number  autocomplete the unit number and standardize the information  Full Disclosure  I work for SmartyStreets

User · Answer

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  ------------------------------------------------  lt script type  text javascript  src  http   maps googleapis com maps api js sensor false amp libraries places  gt  lt  script gt   lt script type  text javascript  gt  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 gt 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

[javascript] How to make an autocomplete address field with google maps api?

Examples related to javascript

Examples related to jquery

Examples related to google-maps