From 9f37387b730a7e3b0628505b46b9783dc1a252b3 Mon Sep 17 00:00:00 2001
From: Patrick Joyce <pjaudiomv@gmail.com>
Date: Sat, 15 Jun 2024 21:54:54 -0400
Subject: [PATCH] use advanced places api

---
 src/routes/Geolocator.svelte | 50 ++++++++++++++++++++++++------------
 src/styles/main.css          |  8 ++++++
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/routes/Geolocator.svelte b/src/routes/Geolocator.svelte
index b6ab97c..11fd52a 100644
--- a/src/routes/Geolocator.svelte
+++ b/src/routes/Geolocator.svelte
@@ -6,7 +6,6 @@
 	let geocoder: google.maps.Geocoder;
 	let map: google.maps.Map;
 	let mapElement: HTMLElement;
-	let locationSearch: string = '';
 	const marker = writable<google.maps.marker.AdvancedMarkerElement | null>(null);
 	const showDebug = writable(false);
 	const showMap = writable(false);
@@ -25,6 +24,17 @@
 	let zip = '';
 	let nation = '';
 
+	interface PlaceSelectEvent extends Event {
+		place: {
+			fetchFields: (options: { fields: string[] }) => Promise<void>;
+			location: {
+				lng: () => number;
+				lat: () => number;
+			};
+			formattedAddress: string;
+		};
+	}
+
 	const createMarker = (mapInstance: google.maps.Map, position: google.maps.LatLngLiteral): void => {
 		const markerInstance = new google.maps.marker.AdvancedMarkerElement({
 			map: mapInstance,
@@ -164,6 +174,7 @@
 
 		mapElement = document.getElementById('map') as HTMLElement;
 		geocoder = new google.maps.Geocoder();
+
 		if (mapElement) {
 			map = new Map(mapElement, {
 				center: { lat: 37, lng: -96 },
@@ -179,22 +190,27 @@
 				}
 			});
 
-			if (typeof window !== 'undefined') {
-				const autocomplete = new google.maps.places.Autocomplete(document.getElementById('locationSearch') as HTMLInputElement, { types: ['geocode'] });
-				autocomplete.bindTo('bounds', map);
-				autocomplete.addListener('place_changed', () => {
-					const place = autocomplete.getPlace();
-					if (!place.geometry) return;
-					const location = place.geometry.location;
-					if (location) {
-						longitude.set(location.lng().toString());
-						latitude.set(location.lat().toString());
-						const latLngLiteral = { lat: location.lat(), lng: location.lng() };
-						createMarker(map, latLngLiteral);
-						map.setCenter(latLngLiteral);
-					}
+			const autocomplete = new google.maps.places.PlaceAutocompleteElement({});
+			autocomplete.id = 'locationSearch';
+			const locationSearchDiv = document.getElementById('locationSearch') as HTMLElement;
+			locationSearchDiv.appendChild(autocomplete);
+			autocomplete.addEventListener('gmp-placeselect', async (event) => {
+				const placeEvent = event as PlaceSelectEvent;
+				const place = placeEvent.place;
+				await place.fetchFields({
+					fields: ['displayName', 'formattedAddress', 'location']
 				});
-			}
+				addressString.set(place.formattedAddress);
+				const location = place.location;
+				if (location) {
+					longitude.set(location.lng().toString());
+					latitude.set(location.lat().toString());
+					const latLngLiteral = { lat: location.lat(), lng: location.lng() };
+					createMarker(map, latLngLiteral);
+					map.setCenter(latLngLiteral);
+					reverseLookup();
+				}
+			});
 		}
 	});
 </script>
@@ -205,7 +221,7 @@
 		<form on:submit|preventDefault={() => geocodeAddress()}>
 			<div class="one_line_form">
 				<label for="locationSearch">Location Search:</label>
-				<input id="locationSearch" bind:value={locationSearch} />
+				<div id="locationSearch"></div>
 			</div>
 			<div class="one_line_form">
 				<label for="address">Address:</label>
diff --git a/src/styles/main.css b/src/styles/main.css
index 2c0c22b..4dab9a9 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -254,6 +254,10 @@ a:active {
 	flex: 1 1 50%;
 }
 
+div.widget-container div.input-container input {
+	flex: 1 1 50%;
+}
+
 @media (max-width: 768px) {
 	#bmlt_tools_main_container {
 		width: 95%;
@@ -295,6 +299,10 @@ a:active {
 	#bmlt_tools_main_container .one_line_form input#locationSearch {
 		width: 50%;
 	}
+
+	div.widget-container div.input-container input {
+		width: 50%;
+	}
 }
 
 /* Dark mode styles */