forked from wimagguc/jquery-latitude-longitude-picker-gmaps
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
198 lines (173 loc) · 7.04 KB
/
demo.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Google Maps Latitude and Longitude Picker jQuery plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<!-- Dependencies: JQuery and GMaps API should be loaded first -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- CSS and JS for our code -->
<link rel="stylesheet" type="text/css" href="css/jquery-gmaps-latlon-picker.css"/>
<script src="js/jquery-gmaps-latlon-picker.js"></script>
</head>
<body>
<form>
<h1>Google Maps Latitude and Longitude Picker</h1>
<div class="description">
<b>A jQuery plugin that creates a location picker on your webpage using Google Maps.</b>
<br/><br>
Supports multiple maps. Works on touchscreen. Easy to customize markup and CSS.
<br/><br>
This is a demo page; the newest live demo will always be <a href="http://www.wimagguc.com/projects/jquery-latitude-longitude-picker-gmaps/">here</a>.
<br/>
For the code, install instructions and to see how amazingly free it is, <a href="https://github.com/wimagguc/jquery-latitude-longitude-picker-gmaps">go to Github</a>.
<br/>
Also, you might find other interesting things on my blog at <a href="http://www.wimagguc.com/">wimagguc.com</a>.<br/>
</div>
<H2>The simplest form</H2>
<div class="description">
<ul>
<li>After every position change you'll have the fresh lattitude, longitude and zoom values in the hidden fields.</li>
<li>The "location_changed" event will also be fired with the gllLatlonPicker Node JQuery object as attribute.</li>
</ul>
<br/><br/>
Move the marker, or double click on the map.
</div>
<fieldset class="gllpLatlonPicker">
<div class="gllpMap">Google Maps</div>
<input type="hidden" class="gllpLatitude"/>
<input type="hidden" class="gllpLongitude"/>
<input type="hidden" class="gllpZoom"/>
<input type="hidden" class="gllpLocationName"/>
</fieldset>
<div class="code">
<pre>
<fieldset class="gllpLatlonPicker">
<div class="gllpMap">Google Maps</div>
<input type="hidden" class="gllpLatitude"/>
<input type="hidden" class="gllpLongitude"/>
<input type="hidden" class="gllpZoom"/>
</fieldset>
</pre>
</div>
<H2>Simple form with a Google Maps search field and default values</H2>
<div class="description">
<ul>
<li>If the search has results, the first element will appear on the map (with the default zoom value 11)</li>
<li>You can set default latitude, longitude and zoom values in the hidden fields</li>
<li>If you don't give an ID to the map, the script generates one; feel free to use custom ID's though</li>
</ul>
<br/><br/>
Move the marker, or double click on the map. Search for cities, countries or landmark names.
</div>
<fieldset class="gllpLatlonPicker" id="custom_id">
<input type="text" class="gllpSearchField">
<input type="button" class="gllpSearchButton" value="search">
<br/><br/>
<div class="gllpMap">Google Maps</div>
<input type="hidden" class="gllpLatitude" value="60"/>
<input type="hidden" class="gllpLongitude" value="30"/>
<input type="hidden" class="gllpZoom" value="12"/>
</fieldset>
<div class="code">
<pre>
<fieldset class="gllpLatlonPicker" id="custom_id">
<input type="text" class="gllpSearchField">
<input type="button" class="gllpSearchButton" value="search">
<div class="gllpMap">Google Maps</div>
<input type="hidden" class="gllpLatitude" value="60"/>
<input type="hidden" class="gllpLongitude" value="30"/>
<input type="hidden" class="gllpZoom" value="12"/>
</fieldset>
</pre>
</div>
<H2>Reverse lookup: retrieves the location name and elevation once it's picked</H2>
<div class="description">
<ul>
<li>After the position change you'll have the location name in the gllpLocationName field.</li>
<li>If there is no value, the field will be emptied.</li>
<li>The "location_changed" event will also be fired with the gllLatlonPicker Node JQuery object as attribute.</li>
<li>The "location_name_changed" event will be fired after we received the name of the selected location.</li>
<li>The "elevation_changed" event will be fired after we received the elevation value.</li>
</ul>
<br/><br/>
Move the marker, or double click on the map.
</div>
<fieldset class="gllpLatlonPicker">
<div class="gllpMap">Google Maps</div>
<br/>
<input type="hidden" class="gllpLatitude"/>
<input type="hidden" class="gllpLongitude"/>
<input type="hidden" class="gllpZoom"/>
name: <input type="text" class="gllpLocationName" size=42/><br/>
elevation: <input type="text" class="gllpElevation" size=12/>m
</fieldset>
<div class="code">
<pre>
<fieldset class="gllpLatlonPicker">
<div class="gllpMap">Google Maps</div>
<br/>
<input type="hidden" class="gllpLatitude"/>
<input type="hidden" class="gllpLongitude"/>
<input type="hidden" class="gllpZoom"/>
<input type="text" class="gllpLocationName" size=42/>
</fieldset>
</pre>
</div>
<H2>Editable and selectable Latitude/Longitude values</H2>
<div class="description">
<ul>
<li>You can set your own latitude, longitude and zoom values. The map shows your data after pressing the update button.</li>
<li>You can still hide the Zoom field (or any other fields)</li>
</ul>
<br/><br/>
Move the marker, double click on the map, search, or set new values to interact.
</div>
<fieldset class="gllpLatlonPicker">
<input type="text" class="gllpSearchField">
<input type="button" class="gllpSearchButton" value="search">
<br/><br/>
<div class="gllpMap">Google Maps</div>
<br/>
lat/lon:
<input type="text" class="gllpLatitude" value="20"/>
/
<input type="text" class="gllpLongitude" value="20"/>
zoom: <input type="text" class="gllpZoom" value="3"/>
<input type="button" class="gllpUpdateButton" value="update map">
<br/>
</fieldset>
<div class="code">
<pre>
<fieldset class="gllpLatlonPicker">
<input type="text" class="gllpSearchField">
<input type="button" class="gllpSearchButton" value="search">
<br/><br/>
<div class="gllpMap">Google Maps</div>
<br/>
lat/lon:
<input type="text" class="gllpLatitude" value="20"/>
/
<input type="text" class="gllpLongitude" value="20"/>
zoom: <input type="text" class="gllpZoom" value="3"/>
<input type="button" class="gllpUpdateButton" value="update map">
</fieldset>
</pre>
</div>
<H2>Created By</H2>
<div class="description">
Richard Dancsi<br/><br/>
Blog: <a href="http://www.wimagguc.com/">http://www.wimagguc.com/</a>
<br/>
Twitter:<a href="http://twitter.com/wimagguc">wimagguc</a>
<br/>
Google+:<a href="https://plus.google.com/u/0/115939246085616544919">Richard Dancsi</a>
<br/><br/>
Used at <a href="http://divespy.com/">http://divespy.com/</a>
<br/><br/>
Divespy is built by Zenfield <a href="http://zenfield.com/">http://zenfield.com/</a>
</div>
</form>
</body>
</html>