Simple jQuery Plugin For Google Places Autocomplete - autoPlace.js

File Size: 6.05 KB
Views Total: 6668
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Plugin For Google Places Autocomplete - autoPlace.js

autoPlace.js is a jQuery plugin which adds the Google Places autocomplete and location picker functionalities to a normal text input. Heavily based on the Google Places API.

How to use it:

1. To use this plugin, make sure the latest version of jQuery library and Google Places API are loaded in the document.

<script src="" 
<script src=""></script>

2. Download and load the autoPlace.js script after jQuery library.

<script src="jquery.autoplace.js"></script>

3. Create a text field for the location picker.

<div class="wrapper">
  <input type="text" placeholder="Enter an Address" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="autoplace">
  <div class="suggestion-wrapper">
    <input type="text" class="suggestion" tabindex="-1">

4. Enable the plugin.

  types: ['address'],
  componentRestrictions: {country: 'us'},

5. Get and place the user selected places in the suggestion field.

$('#autoplace').on('autoplace-suggestion', function(e) {
  var suggestion = $('data-autoplace-corrected-suggestion');

6. All possible options. For more information, visit Google Maps JavaScript API V3 Reference.


  // The area in which to search for places.
  bounds: LatLngBounds|LatLngBoundsLiteral

  // The types of predictions to be returned. 
  // If nothing is specified, all types are returned. 
  // In general only a single type is allowed. 
  // The exception is that you can safely mix the 'geocode' and 'establishment' types, but note that this will have the same effect as specifying no types.
  types: ['address'],

  // The component restrictions. 
  // Component restrictions are used to restrict predictions to only those within the parent component. 
  // E.g., the country.
  componentRestrictions: {country: 'us'},

  // Whether to retrieve only Place IDs. 
  // The PlaceResult made available when the place_changed event is fired will only have the place_id, types and name fields, with the place_id, types and description returned by the Autocomplete service. 
  placeIdOnly: false,

  // A boolean value, indicating that the Autocomplete widget should only return those places that are inside the bounds of the Autocomplete widget at the time the query is sent. 
  // Setting strictBounds to false (which is the default) will make the results biased towards, but not restricted to, places contained within the bounds.
  strictBounds: true


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