Demonstrations

Examples of jquery-geocodify in action. Full documentation is elsewhere.

The basic box

<input id="geocodify-basic-box"></input>
<script type="text/javascript">
     $("#geocodify-basic-box").geocodify({
         onSelect: function (result) { alert(result); }
     });
</script>

Address type whitelisting

The whitelist of acceptable address types can be used to filter the results before they appear in the dropdown. In this example, the input is configured to only return airports. Try searching for “LAX” or “Charles De Gaulle.”

<input id="geocodify-address-type-whitelisting"></input>
<script type="text/javascript">
     $("#geocodify-address-type-whitelisting").geocodify({
         onSelect: function (result) { alert(result); },
         acceptableAddressTypes: [
             'airport'
         ],
         minimumCharacters: 3
     });
</script>

Filter results

Geocoder results can be filtered before they appear in the dropdown by passing in a function. It should accept a list of Google geocoder objects and return whatever list you’d like to keep. This example drops any results that aren’t filed in Los Angeles County.

<input id="geocodify-filter-results"></input>
<script type="text/javascript">
     $("#geocodify-filter-results").geocodify({
         onSelect: function (result) { alert(result); },
         filterResults: function(results) {
             // Using some underscore.js tricks here to filter faster
             // http://underscorejs.org/
             return _.filter(results, function(addy) {
                 return _.some(addy.address_components, function(component) {
                     return component.long_name === 'Los Angeles County';
                 });
             });
         }
     });
</script>

Initial text

You can provide a string to load when the box first appears.

<input id="geocodify-initial-text" placeholder="Enter an address"></input>
<script type="text/javascript">
     $("#geocodify-initial-text").geocodify({
         onSelect: function (result) { alert(result); },
     });
</script>

No results text

You can provide a string for the dropdown when no results return. Try searching some nonsense like “qwerty.”

<input id="geocodify-no-results-text"></input>
<script type="text/javascript">
     $("#geocodify-no-results-text").geocodify({
         onSelect: function (result) { alert(result); },
         noResultsText: "Nein!"
     });
</script>

Minimum characters

Sets the number of characters that must be entered before the geocoder starts to automatically run. This example reduces the number to 2. Try searching “LAX.”

<input id="geocodify-minimum-characters"></input>
<script type="text/javascript">
     $("#geocodify-minimum-characters").geocodify({
         onSelect: function (result) { alert(result); },
         minimumCharacters: 2
     });
</script>

Prep search string

A function that treats the search string before it is passed to the geocoder. This example adds “California” to the search if the user has not provided it.

<input id="geocodify-prep-search-string"></input>
<script type="text/javascript">
     $("#geocodify-prep-search-string").geocodify({
         onSelect: function (result) { alert(result); },
         prepSearchString: function(query) {
             var pattr = /\sca\s|\scalifornia\s/gi;
             var match = query.match(pattr);
             if (!match) {
                 return query + ' California';
             } else {
                 return query;
             }
         }
     });
</script>

Region bias

Instruct the geocoder to return results biased towards a particular region of the world. More information about the available codes can be found here. This example biases results to Spain.

<input id="geocodify-region-bias"></input>
<script type="text/javascript">
     $("#geocodify-region-bias").geocodify({
         onSelect: function (result) { alert(result); },
         regionBias: "ES"
     });
</script>

Viewport bias

Instruct the geocoder to return results biased towards a bounding box presented in Google’s data format. Google’s documentation can be found here. This example biases results to a box surrounding Los Angeles County.

<input id="geocodify-viewport-bias"></input>
<script type="text/javascript">
     $("#geocodify-viewport-bias").geocodify({
         onSelect: function (result) { alert(result); },
         viewportBias: new google.maps.LatLngBounds(
             new google.maps.LatLng(33.22030778968541,-118.948974609375),
             new google.maps.LatLng(35.0120020431607,-117.44384765625)
         )
     });
</script>