Address input

The address input component is used to collect a user's address. It uses Google Maps to autocomplete the address.

1const Map = ({ lat, lng, className }) => {
2  const mapRef = useRef(null);
3
4  useEffect(() => {
5    if (mapRef.current) {
6      const map = new google.maps.Map(mapRef.current, {
7        center: { lat, lng },
8        zoom: 15,
9        zoomControl: false,
10        mapTypeControl: false,
11        scaleControl: false,
12        streetViewControl: false,
13        rotateControl: false,
14        fullscreenControl: true,
15      });
16
17      new google.maps.Marker({
18        map: map,
19        position: { lat, lng },
20      });
21    }
22  }, [lat, lng]);
23
24  return html`<div className=${className} ref=${mapRef}></div>`;
25};
26
27
28const AddressInput = ({ onAddressChange, address, onSubmit, submitted }) => {
29  const [coordinates, setCoordinates] = useState(null);
30  const textareaRef = useRef(null);
31  const [isGoogleMapsLoaded, setIsGoogleMapsLoaded] = useState(false);
32
33  useEffect(() => {
34    const loadGoogleMapsScript = () => {
35      if (window.google) {
36        return;
37      }
38
39      const script = document.createElement("script");
40      script.type = "text/javascript";
41      script.src = 'https://maps.googleapis.com/maps/api/js?key=' + "AIzaSyCWHY-t-CrbyjvlLZAbsUe1YZO7wTMqTNg" + '&libraries=places';
42      script.async = true;
43      script.defer = true;
44      script.onload = () => setIsGoogleMapsLoaded(true);
45      document.head.appendChild(script);
46    };
47
48    loadGoogleMapsScript();
49  }, []);
50
51  useEffect(() => {
52    const initializeAutocomplete = () => {
53      if (!window.google || !textareaRef.current) return;
54
55      const autocomplete = new google.maps.places.Autocomplete(
56        textareaRef.current,
57        { types: ['address'] }
58      );
59
60      autocomplete.addListener('place_changed', () => {
61        const place = autocomplete.getPlace();
62        // ... rest of the logic
63      });
64    };
65
66    initializeAutocomplete();
67  }, [isGoogleMapsLoaded]);
68
69  return html`
70    <form
71      className="address-container"
72      onSubmit=${(event) => {
73        event.preventDefault();
74        onSubmit();
75      }}
76    >
77      <textarea
78        ref=${textareaRef}
79        value=${address}
80        onChange=${(e) => onAddressChange(e.target.value)}
81        placeholder="Enter address here"
82        rows={5}
83        className="address-textarea"
84      />
85      ${coordinates ?
86        '<Map className="map-container" lat=' + coordinates.lat + ' lng=' + coordinates.lng + ' />' :
87        '<div className="map-placeholder"></div>'
88      }
89      <button disabled=${!coordinates || submitted} type="submit">Submit</button>
90    </form>
91  `;
92};