jQuery Geocoding and Places Autocomplete with Google Maps API - geocomplete

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

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

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.