Easy Google Address/Place Autocomplete Plugin - geocomplete

File Size: 92 KB
Views Total: 13417
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>
  <input type="text" data-geocomplete="state">
  <input type="text" data-geocomplete="county">
  <input type="text" data-geocomplete="city">

4. Activate the plugin and done.

  formId: "#myForm"

6. All efault configuration options.


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


  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

// 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

// get cached place

// get fields

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

// get place

// destroy the instance


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.


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


  • added ability to center map


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