src/Resources/views/Registration/azure_maps.html.twig line 1

Open in your IDE?
  1. <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
  2. <script type="text/javascript">
  3.     jQuery(document).ready(function() {
  4.         var subscription_key = '{{ azure_maps_key }}';
  5.         var addresssGeocodeServiceUrlTemplate = '{{ azure_maps_url }}/search/address/json?typeahead=true&subscription-key={subscription-key}&api-version=1&query={query}&language={language}&countrySet={countrySet}&view=Auto&limit=10';
  7.         //Create a jQuery autocomplete UI widget.
  8.         jQuery("{{ id }}").autocomplete({
  9.             minLength: 3,
  10.             source: function (request, response) {
  12.                 //Create a URL to the Azure Maps search service to perform the address search.
  13.                 var requestUrl = addresssGeocodeServiceUrlTemplate.replace('{query}', encodeURIComponent(request.term))
  14.                     .replace('{subscription-key}', subscription_key ?? '')
  15.                     .replace('{language}', 'fr-FR')
  16.                     .replace('{countrySet}', '{{ current_country|upper }}');
  18.                 //Proces the request.
  19.                 fetch(requestUrl, {
  20.                     method: 'GET',
  21.                     mode: 'cors',
  22.                     headers: {
  23.                         'Content-Type': 'application/json; charset=utf-8'
  24.                     }
  25.                 }).then(r => r.json()).then(data => {
  26.                     response(data.results);
  27.                 });
  28.             },
  29.             select: function (event, ui) {
  30.                 //When a suggestion has been selected.
  31.                 var selection = ui.item;
  33.                 //Populate the address textbox values.
  34.                 document.getElementById('{{ address }}').value = (selection.address.streetNumber ? (selection.address.streetNumber  + ' ') : '') + (selection.address.streetName || '');
  35.                 document.getElementById('{{ city }}').value = selection.address.municipality || '';
  36.                 document.getElementById('{{ zipCode }}').value = selection.address.postalCode || '';
  37.                 document.getElementById('{{ country }}').value = selection.address.countryCode || '';
  38.             }
  39.         }).autocomplete("instance")._renderItem = function (ul, item) {
  40.             //Format the displayed suggestion to show the formatted suggestion string.
  41.             var suggestionLabel = item.address.freeformAddress;
  43.             if (item.poi && item.poi.name) {
  44.                 suggestionLabel = item.poi.name + ' (' + suggestionLabel + ')';
  45.             }
  47.             return jQuery("<li>")
  48.                 .append("<a>" + suggestionLabel + "</a>")
  49.                 .appendTo(ul);
  50.         };
  51.     });
  52. </script>