1
0

form_field_location.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <div class="bx-form-input-location-cont bx-clearfix">
  2. __input__
  3. <bx_if:auto_input>
  4. <div id="__id_status__" class="bx-def-margin-sec-left">__location_string__</div>
  5. </bx_if:auto_input>
  6. </div>
  7. <input type="hidden" name="__name___lat" value="__lat__" />
  8. <input type="hidden" name="__name___lng" value="__lng__" />
  9. <input type="hidden" name="__name___country" value="__country__" />
  10. <input type="hidden" name="__name___state" value="__state__" />
  11. <input type="hidden" name="__name___city" value="__city__" />
  12. <input type="hidden" name="__name___zip" value="__zip__" />
  13. <input type="hidden" name="__name___street" value="__street__" />
  14. <input type="hidden" name="__name___street_number" value="__street_number__" />
  15. <script>
  16. var oBxLocationHashMap = {
  17. '__name___lat': '',
  18. '__name___lng': '',
  19. '__name___city': 'locality',
  20. '__name___state': 'administrative_area_level_1',
  21. '__name___country': 'country',
  22. '__name___zip': 'postal_code',
  23. '__name___street': 'route',
  24. '__name___street_number': 'street_number'
  25. };
  26. var bx_location_reset = function () {
  27. for (sKey in oBxLocationHashMap)
  28. $('[name="' + sKey + '"]').val('');
  29. };
  30. var bx_location_process_address = function (o) {
  31. var i, sKey, sCountry, sCity;
  32. for (i in o) {
  33. for (sKey in oBxLocationHashMap) {
  34. var sName = oBxLocationHashMap[sKey];
  35. if ('locality' == sName && -1 == o[i].types.indexOf(sName))
  36. sName = 'postal_town';
  37. if ('administrative_area_level_1' == sName && -1 == o[i].types.indexOf(sName))
  38. sName = 'administrative_area_level_2';
  39. if (o[i].types.indexOf(sName) > -1) {
  40. var sIndex = 'route' == sName || 'locality' == sName ? 'long_name' : 'short_name';
  41. $('[name="' + sKey + '"]').val(o[i][sIndex]);
  42. }
  43. if (o[i].types.indexOf('locality') > -1)
  44. sCity = o[i].short_name;
  45. else if (o[i].types.indexOf('country') > -1)
  46. sCountry = o[i].long_name;
  47. }
  48. }
  49. if ('undefined' != typeof(sCity) && sCity.length)
  50. $('#__id_status__').html(sCity + ", " + sCountry);
  51. else
  52. $('#__id_status__').html(sCountry);
  53. };
  54. var bx_location_geolocate = function () {
  55. if (navigator.geolocation) {
  56. navigator.geolocation.getCurrentPosition(function(position) {
  57. var geolocation = {
  58. lat: position.coords.latitude,
  59. lng: position.coords.longitude
  60. };
  61. var circle = new google.maps.Circle({
  62. center: geolocation,
  63. radius: position.coords.accuracy
  64. });
  65. glBxAutocomplete__name__.setBounds(circle.getBounds());
  66. });
  67. }
  68. }
  69. $('input[name=__name__][type=checkbox]').on('change', function () {
  70. var callbackOnLocationReset = function (error) {
  71. var sKey;
  72. for (sKey in oBxLocationHashMap)
  73. $('[name="' + sKey + '"]').val('');
  74. $('#__id_status__').html("<bx_text_js:_sys_location_undefined />");
  75. }
  76. var callbackOnLocationSucess = function (position) {
  77. bx_location_reset ();
  78. $('[name="__name___lat"]').val(position.coords.latitude);
  79. $('[name="__name___lng"]').val(position.coords.longitude);
  80. var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  81. var geocoder = new google.maps.Geocoder();
  82. geocoder.geocode({'latLng': latlng}, function (results, status) {
  83. if (status == google.maps.GeocoderStatus.OK) {
  84. bx_location_process_address(results[0]['address_components']);
  85. }
  86. else {
  87. $('#__id_status__').html(status);
  88. }
  89. });
  90. }
  91. if ($(this).is(':checked')) {
  92. $('#__id_status__').html('<bx_text_js:_sys_location_determining />');
  93. if (navigator.geolocation)
  94. navigator.geolocation.getCurrentPosition(callbackOnLocationSucess, callbackOnLocationReset);
  95. else
  96. $('#__id_status__').html('<bx_text_js:_sys_location_geolocation_not_supported_by_browser />');
  97. } else {
  98. callbackOnLocationReset();
  99. }
  100. });
  101. var fInitCallback = function () {
  102. var callbackFillInAddress = function () {
  103. // Get the place details from the autocomplete object.
  104. var place = glBxAutocomplete__name__.getPlace();
  105. bx_location_reset ();
  106. $('[name="__name___lat"]').val(place.geometry.location.lat);
  107. $('[name="__name___lng"]').val(place.geometry.location.lng);
  108. bx_location_process_address(place.address_components);
  109. }
  110. $('input[name=__name__][type=text]').on('focus', bx_location_geolocate);
  111. $('input[name=__name__][type=text]').on('blur', function () {
  112. if (!$(this).val().length)
  113. bx_location_reset ();
  114. });
  115. if ($('input[name=__name__][type=text]').size()) {
  116. // Create the autocomplete object, restricting the search to geographical location types.
  117. glBxAutocomplete__name__ = new google.maps.places.Autocomplete(
  118. /** @type {!HTMLInputElement} */(document.getElementById('__id_input__'))
  119. );
  120. // When the user selects an address from the dropdown, populate the address fields in the form.
  121. glBxAutocomplete__name__.addListener('place_changed', callbackFillInAddress);
  122. }
  123. }
  124. $(document).ready(function () {
  125. if ('undefined' === typeof(google))
  126. bx_get_scripts(['https://maps.google.com/maps/api/js?libraries=places&language=__lang__&key=__key__'], fInitCallback);
  127. else
  128. fInitCallback();
  129. });
  130. </script>