How it works¶
Import all the dependencies in your page’s head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- These next two you should host by yourself in production -->
<!-- Download the latest version here https://github.com/datadesk/jquery-geocodify/releases -->
<link rel="stylesheet" src="/path/to/jquery.geocodify.css" />
<script type="text/javascript" src="/path/to/jquery.geocodify.min.js"></script>
Add an empty form to your page’s body and initialize it with instructions for what function to run when the user selects an address
<input id="geocoder" placeholder="Enter a location ..."></input>
<script type="text/javascript">
$("#geocoder").geocodify({
onSelect: function (result) { alert(result); }
});
</script>
The example above will just alert the selected address in the browser. It’s a JavaScript representation of what is returned by the Google Maps geocoder.
Options¶
- onSelect¶
A function that takes the Google geocoder’s result object and decides what to do with it, like it load it on a map, or redirect to another page, or whatever you need. Required.
- acceptableAddressTypes¶
A whitelist of address types allowed to appear in the results. Drawn from the set defined by Google’s geocoder. Optional. All types accepted by default.
- errorHandler¶
A function for handling errors returned by the Google geocoder. Optional. Null by default.
- filterResults¶
A function for filtering results before they appear in the dropdown. Optional. Null by default.
- minimumCharacters¶
Sets the number of characters that must be entered before the geocoder starts to automatically run. Optional. The default is five.
- noResultsText¶
The text that appears when a search returns no results. Optional. The default is “No results found. Please refine your search.”
- prepSearchString¶
A function that treats the search string before it is passed to the geocoder. Optional. Null by default.