jQuery Geocoding and Places Autocomplete with Google Maps API - geocomplete

File Size: 30.5 KB
Views Total: 45760
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Geocoding and Places Autocomplete with Google Maps API - geocomplete

geocomplete is a powerful jQuery javascript that provides Geocoding and Places Autocomplete functionalities for your input fields based on Google Maps API's Geocoding Service and Places Library. Optionally add a container to show an interactive map and a form that will be populated with the address details.

⚠️ THE PLUGIN IS NOT MAINTAINED. Use the Easy Google Address/Place Autocomplete Plugin Instead.

Basic Usage:

1. Create an address input filed with a autocomplete dropdown list.

<input id="geocomplete" type="text" placeholder="Type in an address" />

2. Include required Google Maps Javascript API on your web page.

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script> 

3. Include the latest jQuery javascript library and jQuery geocomplete plugin on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="../jquery.geocomplete.js"></script> 

4. Call the plugin.


5. Options.

  • 'map' - Might be a selector, an jQuery object or a DOM element. Default is 'false' which shows no map.
  • 'details' - The container that should be populated with data. Defaults to 'false' which ignores the setting.
  • 'location' - Location to initialize the map on. Might be an address 'string' or an 'array' with [latitude, longitude] or a 'google.maps.LatLng'object. Default is 'false' which shows a blank map.
  • 'bounds' - Whether to snap geocode search to map bounds. Default: 'true' if false search globally. Alternatively pass a custom 'LatLngBounds object.
  • 'detailsAttribute' - The attribute's name to use as an indicator. Default: '"name"'
  • 'mapOptions' - Options to pass to the 'google.maps.Map' constructor. See the full list [here]
  • 'mapOptions.zoom' - The inital zoom level. Default: '14'
  • 'mapOptions.scrollwheel' - Whether to enable the scrollwheel to zoom the map. Default: 'false'
  • 'mapOptions.mapTypeId' - The map type. Default: '"roadmap"'
  • 'markerOptions' - The options to pass to the 'google.maps.Marker' constructor. See the full list [here].
  • 'markerOptions.draggable' - If the marker is draggable. Default: 'false'. Set to true to enable dragging.
  • 'markerOptions.disabled' - Do not show marker. Default: 'false'. Set to true to disable marker.
  • 'maxZoom' - The maximum zoom level too zoom in after a geocoding response. Default: '16'
  • 'types' - An array containing one or more of the supported types for the places request. Default: '['geocode']' See the full list [here]

Check the examples for more usages:

  • Simple - Single input with an event logger.
  • Map - Adding a map.
  • Location - Adding a default location.
  • Form - Populate form fields.
  • Attribute - Using custom attributes to populate data.
  • Multiple results - Handling multiple results from the geocoder.
  • Draggable - A draggable marker to redefine the position.
  • API - API Example.
  • Bounds - Bounds example.
  • Contry Limits - Contry Limits example.

Change logs:


  • Support strictBounds parameter for places autocomplete


  • v1.7


  • Allow support for multiple geocomplete form fields on one page


  • Adding `geocode:mapdragged` event support


  • Don't trigger a geocode request if the address input is empty


  • v1.6.5


  • Revert "Trigger event when no results are found"


  • Trigger event when no results are found


  • Cycle through subtypes in address components.
  • Add "place_id" to places details.
  • Avoid exception if getPlace() returns undefined



  • Add "place_id" to places details.


  • Fixed keep result at text input after focusout.

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