Advanced Search

Graceful Geocoding with jQuery

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

Expand | Embed | Plain Text

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.