Easy Google Address/Place Autocomplete Plugin - geocomplete
File Size: | 92 KB |
---|---|
Views Total: | 13020 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another geocoding and place autocomplete plugin that automatically fills your address form (Address, Country, State, City, Zip code) using Google Maps' Place JavaScript library.
How to use it:
1. Include the necessary jQuery and Google Maps JavaScript libraries on the webpage. Don't forget to replace the API key with your owns.
<script src="//maps.googleapis.com/maps/api/js?libraries=places&key=API HERE"></script> <script src="//code.jquery.com/jquery.min.js"></script>
2. Include the jQuery geocomplete plugin's JS and CSS files:
<link href="dist/jquery.geocomplete.css" rel="stylesheet"> <script src="dist/jquery.geocomplete.js"></script>
3. Add the data-geocomplete
attribute to input fields you want to autocomplete.
<div id="myForm"> <input id="address" type="text" data-geocomplete="street address"> <select id="country" data-geocomplete="country"> <option value="">Select Country</option> <option value="1">United States</option> <option value="2">Mexico</option> <option value="3">Canada</option> <option value="4">Chile</option> </select> <input type="text" data-geocomplete="state"> <input type="text" data-geocomplete="county"> <input type="text" data-geocomplete="city"> ... </div>
4. Activate the plugin and done.
$("#address").geocomplete({ formId: "#myForm" });
6. All efault configuration options.
$("#address").geocomplete({ // appends the autogenerated .pac-container to the selected input's parent appendToParent: true, // Google Places Autocomplete API options: // https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete bounds: undefined, componentRestrictions: undefined, fields: undefined, strictBounds: false, types: undefined, // an object containing functions that can be called to format custom results formats: {}, // the container element formId: undefined, // sets the bounds based on the browser's location geolocate: false, // default data attribute inputDataKey: 'geocomplete', // the google map you would like to center based upon the selected location map: null });
7. Callback functions.
$("#address").geocomplete({ onChange: function(name, result){ // ... }, onNoResult: function(name){ // ... } });
8. API methods.
// center the map based on the supplied LatLng or LatLngBounds $("#address").geocomplete("centermap", Bounds); // clear all the input $("#address").geocomplete("clearmap"); // fill all the inputs based on the supplied PlaceResult or the last selected location $("#address").geocomplete("fillform", placeResult); // set bounds $("#address").geocomplete("setbounds", Bounds); // set component restrictions $("#address").geocomplete("setcomponentrestrictions", Object); // set fields $("#address").geocomplete("setfields", Array); // set options $("#address").geocomplete("setoptions", Options); // set map type $("#address").geocomplete("settypes", mapType); // set bounds $("#address").geocomplete("setbounds", Bounds); // set bounds $("#address").geocomplete("setbounds", Bounds); // get bounds $("#address").geocomplete("getBounds"); // get cached place $("#address").geocomplete("getcachedplace"); // get fields $("#address").geocomplete("getfields"); // you can optionally supply a query to return a specific value $("#address").geocomplete("getformvalues", Query); // get place $("#address").geocomplete("getplace"); // destroy the instance $("#address").geocomplete("destroy");
Changelog:
v2.1.1 (2019-11-23)
- Updated destroy method to remove data
v2.1.0 (2019-11-16)
- Added Lat, Lng and LatLng format functions
v2.0.1 (2019-07-29)
- Remove comments
v2.0.0 (2019-07-28)
- Code rebuilt.
- Doc updated.
2018-04-20
- Fixed issue caused by passing plugin's settings to google's Autocomplete constructor
2017-06-10
- added ability to center map
2017-06-09
- v1.1.0
This awesome jQuery plugin is developed by tmentink. For more Advanced Usages, please check the demo page or visit the official website.