Easy Google Address/Place Autocomplete Plugin - geocomplete

Easy Google Address/Place Autocomplete Plugin - geocomplete
File Size: 90.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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. Don't forget to replace the API key with your owns.

<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. Add the data-geocomplete attribute to input fields you want to autocomplete.

<div id="myForm">
  <input id="address" type="text" data-geocomplete="street address">
  <select id="country" data-geocomplete="country">
    <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>
  <input type="text" data-geocomplete="state">
  <input type="text" data-geocomplete="county">
  <input type="text" data-geocomplete="city">
  ...
</div>

4. Activate the plugin and done.

$("#address").geocomplete({
  formId: "#myForm"
});

6. All efault configuration options.

$("#address").geocomplete({

  // appends the autogenerated .pac-container to the selected input's parent 
  appendToParent: true,

  // an object containing functions that can be called to format custom results
  formats: {},

  // the container element
  formId: undefined,

  // sets the bounds based on the browser's location
  geolocate: false,

  // default data attribute
  inputDataKey: 'geocomplete',
  
  // the google map you would like to center based upon the selected location
  map: null 
  
});

7. Callback functions.

$("#address").geocomplete({

  onChange: function(name, result){
    // ...
  },

  onNoResult: function(name){
    // ...
  }

});

Changelog:

v2.0.1 (2019-07-29)

  • Remove comments

v2.0.0 (2019-07-28)

  • Code rebuilt.
  • Doc updated.

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.