Skip to content

Commit 8f9f770

Browse files
author
Nick Spacek
committed
Initial commit.
0 parents  commit 8f9f770

26 files changed

+1793
-0
lines changed

‎LICENSE.txt

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Copyright (c) 2009 Nick Spacek
2+
3+
Permission is hereby granted, free of charge, to any person obtaining
4+
a copy of this software and associated documentation files (the
5+
"Software"), to deal in the Software without restriction, including
6+
without limitation the rights to use, copy, modify, merge, publish,
7+
distribute, sublicense, and/or sell copies of the Software, and to
8+
permit persons to whom the Software is furnished to do so, subject to
9+
the following conditions:
10+
11+
The above copyright notice and this permission notice shall be
12+
included in all copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.txt

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
jQuery PlacePicker
2+
=====================
3+
4+
This plugin provides a widget that can be used with a geocoding service (and
5+
optionally a map interface) to allow users to search for and select locations.
6+
7+
Requirements
8+
---------------
9+
jQuery 1.3.2 (maybe not, but haven't tested with other versions)
10+
jQuery UI 1.7.2 (ditto)
11+
12+
Optional
13+
Google Maps API v3 (http://maps.google.com/maps/api/js?sensor=false) (make sure
14+
to set the sensor parameter appropriately)
15+
16+
Features
17+
---------------
18+
* Supports Google Map API v3 out of the box, framework for others
19+
* Internationalization support
20+
* Lightweight
21+
* Automatically fill form fields with location data
22+
23+
Usage
24+
---------------
25+
Note: The included stylesheet pretties it up, but shouldn't be strictly
26+
required. That said, it will look like junk if you don't use any. ;D
27+
28+
Note: See examples directory for more details.
29+
30+
Given this HTML (style and script tags not shown):
31+
32+
<div id="placepicker"></div>
33+
<div id="map-canvas"></div>
34+
35+
You can apply the plugin like this: $( '#placepicker' ).placepicker( {
36+
// options, event handlers
37+
38+
// ex: enable display on map
39+
map: someMapObject, // where the map is a map object initialized earlier
40+
41+
// ex: enable form fill
42+
form: $( 'form' ) // this parameter is a jQuery object containing the form
43+
44+
} );
45+
46+
Issues
47+
---------------
48+
* Support street addresses
49+
* Better location detail parsing (in Google Plugin; they need to standardize
50+
their geocoder response!)
51+
52+
Let me know if you find others: nick.spacek@gmail.com

‎example/basic.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Basic Example</title>
5+
6+
<link href="css/redmond/jquery-ui-1.7.2.custom.css" type="text/css" rel="stylesheet" />
7+
<link href="css/jquery-ui.placepicker.css" type="text/css" rel="stylesheet" />
8+
9+
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
10+
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
11+
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
12+
13+
<!-- jQuery/UI and Google Maps required before this include -->
14+
<script type="text/javascript" src="../jquery-ui.placepicker.js"></script>
15+
<!-- Include support for Google Maps; required for the Geocoder -->
16+
<script type="text/javascript" src="../jquery-ui.placepicker.google-maps.js"></script>
17+
18+
<script type="text/javascript">
19+
$( function () {
20+
// Initialize Google Map
21+
var map = new google.maps.Map( $( '#map-canvas' )[0], {
22+
zoom: 8,
23+
center: new google.maps.LatLng( 45.95919025, -66.640351 ),
24+
mapTypeId: google.maps.MapTypeId.ROADMAP
25+
} );
26+
27+
var pp = $( '#placepicker' ).placepicker( {
28+
map: map,
29+
// 'saved' event happens when the save button is clicked
30+
saved: function ( e, result ) {
31+
var text = [
32+
result.location.city,
33+
result.location.province,
34+
result.location.country
35+
].join( ', ' );
36+
37+
$( '#text' ).html( text );
38+
}
39+
} );
40+
} );
41+
</script>
42+
43+
</head>
44+
45+
<body>
46+
<div id="placepicker" style="width: 400px"></div>
47+
<div id="map-canvas" style="width: 400px; height: 300px"></div>
48+
<p>You saved: <span id="text">Nothing yet</span></p>
49+
</body>
50+
51+
</html>

‎example/css/images/ui-bg_flat_0_aaaaaa_40x100.png

180 Bytes
Loading

‎example/css/images/ui-bg_flat_75_ffffff_40x100.png

178 Bytes
Loading

‎example/css/images/ui-bg_glass_55_fbf9ee_1x400.png

120 Bytes
Loading

‎example/css/images/ui-bg_glass_65_ffffff_1x400.png

105 Bytes
Loading

‎example/css/images/ui-bg_glass_75_dadada_1x400.png

111 Bytes
Loading

‎example/css/images/ui-bg_glass_75_e6e6e6_1x400.png

110 Bytes
Loading

‎example/css/images/ui-bg_glass_95_fef1ec_1x400.png

119 Bytes
Loading

‎example/css/images/ui-bg_highlight-soft_75_cccccc_1x100.png

101 Bytes
Loading

‎example/css/images/ui-icons_222222_256x240.png

4.27 KB
Loading

‎example/css/images/ui-icons_2e83ff_256x240.png

4.27 KB
Loading

‎example/css/images/ui-icons_454545_256x240.png

4.27 KB
Loading

‎example/css/images/ui-icons_888888_256x240.png

4.27 KB
Loading

‎example/css/images/ui-icons_cd0a0a_256x240.png

4.27 KB
Loading

‎example/css/jquery-ui-1.7.2.custom.css

+406
Large diffs are not rendered by default.

‎example/css/jquery-ui.placepicker.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.ui-placepicker {
2+
padding: 0 .25em;
3+
}
4+
5+
.ui-placepicker-wrapper {
6+
line-height: 2.25em;
7+
}
8+
9+
.ui-placepicker-wrapper label {
10+
margin-right: .25em;
11+
}
12+
13+
.ui-placepicker-currentaddress {
14+
position: relative;
15+
padding: 0.4em 1em 0.4em 20px;
16+
}
17+
18+
.ui-placepicker-currentaddress span.ui-icon {
19+
position: absolute;
20+
left: .2em;
21+
top: 50%;
22+
margin: -8px 5px 0px 0px;
23+
}
24+
25+
.ui-placepicker-result, ui-placepicker-notice {
26+
position: absolute;
27+
right: 0;
28+
padding: 0 .25em;
29+
max-width: 75%;
30+
}
31+
32+
.ui-placepicker-result-location {
33+
font-size: .75em;
34+
font-style: italic;
35+
}
36+

‎example/form.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Form Example</title>
5+
6+
<link href="css/jquery-ui-1.7.2.custom.css" type="text/css" rel="stylesheet" />
7+
<link href="css/jquery-ui.placepicker.css" type="text/css" rel="stylesheet" />
8+
9+
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
10+
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
11+
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
12+
13+
<!-- jQuery/UI and Google Maps required before this include -->
14+
<script type="text/javascript" src="../jquery-ui.placepicker.js"></script>
15+
<!-- Include support for Google Maps; required for the Geocoder -->
16+
<script type="text/javascript" src="../jquery-ui.placepicker.google-maps.js"></script>
17+
18+
<script type="text/javascript">
19+
$( function () {
20+
// Initialize Google Map
21+
var map = new google.maps.Map( $( '#map-canvas' )[0], {
22+
zoom: 8,
23+
center: new google.maps.LatLng( 45.95919025, -66.640351 ),
24+
mapTypeId: google.maps.MapTypeId.ROADMAP
25+
} );
26+
27+
var pp = $( '#placepicker' ).placepicker( {
28+
map: map,
29+
30+
// Form parameter is a jQuery object that has named fields for the
31+
// location info to be saved in (normally hidden)
32+
form: $( 'form' )
33+
} );
34+
} );
35+
</script>
36+
37+
</head>
38+
39+
<body>
40+
<div id="placepicker" style="width: 400px"></div>
41+
<div id="map-canvas" style="width: 400px; height: 300px"></div>
42+
<form>
43+
<input type="text" name="city" />
44+
<input type="text" name="province" />
45+
<input type="text" name="country" />
46+
<input type="text" name="lat" />
47+
<input type="text" name="lng" />
48+
</form>
49+
</body>
50+
51+
</html>

‎example/images/location.png

927 Bytes
Loading

‎example/images/result.png

2.18 KB
Loading

‎example/jquery-1.3.2.min.js

+19
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/jquery-ui-1.7.2.custom.min.js

+298
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/jquery-ui-1.7.2.min.js

+298
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jquery-ui.placepicker.google-maps.js

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
2+
( function ( $ ) {
3+
function Map ( options ) {
4+
this.options = options;
5+
}
6+
7+
$.extend( Map.prototype, {
8+
markers: [],
9+
defaults: {
10+
marker: {
11+
12+
}
13+
},
14+
15+
panTo: function ( latlng ) {
16+
options.map.panTo( new google.maps.LatLng( latlng.lat, latlng.lng ) );
17+
},
18+
19+
showMarker: function ( name, latlng ) {
20+
var position = new google.maps.LatLng( latlng.lat, latlng.lng );
21+
var marker = this._getMarker( name, {
22+
position: position,
23+
map: options.map,
24+
visible: true
25+
} );
26+
},
27+
28+
hideMarker: function ( name ) {
29+
var marker = this.markers[name];
30+
if ( !marker ) {
31+
return;
32+
}
33+
marker.setVisible( false );
34+
},
35+
36+
getCenter: function () {
37+
var latlng = this.options.map.getCenter();
38+
return {
39+
lat: latlng.lat(),
40+
lng: latlng.lng()
41+
};
42+
},
43+
44+
createMarker: function ( name, options ) {
45+
return this._getMarker( name, options );
46+
},
47+
48+
_getMarker: function ( name, options ) {
49+
if ( this.markers[name] !== undefined ) {
50+
var marker = this.markers[name];
51+
marker.setOptions(options);
52+
return marker;
53+
}
54+
55+
return ( this.markers[name] =
56+
this._createMarker( options || {} ) );
57+
},
58+
59+
_createMarker: function ( options ) {
60+
$.extend( options, this.defaults.marker );
61+
62+
return marker = new google.maps.Marker( options );
63+
}
64+
} );
65+
66+
function Geocoder ( options ) {
67+
this.options = options;
68+
this._geocoder = new google.maps.Geocoder();
69+
}
70+
71+
$.extend( Geocoder.prototype, {
72+
StatusOK: google.maps.GeocoderStatus.OK,
73+
74+
geocode: function ( query, callback ) {
75+
this._geocoder.geocode( query, callback );
76+
},
77+
78+
locationFromResponse: function ( response ) {
79+
var self = this;
80+
var location;
81+
$.each( response, function () {
82+
location = self.locationFromItem( this );
83+
if ( self.options.placepicker.isCompleteLocation( location ) ) {
84+
return false;
85+
}
86+
} );
87+
88+
return location;
89+
},
90+
91+
locationFromItem: function ( responseItem ) {
92+
var location = {};
93+
94+
$.each( responseItem.address_components, function () {
95+
var nonpol = $.grep( this.types, function ( n, i ) {
96+
return n != 'political';
97+
} );
98+
if ( nonpol.length == 0 ) {
99+
return true;
100+
}
101+
var type = nonpol[0];
102+
switch ( type ) {
103+
case 'locality':
104+
case 'sublocality':
105+
location.city = location.city || this.long_name;
106+
break;
107+
case 'administrative_area_level_1':
108+
location.province = this.long_name;
109+
break;
110+
case 'country':
111+
location.country = this.long_name;
112+
}
113+
} );
114+
115+
location.latlng = {
116+
lat: responseItem.geometry.location.lat(),
117+
lng: responseItem.geometry.location.lng()
118+
};
119+
120+
return location;
121+
},
122+
} );
123+
124+
$.extend( $.ui.placepicker, {
125+
services: {
126+
map: {
127+
google: Map
128+
},
129+
geocoder: {
130+
google: Geocoder
131+
}
132+
}
133+
} );
134+
} )( jQuery );

0 commit comments

Comments
 (0)