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

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

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

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:

2017-06-30

• Support strictBounds parameter for places autocomplete

2016-04-13

• v1.7

2015-06-18

• Allow support for multiple geocomplete form fields on one page

2015-05-30

• Adding geocode:mapdragged event support

2015-05-06

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

2015-03-09

• v1.6.5

2014-11-07

• Revert “Trigger event when no results are found”

2014-10-31

• Trigger event when no results are found

2014-10-14

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

2014-08-29

• Updated to v1.6.3

2014-08-22

• Add “place_id” to places details.

2013-12-20

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