Easy Google Address/Place Autocomplete Plugin - geocomplete

Easy Google Address/Place Autocomplete Plugin - geocomplete

Just another geocoding and place autocomplete plugin that automatically fills your address form (Address, Country, State, City, Zip code) using Google Maps' Place JavaScript library.

How to use it:

1. Include the necessary jQuery and Google Maps JavaScript libraries on the webpage.

<script src="//maps.googleapis.com/maps/api/js?libraries=places&key=API HERE"></script>
<script src="//code.jquery.com/jquery.min.js"></script>

2. Include the jQuery geocomplete plugin's JS and CSS files:

<link href="dist/jquery.geocomplete.css" rel="stylesheet">
<script src="dist/jquery.geocomplete.js"></script>

3. Create an address input field:

<input id="txtAddress" type="text" placeholder="Start typing an address">

4. Create the other address fields as follows:

<label>Country:</label>
<select id="ddlCountry1" class="ui dropdown">
  <option value="">Select Country</option>
  <option value="1">United States</option>
  <option value="2">Mexico</option>
  <option value="3">Canada</option>
  <option value="4">Chile</option>
</select>
<label>State:</label>
<div class="ui input">
  <input id="txtState1" type="text">
</div>
<label>County:</label>
<div class="ui input">
  <input id="txtCounty1" type="text">
</div>
<label>City:</label>
<div class="ui input">
  <input id="txtCity1" type="text">
</div>
<label>Zip Code:</label>
<div class="ui input">
  <input id="txtZipCode1" type="text">
</div>

5. Activate the plugin by calling the function on the address input field.

$("#txtAddress").geocomplete({
  fields: {
    txtAddress1 : "street address",
    txtCity1    : "city",
    txtCounty1  : "county",
    txtState1   : "state",
    ddlCountry1 : "country",
    txtZipCode1 : "zipcode"
  }
});

6. More default configuration options.

$("#txtAddress").geocomplete({
  appendToParent: true,
  geolocate: false, // Sets the bounds based on the browser's location
  types: ["geocode"],
  map: null // the google map you would like to center based upon the selected location.
});

Change log:

2018-04-20

  • Fixed issue caused by passing plugin's settings to google's Autocomplete constructor

2017-06-10

  • added ability to center map

2017-06-09

  • v1.1.0

This awesome jQuery plugin is developed by tmentink. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 20.04.2018
  • Source