picker_location.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. /* ------------------------------------------------------------------------------
  2. *
  3. * # Location pickers
  4. *
  5. * Demo JS code for picker_location.html page
  6. *
  7. * ---------------------------------------------------------------------------- */
  8. // Setup module
  9. // ------------------------------
  10. var LocationPicker = function() {
  11. //
  12. // Setup module components
  13. //
  14. // Location picker
  15. var _componentLocation = function() {
  16. if (!$().locationpicker) {
  17. console.warn('Warning - location.js is not loaded.');
  18. return;
  19. }
  20. // Basic functionality
  21. $('.locationpicker-default').locationpicker({
  22. radius: 150,
  23. scrollwheel: false,
  24. zoom: 10
  25. });
  26. // Manipulating from callback
  27. $('.locationpicker-manipulate').locationpicker({
  28. location: {
  29. latitude: 46.15242437752303,
  30. longitude: 2.7470703125
  31. },
  32. radius: 300,
  33. onchanged: function(currentLocation, radius, isMarkerDropped) {
  34. var mapContext = $(this).locationpicker('map');
  35. mapContext.map.setZoom(20);
  36. }
  37. });
  38. // Binding UI with the widget
  39. $('#us2').locationpicker({
  40. location: {latitude: 44.1219256, longitude: 15.2357175},
  41. radius: 300,
  42. scrollwheel: false,
  43. inputBinding: {
  44. latitudeInput: $('#us2-lat'),
  45. longitudeInput: $('#us2-lon'),
  46. radiusInput: $('#us2-radius'),
  47. locationNameInput: $('#us2-address')
  48. }
  49. });
  50. // Subscribing for events
  51. $('#us3').locationpicker({
  52. location: {latitude: 47.494293, longitude: 19.054151899999965},
  53. radius: 300,
  54. scrollwheel: false,
  55. inputBinding: {
  56. latitudeInput: $('#us3-lat'),
  57. longitudeInput: $('#us3-lon'),
  58. radiusInput: $('#us3-radius'),
  59. locationNameInput: $('#us3-address')
  60. },
  61. enableAutocomplete: true,
  62. onchanged: function(currentLocation, radius, isMarkerDropped) {
  63. alert("Location changed. New location (" + currentLocation.latitude + ", " + currentLocation.longitude + ")");
  64. }
  65. });
  66. };
  67. // Typeahead address picker
  68. var _componentAddressTypeahead = function() {
  69. if (typeof AddressPicker == 'undefined' || !$().typeahead) {
  70. console.warn('Warning - typeahead_addresspicker.js and/or typeahead.bundle.min.js is not loaded.');
  71. return;
  72. }
  73. // Instantiate the addressPicker suggestion engine (based on bloodhound)
  74. var addressPicker = new AddressPicker({
  75. map: {
  76. id: '#map',
  77. scrollwheel: false,
  78. zoom: 10,
  79. center: new google.maps.LatLng(53.5510846, 9.99368179999999)
  80. },
  81. reverseGeocoding: true,
  82. autocompleteService: {
  83. types: ['(cities)'],
  84. componentRestrictions: {
  85. country: 'DE'
  86. }
  87. }
  88. });
  89. // Instantiate the typeahead UI
  90. $('#address').typeahead(null, {
  91. displayKey: 'description',
  92. limit: 20,
  93. source: addressPicker.ttAdapter()
  94. });
  95. // Bind event
  96. addressPicker.bindDefaultTypeaheadEvent($('#address'));
  97. // When address is selected
  98. $(addressPicker).on('addresspicker:selected', function (event, result) {
  99. Prism.highlightAll();
  100. html = ["Address: " + result.address()]
  101. html.push("Latitude: " + result.lat())
  102. html.push("Longitude: " + result.lng())
  103. html.push("Long names:")
  104. result.addressTypes().forEach(function(type) {
  105. html.push(" " + type + ": " + result.nameForType(type))
  106. });
  107. html.push("Short names:")
  108. result.addressTypes().forEach(function(type) {
  109. html.push(" " + type + ": " + result.nameForType(type, true))
  110. });
  111. $('#response code').html( html.join('\n'));
  112. });
  113. };
  114. // Autocomplete address picker
  115. var _componentAddressAutocomplete = function() {
  116. if (!$().addresspicker ) {
  117. console.warn('Warning - typeahead_addresspicker.js is not loaded.');
  118. return;
  119. }
  120. // Initialization
  121. var addresspickerMap = $('#addresspicker_map').addresspicker({
  122. regionBias: 'fr',
  123. updateCallback: showCallback,
  124. mapOptions: {
  125. zoom: 10,
  126. center: new google.maps.LatLng(48.856614, 2.3522219000000177),
  127. scrollwheel: false,
  128. mapTypeId: google.maps.MapTypeId.ROADMAP
  129. },
  130. elements: {
  131. map: '#map2'
  132. }
  133. });
  134. // Add markers
  135. var gmarker = addresspickerMap.addresspicker('marker');
  136. gmarker.setVisible(true);
  137. addresspickerMap.addresspicker('updatePosition');
  138. // Reverse Geocode after Marker Drag
  139. $('#reverseGeocode').on('change', function(){
  140. $('#addresspicker_map').addresspicker('option', 'reverseGeocode', ($(this).val() === 'true'));
  141. });
  142. // Callback
  143. function showCallback(geocodeResult, parsedGeocodeResult){
  144. $('#response2 code').text(JSON.stringify(parsedGeocodeResult, null, 4));
  145. Prism.highlightAll();
  146. }
  147. // Update zoom field
  148. var map = $('#addresspicker_map').addresspicker('map');
  149. google.maps.event.addListener(map, 'idle', function(){
  150. $('#zoom').val(map.getZoom());
  151. });
  152. };
  153. //
  154. // Return objects assigned to module
  155. //
  156. return {
  157. init: function() {
  158. _componentLocation();
  159. _componentAddressTypeahead();
  160. _componentAddressAutocomplete();
  161. }
  162. }
  163. }();
  164. // Initialize module
  165. // ------------------------------
  166. document.addEventListener('DOMContentLoaded', function() {
  167. LocationPicker.init();
  168. });