demos/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jquery-addresspicker demo (a jQuery UI widget)</title>
	<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
	<link rel="stylesheet" href="demo.css">
	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

	<script src="../lib/jquery-1.4.4.min.js"></script>
	<script src="../lib/jquery-ui-1.8.7.min.js"></script>
	<script src="../src/jquery.ui.addresspicker.js"></script>
	<script>
	$(function() {
		var addresspicker = $( "#addresspicker" ).addresspicker();
		var addresspickerMap = $( "#addresspicker_map" ).addresspicker({
		  elements: {
		    map:      "#map",
		    lat:      "#lat",
		    lng:      "#lng",
		    locality: '#locality',
		    country:  '#country'
		  }
		});
		var gmarker = addresspickerMap.addresspicker( "marker");
		gmarker.setVisible(true);
		addresspickerMap.addresspicker( "updatePosition");
		
	});
	</script>
</head>
<body>
  <a href="http://github.com/sgruhier/jquery-addresspicker"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png" alt="Fork me on GitHub" /></a>

<div class="demo">
  <h1>jquery-addresspicker demo (a jQuery UI widget)</h1>
  
  <h2>Default address picker, only autocomplete.</h2>
  <p>
    Default address picker. It's just a jQuery autocomplete filled by google map geocoder suggestions.<br/>
    Try to enter an address like <em>Saint</em> and you'll see suggests
  </p>
	<div class='input'>
	  <label>Address : </label><input id="addresspicker" />
  </div>

  <h2>Address picker, with instant display selection on map.</h2>
  <p>
    Same but the map on the left displays selected address, even while you navigate in autocomplete suggestions.<br/>
    Lat and Lng fields are just for information, they should be hidden inputs.<br/><br/>
    You can even adjust marker position on the map.<br/>
  </p>
  <div>
  	<div class='input'>
	    <label>Address : </label> <input id="addresspicker_map" />   <br/>
			<label>Locality: </label> <input id="locality" disabled=disabled> <br/>
			<label>Country:  </label> <input id="country" disabled=disabled> <br/>
			<label>Lat:      </label> <input id="lat" disabled=disabled> <br/>
			<label>Lng:      </label> <input id="lng" disabled=disabled> <br/>
    </div>
    <div id="map"></div>
    <div id="legend">You can drag and drop the marker to the correct location</div>
  </div>
</div><!-- End demo -->

</body>
</html>