This repository has been archived by the owner on Jan 19, 2024. It is now read-only.
forked from ubilabs/geocomplete
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html
115 lines (84 loc) · 3.17 KB
/
form.html
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<title>$.geocomplete()</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css" media="screen">
.map_canvas { float: left; }
form { width: 300px; float: left; }
fieldset { width: 320px; margin-top: 20px}
fieldset label { display: block; margin: 0.5em 0 0em; }
fieldset input { width: 95%; }
</style>
</head>
<body>
<div class="map_canvas"></div>
<form>
<input id="geocomplete" type="text" placeholder="Type in an address" value="Empire State Bldg" />
<input id="find" type="button" value="find" />
<fieldset>
<h3>Address-Details</h3>
<label>Name</label>
<input name="name" type="text" value="">
<label>POI Name</label>
<input name="point_of_interest" type="text" value="">
<label>Latitude</label>
<input name="lat" type="text" value="">
<label>Longitude</label>
<input name="lng" type="text" value="">
<label>Location</label>
<input name="location" type="text" value="">
<label>Location Type</label>
<input name="location_type" type="text" value="">
<label>Formatted Address</label>
<input name="formatted_address" type="text" value="">
<label>Bounds</label>
<input name="bounds" type="text" value="">
<label>Viewport</label>
<input name="viewport" type="text" value="">
<label>Route</label>
<input name="route" type="text" value="">
<label>Street Number</label>
<input name="street_number" type="text" value="">
<label>Postal Code</label>
<input name="postal_code" type="text" value="">
<label>Locality</label>
<input name="locality" type="text" value="">
<label>Sub Locality</label>
<input name="sublocality" type="text" value="">
<label>Country</label>
<input name="country" type="text" value="">
<label>Country Code</label>
<input name="country_short" type="text" value="">
<label>State</label>
<input name="administrative_area_level_1" type="text" value="">
<label>Place ID</label>
<input name="place_id" type="text" value="">
<label>ID</label>
<input name="id" type="text" value="">
<label>Reference</label>
<input name="reference" type="text" value="">
<label>URL</label>
<input name="url" type="text" value="">
<label>Website</label>
<input name="website" type="text" value="">
</fieldset>
</form>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../jquery.geocomplete.js"></script>
<script>
$(function(){
$("#geocomplete").geocomplete({
map: ".map_canvas",
details: "form",
types: ["geocode", "establishment"],
});
$("#find").click(function(){
$("#geocomplete").trigger("geocode");
});
});
</script>
</body>
</html>