How to Use Google Maps API to Auto Complete Location Fields

Interact with visitors to your website by permitting them to enter a specific location on your custom Google Map. Using the Google Maps API Version 3, you can create a text field for users to enter an address or business name. Based on the text entered, Google Maps will offer suggestions and auto-complete the field. You add the "Places Autocomplete" feature to your custom Google Map by using the "Autocomplete" constructor.

Instructions

1. Access your HTML file and locate your Google Maps code.

2. Define the variable for user input after the code initializing your map. For example, type:

   var user_imput = document.getElementById('searchTextField');

3. Specify options for the input data. Options include setting the bounds, which restricts a latitude and longitude for the auto-complete search, and setting the type of input, which permits the user to search by a business name or a geocode address. For example, type:

   var options = {
   bounds: defaultBounds,
   types: ['geocode']
   };

   In this example, users can search by address and the default range or bounds is unrestricted.

4. Create the Autocomplete control. For example, type:

   userAutocomplete = new google.maps.places.Autocomplete(input, options);

5. Change the label for the input field in your HTML code. For example, type:

   <input id="searchTextField" type="text" size="50" placeholder="Please enter a location:">

6. Save your file and test it. Google Maps monitors the input field and auto-completes the field when a user begins typing.

References

• Google: Google Maps Javascript API V3 Places Library