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.

<script>
$(function(){
$("#geocomplete").geocomplete()
});
</script>

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.