A jQuery plugin for Google Maps Autocomplete.
View Demo »
- Download the latest release
- Clone the repo:
git clone https://github.com/tmentink/jquery.geocomplete.git
Both the compiled and minified versions can be found within the dist/ directory:
jquery.geocomplete/
└── dist/
├── jquery.geocomplete.css
├── jquery.geocomplete.js
├── jquery.geocomplete.min.css
└── jquery.geocomplete.min.js
Select an input and call .geocomplete() with the fields you'd like to fill.
$("#myInput").geocomplete({
fields: {
"#txtStreetAddress" : "street address",
"#txtCity" : "city",
".txtState" : "short state",
".txtZipCode" : "zip code"
}
})You can also use it to center a map based on the selected location.
var myMap = new google.maps.Map(document.getElementById("myMap"), {
center : { lat: 37.5, lng: -120 },
zoom : 6
});
$("#myInput").geocomplete({
map: myMap
})You can set the defaults at $.fn.geocomplete.settings
| Setting | Type | Default | Description |
|---|---|---|---|
| appendToParent | boolean | true | Appends the autogenerated .pac-container to the selected input's parent. This fixes the scrolling issue. |
| bounds | LatLngBounds | undefined | Google's Documentation |
| componentRestrictions | object | undefined | Google's Documentation |
| fields | object | string | undefined | If fields is an object, the key indicates the field's selector while the value indicates the desired Address Type. If fields is a string, it will use that value as a context to search for any element with a geocomplete data attribute. See examples |
| geolocate | boolean | false | Sets the bounds based on the browser's location. |
| map | google.maps.Map | undefined | The google map you would like to center based upon the selected location. |
| strictBounds | boolean | false | Google's Documentation |
| types | Array<string> | ["geocode"] | Google's Documentation |
| Callback | Context | Description |
|---|---|---|
| onChange(name, result) | $selector | Is called after a place is changed. Recieves the name and the place results. |
| onNoResult(name) | $selector | Is called after a place is changed but no result was found. Recieves the name that was entered. |
You can access the short_name value by addding "short" in front of the type. Otherwise it will return the long_name value.
| Type | Google Equivalent |
|---|---|
| city | locality |
| country | country |
| county | administrative_area_level_2 |
| formatted address | formatted_address |
| neighborhood | neighborhood |
| state | administrative_area_level_1 |
| street | route |
| street address | street_number + route |
| street number | street_number |
| zip code | postal_code |
| zip code suffix | postal_code_suffix |
All the following methods can be called using the syntax:
$("#myInput").geocomplete("method name", arguments)| Method | Arguments | Returns | Description |
|---|---|---|---|
| center map | LatLng | LatLngBounds | $selector | Centers the map based on the supplied LatLng or LatLngBounds. If nothing is passed, it will use the last selected location. This is automatically called when a location is selected. |
| clear fields | none | $selector | Clears all the fields. This is automatically called before filling fields. |
| fill fields | none | $selector | Fills all the fields based on the last selected location. This is automatically called when a location is selected. |
| get bounds | none | LatLngBounds | Google's Documentation |
| get place | none | PlaceDetails | Google's Documentation |
| set bounds | LatLngBounds | $selector | Google's Documentation |
| set component restrictions | Object | $selector | Google's Documentation |
| set options | Object | $selector | Google's Documentation |
| set types | Array<string> | $selector | Google's Documentation |
- The jQuery Team - for creating jQuery
- Google - for creating Google Maps
Trent Mentink
- Code and documentation copyright 2017 Trent Mentink.
- Code released under the MIT License.