-
Notifications
You must be signed in to change notification settings - Fork 86
/
demo.html
131 lines (114 loc) · 4.64 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
<!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-2.1.1.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 full-feature live demo will always be <a href="http://www.wimagguc.com/2013/06/jquery-latitude-and-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/">www.wimagguc.com</a>.<br/>
</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>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>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://www.divespy.com/">http://www.divespy.com/</a>
</div>
</form>
</body>
</html>