Graceful Geocoding with jQuery


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Geolocation - Let user choose which result is correct, or auto-assign if only one result is returned.</title>
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.min.js"></script>
  7. <script type="text/javascript" src="http://github.com/brandonaaron/livequery/raw/master/jquery.livequery.js"></script>
  8. <script type="text/javascript">
  9. /* <![CDATA[ */
  10. $(document).ready(function(){
  11.  
  12. // Hide the result container by default
  13. $('div#td_msg').hide();
  14.  
  15. // Helper function that assigns a value to the target text input box
  16. function assignValue(value){
  17. var target = $('input#target');
  18. target.val(value);
  19. $('div#td_msg').hide('slow');
  20. }
  21.  
  22. // Geocode the address whenever the input box's value changes
  23. $('input#target').change(function() {
  24. var dataString = "q=" + $("#target").val().split(" ").join("+") + "&output=json&oe=utf8\&sensor=false&key=ABQIAAAAy9tS-IF2ap3XUdcLPuPSOxQ01e10W64RY7l9Y_lnlyOXiCMlVhTg2tCthvKLlTm5gfHxLY-HjIRkeQ";
  25. var url = "http://maps.google.com/maps/geo?" + dataString;
  26. $.getJSON(url + "&callback=?", function(jsonData){
  27. if(jsonData.Placemark.length == 1){ // ....................................... If there's only one result,
  28. assignValue(jsonData.Placemark[0].address); // ....................................... assign it to the input box.
  29. } else { // ....................................... Otherwise,
  30. $('div#td_msg').html('<ul id="results"></ul>'); // ....................................... create a list for the multiple results.
  31. $.each(jsonData.Placemark, function(i,result){ // ....................................... For each placemark in the JSON array, we pass its index (i) and value (result),
  32. $('ul#results').append('<li class="result">'+result.address+'</li>'); // and then append an item to the results list.
  33. });
  34. $('div#td_msg').show('slow'); // ........................................ Then, show the list after it's been populated.
  35. }
  36. });
  37. });
  38.  
  39. // Update the input box when a result is clicked
  40. // We're using the 'LiveQuery' plugin to gain control over elements added via JSON callbacks
  41. $('ul#results li.result').livequery('click',function(){
  42. var thisValue = $(this).text();
  43. assignValue(thisValue);
  44. return false;
  45. });
  46.  
  47. });
  48. /* ]]> */
  49. </script>
  50. </head>
  51. <body>
  52.  
  53. <form action="/" method="post">
  54. <fieldset>
  55. <input id="target" type="text" value="Field 1" />
  56. </fieldset>
  57. </form>
  58.  
  59. <div id="td_msg"></div>
  60.  
  61. </body>
  62. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.