https://whale-app-6m5a4.ondigitalocean.app/components/AddressSearch.js

1import { state, propertyAddress } from "../common.js";
2
3//let autocomplete;
4
5// export const setUpAddress = () => {
6//   const options = {
7//     componentRestrictions: { country: "gb" },
8//     fields: ["formatted_address", "address_components"],
9//     types: ["premise"],
10//     strictBounds: false,
11//   };
12//   autocomplete = new google.maps.places.Autocomplete(propertyAddress, options);
13//   autocomplete.addListener("place_changed", selectAddress);
14// };
15
16export function selectAddress() {
17  // Get the place details from the autocomplete object.
18  const place = state.googleAutoComplete.getPlace();
19
20  state.securityPropertyAddress = {};
21  state.securityPropertyAddress.formattedAddress = place.formatted_address;
22  console.log(place.address_components);
23
24  for (const component of place.address_components) {
25    // @ts-ignore remove once typings fixed
26    const componentType = component.types[0];
27
28    switch (componentType) {
29      case "street_number": {
30        state.securityPropertyAddress.addressOne = component.long_name;
31        break;
32      }
33
34      case "route": {
35        state.securityPropertyAddress.addressOne += " " + component.long_name;
36        break;
37      }
38
39      case "postal_town": {
40        state.securityPropertyAddress.addressTwo = component.long_name;
41        break;
42      }
43
44      case "administrative_area_level_2": {
45        state.securityPropertyAddress.addressThree = component.long_name;
46        break;
47      }
48
49      case "postal_code": {
50        state.securityPropertyAddress.postcode = component.long_name;
51        break;
52      }
53    }
54  }
55
56  if (!state.securityPropertyAddress.hasOwnProperty("addressOne")) {
57    state.securityPropertyAddress.addressOne = "Address Line Not Found";
58  }
59  if (!state.securityPropertyAddress.hasOwnProperty("addressTwo")) {
60    state.securityPropertyAddress.addressTwo = "Address Line Not Found";
61  }
62  if (!state.securityPropertyAddress.hasOwnProperty("addressThree")) {
63    state.securityPropertyAddress.addressThree = "Address Line Not Found";
64  }
65  if (!state.securityPropertyAddress.hasOwnProperty("postcode")) {
66    state.securityPropertyAddress.postcode = "Address Line Not Found";
67  }
68  console.log(place);
69  console.log(state.securityPropertyAddress);
70  propertyAddress.value = place.formatted_address;
71
72  // Get each component of the address from the place details,
73  // and then fill-in the corresponding field on the form.
74  // place.address_components are google.maps.GeocoderAddressComponent objects
75  // which are documented at http://goo.gle/3l5i5Mr
76}