-
-
Save appel/c5a45e294298d12e9c4dde49e0e3bb39 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, componentRestrictions:{country: 'NL'}}, 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment