Last active
May 3, 2018 15:00
-
-
Save luk3thomas/4990763 to your computer and use it in GitHub Desktop.
jQuery address lookup
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ;(function($, google, window, document, undefined){ | |
| var pluginName = "addressLookup", | |
| defaults = { | |
| "namespace": "al" , | |
| "input": "#address-lookup" | |
| }; | |
| function Plugin(element, options) { | |
| this.element = element; | |
| this.options = $.extend({}, defaults, options); | |
| this._defaults = defaults; | |
| this._name = pluginName; | |
| this.init(); | |
| } | |
| Plugin.prototype.init = function() { | |
| var selectors = {}, | |
| name = this.options.namespace, | |
| components = ["results", "address", "link"]; | |
| // populate the components for easy access | |
| for (var i = 0; i < components.length; i++) { | |
| component = components[i]; | |
| selectors[component] = {}; | |
| selectors[component].name = name + "-" + component; | |
| selectors[component].cls = "." + selectors[component].name ; | |
| }; | |
| // html vars | |
| var selector = this.options.input, | |
| container = this.element; | |
| // update the input box with gmap address | |
| var updateInput = function(e) { | |
| e.preventDefault(); | |
| $(selector).val($(this).text()); | |
| clear(); | |
| } | |
| // remove all addresses | |
| var clear = function() { | |
| $(selectors.address.cls).remove(); | |
| } | |
| // event binding functions | |
| var events = { | |
| bind: function(cls, callback) { | |
| $(cls).on("click", callback); | |
| }, | |
| unbind: function(cls) { | |
| $(cls).unbind("click"); | |
| } | |
| }; | |
| // callback to handle data from google | |
| var handle = function(addresses) { | |
| var $form = $(container).find(selectors.results.cls); | |
| if(!$form.length) { | |
| $(container).append('<div class="' + selectors.results.name + '">') | |
| } | |
| // unbind any click events, then discard elements | |
| events.unbind(selectors.link.cls); | |
| clear(); | |
| // add new elements | |
| for (var i = 0; i < addresses.length; i++) { | |
| address = addresses[i] | |
| $form.append([ | |
| '<div class="', selectors.address.name, '">', | |
| '<a class="', selectors.link.name, '" href="#">' , | |
| address.formatted_address , | |
| '</a>', | |
| '</div>' | |
| ].join('')); | |
| }; | |
| // bind the new elements | |
| events.bind(selectors.link.cls, updateInput); | |
| } | |
| // google geocoder | |
| var geocoder = new google.maps.Geocoder(); | |
| // listen for keyboard input | |
| $(selector).on("keyup", function(d) { | |
| var query = $(this).val(); | |
| geocoder.geocode({ address: query}, handle); | |
| }); | |
| } | |
| $.fn[pluginName] = function(options) { | |
| return new Plugin(this, options); | |
| } | |
| })(jQuery, google, window, document); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Google Maps Address Lookup</title> | |
| <meta name="viewport" content="width=device-width"> | |
| <style> | |
| #lookup { | |
| position:absolute; | |
| left:50%; | |
| width:600px; | |
| margin-left:-300px; | |
| top:100px; | |
| } | |
| #lookup input { | |
| width:100%; | |
| padding:.5em .8em; | |
| border:1px solid #eee; | |
| outline:0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="lookup"> | |
| <input type="text" id="address-lookup" placeholder="Address..." autocomplete="off" /> | |
| </div> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> | |
| <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"> </script> | |
| <script src="address-lookup.js"></script> | |
| <script> | |
| $("#lookup").addressLookup({ | |
| "input": "#address-lookup" | |
| }) | |
| </script> | |
| </body> | |
| </html> |
most of the times, it skips the correct address and goes off to the wrong address, its like I put in the zip for a sec it shows the right address and then immediately something else loads up, is it something to do with the api ?
This looks great! Is there any way to restrict geo output to a certain country?
Edit: to answer my own question, replace line 91 with this to restrict output to one country (in this case, the Netherlands):
geocoder.geocode({ address: query, componentRestrictions:{country: 'NL'}}, handle);
Could be nice to add an optional "country" parameter.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I looked at this control and its awesome, could I please get the license to use it ?