vendor: 17,972 bytes, lines 1-521
1/** 2 * jQuery Geocoding and Places Autocomplete Plugin - V 1.6.4 3 * 4 * @author Martin Kleppe <[email protected]>, 2014 5 * @author Ubilabs http://ubilabs.net, 2014 6 * @license MIT License <http://www.opensource.org/licenses/mit-license.php> 7 */ 8 9// # $.geocomplete() 10// ## jQuery Geocoding and Places Autocomplete Plugin 11// 12// * https://github.com/ubilabs/geocomplete/ 13// * by Martin Kleppe <[email protected]> 14 15(function($, window, document, undefined){ 16 17 // ## Options 18 // The default options for this plugin. 19 // 20 // * `map` - Might be a selector, an jQuery object or a DOM element. Default is `false` which shows no map. 21 // * `details` - The container that should be populated with data. Defaults to `false` which ignores the setting. 22 // * `location` - Location to initialize the map on. Might be an address `string` or an `array` with [latitude, longitude] or a `google.maps.LatLng`object. Default is `false` which shows a blank map. 23 // * `bounds` - Whether to snap geocode search to map bounds. Default: `true` if false search globally. Alternatively pass a custom `LatLngBounds object. 24 // * `autoselect` - Automatically selects the highlighted item or the first item from the suggestions list on Enter. 25 // * `detailsAttribute` - The attribute's name to use as an indicator. Default: `"name"` 26 // * `mapOptions` - Options to pass to the `google.maps.Map` constructor. See the full list [here](http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions). 27 // * `mapOptions.zoom` - The inital zoom level. Default: `14` 28 // * `mapOptions.scrollwheel` - Whether to enable the scrollwheel to zoom the map. Default: `false` 29 // * `mapOptions.mapTypeId` - The map type. Default: `"roadmap"` 30 // * `markerOptions` - The options to pass to the `google.maps.Marker` constructor. See the full list [here](http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerOptions). 31 // * `markerOptions.draggable` - If the marker is draggable. Default: `false`. Set to true to enable dragging. 32 // * `markerOptions.disabled` - Do not show marker. Default: `false`. Set to true to disable marker. 33 // * `maxZoom` - The maximum zoom level too zoom in after a geocoding response. Default: `16` 34 // * `types` - An array containing one or more of the supported types for the places request. Default: `['geocode']` See the full list [here](http://code.google.com/apis/maps/documentation/javascript/places.html#place_search_requests). 35 // * `blur` - Trigger geocode when input loses focus. 36 // * `geocodeAfterResult` - If blur is set to true, choose whether to geocode if user has explicitly selected a result before blur. 37 38 var defaults = { 39 bounds: true, 40 country: null, 41 map: false, 42 details: false, 43 detailsAttribute: "name", 44 autoselect: true, 45 location: false, 46 47 mapOptions: { 48 zoom: 14, 49 scrollwheel: false, 50 mapTypeId: "roadmap" 51 }, 52 53 markerOptions: { 54 draggable: false 55 }, 56 57 maxZoom: 16, 58 types: ['geocode'], 59 blur: false, 60 geocodeAfterResult: false 61 }; 62 63 // See: [Geocoding Types](https://developers.google.com/maps/documentation/geocoding/#Types) 64 // on Google Developers. 65 var componentTypes = ("street_address route intersection political " + 66 "country administrative_area_level_1 administrative_area_level_2 " + 67 "administrative_area_level_3 colloquial_area locality sublocality " + 68 "neighborhood premise subpremise postal_code natural_feature airport " + 69 "park point_of_interest post_box street_number floor room " + 70 "lat lng viewport location " + 71 "formatted_address location_type bounds").split(" "); 72 73 // See: [Places Details Responses](https://developers.google.com/maps/documentation/javascript/places#place_details_responses) 74 // on Google Developers. 75 var placesDetails = ("id place_id url website vicinity reference name rating " + 76 "international_phone_number icon formatted_phone_number").split(" "); 77 78 // The actual plugin constructor. 79 function GeoComplete(input, options) { 80 81 this.options = $.extend(true, {}, defaults, options); 82 83 this.input = input; 84 this.$input = $(input); 85 86 this._defaults = defaults; 87 this._name = 'geocomplete'; 88 89 this.init(); 90 } 91 92 // Initialize all parts of the plugin. 93 $.extend(GeoComplete.prototype, { 94 init: function(){ 95 this.initMap(); 96 this.initMarker(); 97 this.initGeocoder(); 98 this.initDetails(); 99 this.initLocation(); 100 }, 101 102 // Initialize the map but only if the option `map` was set. 103 // This will create a `map` within the given container 104 // using the provided `mapOptions` or link to the existing map instance. 105 initMap: function(){ 106 if (!this.options.map){ return; } 107 108 if (typeof this.options.map.setCenter == "function"){ 109 this.map = this.options.map; 110 return; 111 } 112 113 this.map = new google.maps.Map( 114 $(this.options.map)[0], 115 this.options.mapOptions 116 ); 117 118 // add click event listener on the map 119 google.maps.event.addListener( 120 this.map, 121 'click', 122 $.proxy(this.mapClicked, this) 123 ); 124 125 google.maps.event.addListener( 126 this.map, 127 'zoom_changed', 128 $.proxy(this.mapZoomed, this) 129 ); 130 }, 131 132 // Add a marker with the provided `markerOptions` but only 133 // if the option was set. Additionally it listens for the `dragend` event 134 // to notify the plugin about changes. 135 initMarker: function(){ 136 if (!this.map){ return; } 137 var options = $.extend(this.options.markerOptions, { map: this.map }); 138 139 if (options.disabled){ return; } 140 141 this.marker = new google.maps.Marker(options); 142 143 google.maps.event.addListener( 144 this.marker, 145 'dragend', 146 $.proxy(this.markerDragged, this) 147 ); 148 }, 149 150 // Associate the input with the autocompleter and create a geocoder 151 // to fall back when the autocompleter does not return a value. 152 initGeocoder: function(){ 153 154 // Indicates is user did select a result from the dropdown. 155 var selected = false; 156 157 var options = { 158 types: this.options.types, 159 bounds: this.options.bounds === true ? null : this.options.bounds, 160 componentRestrictions: this.options.componentRestrictions 161 }; 162 163 if (this.options.country){ 164 options.componentRestrictions = {country: this.options.country}; 165 } 166 167 this.autocomplete = new google.maps.places.Autocomplete( 168 this.input, options 169 ); 170 171 this.geocoder = new google.maps.Geocoder(); 172 173 // Bind autocomplete to map bounds but only if there is a map 174 // and `options.bindToMap` is set to true. 175 if (this.map && this.options.bounds === true){ 176 this.autocomplete.bindTo('bounds', this.map); 177 } 178 179 // Watch `place_changed` events on the autocomplete input field. 180 google.maps.event.addListener( 181 this.autocomplete, 182 'place_changed', 183 $.proxy(this.placeChanged, this) 184 ); 185 186 // Prevent parent form from being submitted if user hit enter. 187 this.$input.keypress(function(event){ 188 if (event.keyCode === 13){ return false; } 189 }); 190 191 // Assume that if user types anything after having selected a result, 192 // the selected location is not valid any more. 193 if (this.options.geocodeAfterResult === true){ 194 this.$input.bind('keypress', $.proxy(function(){ 195 if (event.keyCode != 9 && this.selected === true){ 196 this.selected = false; 197 } 198 }, this)); 199 } 200 201 // Listen for "geocode" events and trigger find action. 202 this.$input.bind("geocode", $.proxy(function(){ 203 this.find(); 204 }, this)); 205 206 // Trigger find action when input element is blurred out and user has 207 // not explicitly selected a result. 208 // (Useful for typing partial location and tabbing to the next field 209 // or clicking somewhere else.) 210 if (this.options.blur === true){ 211 this.$input.blur($.proxy(function(){ 212 if (this.options.geocodeAfterResult === true && this.selected === true){ return; } 213 this.find(); 214 }, this)); 215 } 216 }, 217 218 // Prepare a given DOM structure to be populated when we got some data. 219 // This will cycle through the list of component types and map the 220 // corresponding elements. 221 initDetails: function(){ 222 if (!this.options.details){ return; } 223 224 var $details = $(this.options.details), 225 attribute = this.options.detailsAttribute, 226 details = {}; 227 228 function setDetail(value){ 229 details[value] = $details.find("[" + attribute + "=" + value + "]"); 230 } 231 232 $.each(componentTypes, function(index, key){ 233 setDetail(key); 234 setDetail(key + "_short"); 235 }); 236 237 $.each(placesDetails, function(index, key){ 238 setDetail(key); 239 }); 240 241 this.$details = $details; 242 this.details = details; 243 }, 244 245 // Set the initial location of the plugin if the `location` options was set. 246 // This method will care about converting the value into the right format. 247 initLocation: function() { 248 249 var location = this.options.location, latLng; 250 251 if (!location) { return; } 252 253 if (typeof location == 'string') { 254 this.find(location); 255 return; 256 } 257 258 if (location instanceof Array) { 259 latLng = new google.maps.LatLng(location[0], location[1]); 260 } 261 262 if (location instanceof google.maps.LatLng){ 263 latLng = location; 264 } 265 266 if (latLng){ 267 if (this.map){ this.map.setCenter(latLng); } 268 if (this.marker){ this.marker.setPosition(latLng); } 269 } 270 }, 271 272 // Look up a given address. If no `address` was specified it uses 273 // the current value of the input. 274 find: function(address){ 275 this.geocode({ 276 address: address || this.$input.val() 277 }); 278 }, 279 280 // Requests details about a given location. 281 // Additionally it will bias the requests to the provided bounds. 282 geocode: function(request){ 283 if (this.options.bounds && !request.bounds){ 284 if (this.options.bounds === true){ 285 request.bounds = this.map && this.map.getBounds(); 286 } else { 287 request.bounds = this.options.bounds; 288 } 289 } 290 291 if (this.options.country){ 292 request.region = this.options.country; 293 } 294 295 this.geocoder.geocode(request, $.proxy(this.handleGeocode, this)); 296 }, 297 298 // Get the selected result. If no result is selected on the list, then get 299 // the first result from the list. 300 selectFirstResult: function() { 301 //$(".pac-container").hide(); 302 303 var selected = ''; 304 // Check if any result is selected. 305 if ($(".pac-item-selected")[0]) { 306 selected = '-selected'; 307 } 308 309 // Get the first suggestion's text. 310 var $span1 = $(".pac-container:last .pac-item" + selected + ":first span:nth-child(2)").text(); 311 var $span2 = $(".pac-container:last .pac-item" + selected + ":first span:nth-child(3)").text(); 312 313 // Adds the additional information, if available. 314 var firstResult = $span1; 315 if ($span2) { 316 firstResult += " - " + $span2; 317 } 318 319 this.$input.val(firstResult); 320 321 return firstResult; 322 }, 323 324 // Handles the geocode response. If more than one results was found 325 // it triggers the "geocode:multiple" events. If there was an error 326 // the "geocode:error" event is fired. 327 handleGeocode: function(results, status){ 328 if (status === google.maps.GeocoderStatus.OK) { 329 var result = results[0]; 330 this.$input.val(result.formatted_address); 331 this.update(result); 332 333 if (results.length > 1){ 334 this.trigger("geocode:multiple", results); 335 } 336 337 } else { 338 this.trigger("geocode:error", status); 339 } 340 }, 341 342 // Triggers a given `event` with optional `arguments` on the input. 343 trigger: function(event, argument){ 344 this.$input.trigger(event, [argument]); 345 }, 346 347 // Set the map to a new center by passing a `geometry`. 348 // If the geometry has a viewport, the map zooms out to fit the bounds. 349 // Additionally it updates the marker position. 350 center: function(geometry){ 351 if (geometry.viewport){ 352 this.map.fitBounds(geometry.viewport); 353 if (this.map.getZoom() > this.options.maxZoom){ 354 this.map.setZoom(this.options.maxZoom); 355 } 356 } else { 357 this.map.setZoom(this.options.maxZoom); 358 this.map.setCenter(geometry.location); 359 } 360 361 if (this.marker){ 362 this.marker.setPosition(geometry.location); 363 this.marker.setAnimation(this.options.markerOptions.animation); 364 } 365 }, 366 367 // Update the elements based on a single places or geocoding response 368 // and trigger the "geocode:result" event on the input. 369 update: function(result){ 370 371 if (this.map){ 372 this.center(result.geometry); 373 } 374 375 if (this.$details){ 376 this.fillDetails(result); 377 } 378 379 this.trigger("geocode:result", result); 380 }, 381 382 // Populate the provided elements with new `result` data. 383 // This will lookup all elements that has an attribute with the given 384 // component type. 385 fillDetails: function(result){ 386 387 var data = {}, 388 geometry = result.geometry, 389 viewport = geometry.viewport, 390 bounds = geometry.bounds; 391 392 // Create a simplified version of the address components. 393 $.each(result.address_components, function(index, object){ 394 var name = object.types[0]; 395 396 $.each(object.types, function(index, name){ 397 data[name] = object.long_name; 398 data[name + "_short"] = object.short_name; 399 }); 400 }); 401 402 // Add properties of the places details. 403 $.each(placesDetails, function(index, key){ 404 data[key] = result[key]; 405 }); 406 407 // Add infos about the address and geometry. 408 $.extend(data, { 409 formatted_address: result.formatted_address, 410 location_type: geometry.location_type || "PLACES", 411 viewport: viewport, 412 bounds: bounds, 413 location: geometry.location, 414 lat: geometry.location.lat(), 415 lng: geometry.location.lng() 416 }); 417 418 // Set the values for all details. 419 $.each(this.details, $.proxy(function(key, $detail){ 420 var value = data[key]; 421 this.setDetail($detail, value); 422 }, this)); 423 424 this.data = data; 425 }, 426 427 // Assign a given `value` to a single `$element`. 428 // If the element is an input, the value is set, otherwise it updates 429 // the text content. 430 setDetail: function($element, value){ 431 432 if (value === undefined){ 433 value = ""; 434 } else if (typeof value.toUrlValue == "function"){ 435 value = value.toUrlValue(); 436 } 437 438 if ($element.is(":input")){ 439 $element.val(value); 440 } else { 441 $element.text(value); 442 } 443 }, 444 445 // Fire the "geocode:dragged" event and pass the new position. 446 markerDragged: function(event){ 447 this.trigger("geocode:dragged", event.latLng); 448 }, 449 450 mapClicked: function(event) { 451 this.trigger("geocode:click", event.latLng); 452 }, 453 454 mapZoomed: function(event) { 455 this.trigger("geocode:zoom", this.map.getZoom()); 456 }, 457 458 // Restore the old position of the marker to the last now location. 459 resetMarker: function(){ 460 this.marker.setPosition(this.data.location); 461 this.setDetail(this.details.lat, this.data.location.lat()); 462 this.setDetail(this.details.lng, this.data.location.lng()); 463 }, 464 465 // Update the plugin after the user has selected an autocomplete entry. 466 // If the place has no geometry it passes it to the geocoder. 467 placeChanged: function(){ 468 var place = this.autocomplete.getPlace(); 469 this.selected = true; 470 471 if (!place.geometry){ 472 if (this.options.autoselect) { 473 // Automatically selects the highlighted item or the first item from the 474 // suggestions list. 475 var autoSelection = this.selectFirstResult(); 476 this.find(autoSelection); 477 } 478 } else { 479 // Use the input text if it already gives geometry. 480 this.update(place); 481 } 482 } 483 }); 484 485 // A plugin wrapper around the constructor. 486 // Pass `options` with all settings that are different from the default. 487 // The attribute is used to prevent multiple instantiations of the plugin. 488 $.fn.geocomplete = function(options) { 489 490 var attribute = 'plugin_geocomplete'; 491 492 // If you call `.geocomplete()` with a string as the first parameter 493 // it returns the corresponding property or calls the method with the 494 // following arguments. 495 if (typeof options == "string"){ 496 497 var instance = $(this).data(attribute) || $(this).geocomplete().data(attribute), 498 prop = instance[options]; 499 500 if (typeof prop == "function"){ 501 prop.apply(instance, Array.prototype.slice.call(arguments, 1)); 502 return $(this); 503 } else { 504 if (arguments.length == 2){ 505 prop = arguments[1]; 506 } 507 return prop; 508 } 509 } else { 510 return this.each(function() { 511 // Prevent against multiple instantiations. 512 var instance = $.data(this, attribute); 513 if (!instance) { 514 instance = new GeoComplete( this, options ); 515 $.data(this, attribute, instance); 516 } 517 }); 518 } 519 }; 520 521})( jQuery, window, document );
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.