Skip to content

Commit 0f392e5

Browse files
author
corvis
committed
Fixed city resolution issue #24, #22 
1 parent bccdd9a commit 0f392e5

File tree

3 files changed

+279
-2
lines changed

3 files changed

+279
-2
lines changed

‎examples/examples.html

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<!-- Bootstrap stuff -->
8+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
9+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
10+
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
11+
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
12+
<!-- -->
13+
<link rel="stylesheet" href="css/style.css">
14+
<!-- Location picker -->
15+
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>
16+
<script src="../locationpicker.jquery.js"></script>
17+
<title>jquery-location-picker demo</title>
18+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
19+
</head>
20+
<body>
21+
<div class="container">
22+
<div id="examples">
23+
<p>
24+
25+
<h3>Providing options</h3>
26+
<pre>
27+
&lt;div id="somecomponent" style="width: 500px; height: 400px;"&gt;&lt;/div&gt;
28+
&lt;script&gt;
29+
$('#somecomponent').locationpicker({
30+
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
31+
radius: 300
32+
});
33+
&lt;/script&gt;
34+
</pre>
35+
<p>Result</p>
36+
37+
<div id="us1" style="width: 500px; height: 400px;"></div>
38+
<script>$('#us1').locationpicker({
39+
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
40+
radius: 300
41+
});</script>
42+
43+
<h3>Binding UI with the widget</h3>
44+
<pre>
45+
Location: &lt;input type="text" id="us2-address" style="width: 200px"/&gt;
46+
Radius: &lt;input type="text" id="us2-radius"/&gt;
47+
&lt;div id="us2" style="width: 500px; height: 400px;">&lt;/div&gt;
48+
Lat.: &lt;input type="text" id="us2-lat"/&gt;
49+
Long.: &lt;input type="text" id="us2-lon"/&gt;
50+
&lt;script>$('#us2').locationpicker({
51+
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
52+
radius: 300,
53+
inputBinding: {
54+
latitudeInput: $('#us2-lat'),
55+
longitudeInput: $('#us2-lon'),
56+
radiusInput: $('#us2-radius'),
57+
locationNameInput: $('#us2-address')
58+
}
59+
});
60+
&lt;/script&gt;
61+
</pre>
62+
<p>Result:</p>
63+
64+
<div class="form-horizontal">
65+
<div class="form-group">
66+
<label class="col-sm-1 control-label">Location:</label>
67+
68+
<div class="col-sm-5"><input type="text" class="form-control" id="us2-address"/></div>
69+
</div>
70+
<div class="form-group">
71+
<label class="col-sm-1 control-label">Radius:</label>
72+
73+
<div class="col-sm-2"><input type="text" class="form-control" id="us2-radius"/></div>
74+
</div>
75+
<div id="us2" style="width: 550px; height: 400px;"></div>
76+
<div class="clearfix">&nbsp;</div>
77+
<div class="m-t-small">
78+
<label class="p-r-small col-sm-1 control-label">Lat.:</label>
79+
80+
<div class="col-sm-1"><input type="text" class="form-control" style="width: 110px" id="us2-lat"/></div>
81+
<label class="p-r-small col-sm-1 control-label">Long.:</label>
82+
83+
<div class="col-sm-1"><input type="text" class="form-control" style="width: 110px" id="us2-lon"/></div>
84+
</div>
85+
<div class="clearfix"></div>
86+
</div>
87+
<script>$('#us2').locationpicker({
88+
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
89+
radius: 300,
90+
inputBinding: {
91+
latitudeInput: $('#us2-lat'),
92+
longitudeInput: $('#us2-lon'),
93+
radiusInput: $('#us2-radius'),
94+
locationNameInput: $('#us2-address')
95+
},
96+
enableAutocomplete: true
97+
});</script>
98+
99+
<h3>Subscribing for events</h3>
100+
101+
<p>The following example illustrates how to subscribe "Change" event. See the list of the available events along
102+
with functions signature <a href="#events">above</a>.</p>
103+
<pre>
104+
$('#us3').locationpicker({
105+
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
106+
radius: 300,
107+
inputBinding: {
108+
latitudeInput: $('#us3-lat'),
109+
longitudeInput: $('#us3-lon'),
110+
radiusInput: $('#us3-radius'),
111+
locationNameInput: $('#us3-address')
112+
},
113+
enableAutocomplete: true,
114+
onchanged: function(currentLocation, radius, isMarkerDropped) {
115+
alert("Location changed. New location (" + currentLocation.latitude + ", " + currentLocation.longitude + ")");
116+
}
117+
</pre>
118+
<div class="form-horizontal">
119+
<div class="form-group">
120+
<label class="col-sm-1 control-label">Location:</label>
121+
122+
<div class="col-sm-5"><input type="text" class="form-control" id="us3-address"/></div>
123+
</div>
124+
<div class="form-group">
125+
<label class="col-sm-1 control-label">Radius:</label>
126+
127+
<div class="col-sm-2"><input type="text" class="form-control" id="us3-radius"/></div>
128+
</div>
129+
<div id="us3" style="width: 550px; height: 400px;"></div>
130+
<div class="clearfix">&nbsp;</div>
131+
<div class="m-t-small">
132+
<label class="p-r-small col-sm-1 control-label">Lat.:</label>
133+
134+
<div class="col-sm-2"><input type="text" class="form-control" style="width: 110px" id="us3-lat"/></div>
135+
<label class="p-r-small col-sm-1 control-label">Long.:</label>
136+
137+
<div class="col-sm-2"><input type="text" class="form-control" style="width: 110px" id="us3-lon"/></div>
138+
</div>
139+
<div class="clearfix"></div>
140+
<script>$('#us3').locationpicker({
141+
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
142+
radius: 300,
143+
inputBinding: {
144+
latitudeInput: $('#us3-lat'),
145+
longitudeInput: $('#us3-lon'),
146+
radiusInput: $('#us3-radius'),
147+
locationNameInput: $('#us3-address')
148+
},
149+
enableAutocomplete: true,
150+
onchanged: function (currentLocation, radius, isMarkerDropped) {
151+
alert("Location changed. New location (" + currentLocation.latitude + ", " + currentLocation.longitude + ")");
152+
}
153+
});</script>
154+
</div>
155+
<h3>Manipulating map widget from callback</h3>
156+
157+
<p>If you need direct access to the actual Google Maps widget you can use <code>map</code> method as follows.
158+
This example illustrates how to set zoom pragmatically each time when location has been changed.</p>
159+
<pre>
160+
$('#us4').locationpicker({
161+
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
162+
radius: 300,
163+
onchanged: function(currentLocation, radius, isMarkerDropped) {
164+
var mapContext = $(this).locationpicker('map');
165+
mapContext.map.setZoom(20);
166+
}
167+
</pre>
168+
<div>
169+
<div id="us4" style="width: 500px; height: 400px;"></div>
170+
<script>
171+
$('#us4').locationpicker({
172+
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
173+
radius: 300,
174+
onchanged: function (currentLocation, radius, isMarkerDropped) {
175+
var mapContext = $(this).locationpicker('map');
176+
mapContext.map.setZoom(13);
177+
}
178+
});</script>
179+
</div>
180+
181+
<h3>Advanced usage of geo decoder features</h3>
182+
183+
<p>
184+
Along with decoded readable location name plugin returns address split on components
185+
(state, postal code, etc.) which in some cases can be pretty useful.
186+
</p>
187+
<pre>
188+
$('#us5').locationpicker({
189+
location: {latitude: 42.00, longitude: -73.82480799999996},
190+
radius: 300,
191+
onchanged: function (currentLocation, radius, isMarkerDropped) {
192+
var addressComponents = $(this).locationpicker('map').location.addressComponents;
193+
$('#us5-street1').val(addressComponents.addressLine1);
194+
$('#us5-city').val(addressComponents.city);
195+
$('#us5-state').val(addressComponents.stateOrProvince);
196+
$('#us5-zip').val(addressComponents.postalCode);
197+
$('#us5-country').val(addressComponents.country);
198+
}
199+
});
200+
</pre>
201+
<div>
202+
<div class="container-fluid">
203+
<div class="col-lg-6">
204+
<div id="us5" style="width: 500px; height: 400px;"></div>
205+
<p></p>
206+
</div>
207+
<div class="col-lg-6">
208+
<div class="form container-fluid">
209+
<div class="row form-group">
210+
<label class="col-sm-2 control-label">Street:</label>
211+
212+
<div class="col-sm-6">
213+
<input class="form-control" id="us5-street1" disabled="disabled">
214+
</div>
215+
</div>
216+
<div class="row form-group">
217+
<label class="col-sm-2 control-label">City:</label>
218+
219+
<div class="col-sm-6">
220+
<input class="form-control" id="us5-city" disabled="disabled">
221+
</div>
222+
</div>
223+
<div class="row form-group">
224+
<label class="col-sm-2 control-label">State or Province:</label>
225+
226+
<div class="col-sm-6">
227+
<input class="form-control" id="us5-state" disabled="disabled">
228+
</div>
229+
</div>
230+
<div class="row form-group">
231+
<label class="col-sm-2 control-label">Postal code:</label>
232+
233+
<div class="col-sm-6">
234+
<input class="form-control" id="us5-zip" disabled="disabled">
235+
</div>
236+
</div>
237+
<div class="row form-group">
238+
<label class="col-sm-2 control-label">Country:</label>
239+
240+
<div class="col-sm-6">
241+
<input class="form-control" id="us5-country" disabled="disabled">
242+
</div>
243+
</div>
244+
</div>
245+
</div>
246+
</div>
247+
<div class="clearfix"></div>
248+
<script>
249+
$('#us5').locationpicker({
250+
location: {latitude: 42.00, longitude: -73.82480799999996},
251+
radius: 300,
252+
onchanged: function (currentLocation, radius, isMarkerDropped) {
253+
var addressComponents = $(this).locationpicker('map').location.addressComponents;
254+
$('#us5-street1').val(addressComponents.addressLine1);
255+
$('#us5-city').val(addressComponents.city);
256+
$('#us5-state').val(addressComponents.stateOrProvince);
257+
$('#us5-zip').val(addressComponents.postalCode);
258+
$('#us5-country').val(addressComponents.country);
259+
}
260+
});
261+
</script>
262+
</div>
263+
264+
<div>
265+
<h2 class="page-header" id="credits">Credits</h2>
266+
Dmitry Berezovsky, Logicify (<a href="http://logicify.com/" target="_blank">http://logicify.com/</a>)
267+
</div>
268+
269+
</div>
270+
<footer>
271+
<p class="pull-right"><a href="#start">Back to top</a></p>
272+
273+
<p><a href="http://logicify.com/" target="_blank">Logicify</a></p>
274+
</footer>
275+
</div>
276+
</body>
277+
</html>

‎locationpicker.jquery.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@
116116
result.streetName = component.short_name;
117117
}
118118
// City
119-
else if (component.types.indexOf('sublocality') >= 0) {
119+
else if (component.types.indexOf('locality') >= 0) {
120120
result.city = component.short_name;
121121
}
122122
// State \ Province

‎locationpicker.jquery.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"map",
1010
"radius"
1111
],
12-
"version": "0.1.10",
12+
"version": "0.1.11",
1313
"author": {
1414
"name": "Dmitry Berezovsky",
1515
"url": "http://logicify.com/"

0 commit comments

Comments
 (0)