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. 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,

  // Google Places Autocomplete API options:
  // https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete
  bounds: undefined,
  componentRestrictions: undefined,
  fields: undefined,
  strictBounds: false,
  types: undefined,

  // 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){
    // ...
  }

});

8. API methods.

// center the map based on the supplied LatLng or LatLngBounds
$("#address").geocomplete("centermap", Bounds);

// clear all the input
$("#address").geocomplete("clearmap");

// fill all the inputs based on the supplied PlaceResult or the last selected location
$("#address").geocomplete("fillform", placeResult);

// set bounds
$("#address").geocomplete("setbounds", Bounds);

// set component restrictions
$("#address").geocomplete("setcomponentrestrictions", Object);

// set fields
$("#address").geocomplete("setfields", Array);

// set options
$("#address").geocomplete("setoptions", Options);

// set map type
$("#address").geocomplete("settypes", mapType);

// set bounds
$("#address").geocomplete("setbounds", Bounds);

// set bounds
$("#address").geocomplete("setbounds", Bounds);

// get bounds
$("#address").geocomplete("getBounds");

// get cached place
$("#address").geocomplete("getcachedplace");

// get fields
$("#address").geocomplete("getfields");

// you can optionally supply a query to return a specific value
$("#address").geocomplete("getformvalues", Query);

// get place
$("#address").geocomplete("getplace");

// destroy the instance
$("#address").geocomplete("destroy");

Changelog:

v2.1.1 (2019-11-23)

• Updated destroy method to remove data

v2.1.0 (2019-11-16)

• Added Lat, Lng and LatLng format functions

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.