au-address-validation-api/index.html at master · silasp/au-address-validation-api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jquery-addresspicker demo (a jQuery UI widget)</title>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css">
  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script src="jquery.ui.addresspicker.js"></script>
  <script type="text/javascript">
  $(function() {
    var addresspickerMap = $( "#addresspicker_map" ).addresspicker({
      elements: {
        lat: "#lat",
        lng: "#lng",
        street_number: '#street_number',
        route: '#route',
        locality: '#locality',
        address1: '#address1',
        address2: '#address2',
        administrative_area_level_1: '#state',
//        country: '#country',
        postal_code: '#postal_code',
        type: '#type'
      }
    });
  });
  </script>

</head>
<body>

<div class="demo">
  <h4>Start by typing your address, then select it when it appears. Eg 123 Some Street Suburb NSW 2000</h4>
  <div class='clearfix'>
    <div class='input input-positioned'>
      <label>Address : </label> <input id="addresspicker_map" style="width: 500px"/> <br/>
      <br/>
      <br/>
      <br/>

      <h4>Check your address below:</h4>

      <label>Address 1: </label> <input id="address1"> <br/>
      <label>Address 2: </label> <input id="address2"> <br/>

      <label>Suburb: </label> <input id="locality"> <br/>
      <label>State: </label> <input id="administrative_area_level_1"> <br/>
      <label>Postal Code: </label> <input id="postal_code"> <br/>

      <br /><br /><br />

      <!-- <label>SubLocality: </label> <input id="sublocality" disabled=disabled> <br/>
      <label>Borough: </label> <input id="administrative_area_level_3" disabled=disabled> <br/>
      <label>District: </label> <input id="administrative_area_level_2" disabled=disabled> <br/>-->

      <label>Street Number: </label> <input id="street_number" disabled=disabled> <br/>
      <label>Route: </label> <input id="route" 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/>
<!--      <label>Zoom: </label> <input id="zoom" disabled=disabled> <br/>-->
      <label>Type: </label> <input id="type" disabled=disabled /> <br/>
    </div>
  </div>
</div>
</body>
</html>