https://www.prixdeslibraires.qc.ca/gi2-modules/standard/membre/client/inc/addr_auto_complete.js?rand_5729=6280

1//https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform#maps_places_autocomplete_addressform-javascript
2
3// This sample uses the Places Autocomplete widget to:
4// 1. Help the user select a place
5// 2. Retrieve the address components associated with that place
6// 3. Populate the form fields with those address components.
7// This sample requires the Places library, Maps JavaScript API.
8// Include the libraries=places parameter when you first load the API.
9// For example: <script
10// src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
11let autocomplete;
12let address1Field;
13let address2Field;
14let postalField;
15
16function initAutocomplete() {
17    address1Field = document.querySelector("#ship-address");
18    address2Field = document.querySelector("#address2");
19    postalField = document.querySelector("#postcode");
20    // Create the autocomplete object, restricting the search predictions to
21    // addresses in the US and Canada.
22    autocomplete = new google.maps.places.Autocomplete(address1Field, {
23        componentRestrictions: { country: ["ca"] },

24        fields: ["address_components", "geometry"],
25        types: ["address"],
26    });
27    address1Field.focus();
28    // When the user selects an address from the drop-down, populate the
29    // address fields in the form.
30    autocomplete.addListener("place_changed", fillInAddress);
31}
32
33function fillInAddress() {
34    // Get the place details from the autocomplete object.
35    const place = autocomplete.getPlace();
36    let address1 = "";
37    let postcode = "";
38
39    // Get each component of the address from the place details,
40    // and then fill-in the corresponding field on the form.
41    // place.address_components are google.maps.GeocoderAddressComponent objects
42    // which are documented at http://goo.gle/3l5i5Mr
43    for (const component of place.address_components) {
44        // @ts-ignore remove once typings fixed
45        const componentType = component.types[0];
46
47        switch (componentType) {
48            case "street_number": {
49                address1 = `${component.long_name} ${address1}`;
50                break;
51            }
52
53            case "route": {
54                address1 += component.short_name;
55                break;
56            }
57
58            case "postal_code": {
59                postcode = `${component.long_name}${postcode}`;
60                break;
61            }
62
63            case "postal_code_suffix": {
64                postcode = `${postcode}-${component.long_name}`;
65                break;
66            }
67            case "locality":
68                document.querySelector("#locality").value = component.long_name;
69                var id_elem_locality=$('#locality').attr('id_elem');
70                if(id_elem_locality){
71                    autoSave('locality');
72                }
73
74                /*var ville=$('#locality')=component.long_name;
75                $.post(
76                    "/gi2-modules/standard/membre/client/inc/ajax_input.php", {
77                        mod:'region_by_ville',
78                        ville:ville
79                    })
80                    .done(function( data ) {
81                        if(data){
82                            $("#region_id" ).val( data );
83                        }
84                    });*/
85                break;
86            case "administrative_area_level_1": {
87                document.querySelector("#state").value = component.short_name;
88                var id_elem_state=$('#state').attr('id_elem');
89                if(id_elem_state){
90                    autoSave('state');
91                }
92                break;
93            }
94            case "country":
95                document.querySelector("#country").value = component.long_name;
96                var id_elem_country=$('#country').attr('id_elem');
97                if(id_elem_country){
98                    autoSave('country');
99                }
100                break;
101        }
102    }
103
104    address1Field.value = address1;         //#ship-address
105    var id_elem_ship_address=$('#ship-address').attr('id_elem');
106    if(id_elem_ship_address){
107        autoSave('ship-address');
108    }
109    postalField.value = postcode;           //#postcode
110    var id_elem_postcode=$('#postcode').attr('id_elem');
111    if(id_elem_postcode){
112        autoSave('postcode');
113    }
114
115    // After filling the form with address components from the Autocomplete
116    // prediction, set cursor focus on the second address line to encourage
117    // entry of subpremise information such as apartment, unit, or floor number.
118    address2Field.focus();
119}
120
121window.initAutocomplete = initAutocomplete;
122
123