Autocomplete Address Form Using Google Map API

Google map is one of the most widely used APIs of Google as a majority of websites use Google maps for showing address location. For a static address it’s pretty simple. All you need to do is input the address and the map will show the nearest location. The problem arrives when the address is dynamically putted by the user. Suppose for an event in Event Organizer Server, one enters the location. The main component used while taking input location is Google Autocomplete. But we went a step further and parsed the entire address based on city, state, country, etc. and allowed the user to input the details as well, which gave them the nearest location marked in Map if Autocomplete couldn’t find the address.

Autocomplete Location

As we can see, in the above input box we get suggestions from Google Map upon entering the first few letters of our address. To do this, we need the API. You can find an example code of how to do this here.

After this is done, what we want is to not only include this address but provide a form to fill up the entire address in case some parts were missing. The function that the autocomplete listens to is _“place\_changed”_ . So once we click on one of the options, this event is triggered. Once the event is triggered, we use the _autocomplete.getPlace()_ to get the complete address JSON. The JSON looks something like this:

Now, what we do is we create a form with input fields having the same ID as the ones we require(e.g., country, administrative_area_level_1,locality, etc.). After that, we select the ‘long_name or the short_’name from this JSON and put the value in the corresponding input field with the IDs. The code for the process after getting the JSON is elaborated here.

Editing Address Form

After doing this it looks something like this:

However, now the important part is to show the map according to these fields. Also, every time we update a field, the map should be updated. For this we use a hack. Instead of removing the initial location field completely, we hide the field but keep the binding to Autocomplete intact. As a result, the map is shown when we select a particular address.

Now, when we update the fields in the address form, we append the value of this field to the value in the initial location field. Although the field is hidden, it is still bound to Autocomplete. As a result, as soon as we append something to the string contained in the field, the map gets updated. Also, the updated value gets stored to the DB. Thus, with every update in the field, the pointer is moved to the nearest location formed by appending all the data from the form.

After saving the location data to DB, if we wish to edit it, we can get back the JSON by making the same request with the location value. This will return the same address form and the map accordingly.

Finally, it looks something like this:

If you would like to learn more about Google Maps API here are some related articles:

Drawing a Google Map With Data from an API

Google Maps API or Leaflet

Custom Infobox Label with Google Maps

This tutorial is originally posted by the author on fossasia. This version has been edited for clarity and may appear different from the original post.