From 58b5ff8f80a6a0ceb9e3e3c9231da2f5360a347b Mon Sep 17 00:00:00 2001
From: Anthony Catel <paraboul@gmail.com>
Date: Tue, 21 Mar 2023 22:48:54 +0100
Subject: [PATCH] Fix search when pressing enter : trigger a place prediction
 call and get the first result

---
 src/components/Map.vue | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index 118a534..1fc2d8c 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="w-full h-full">
-        <input ref="pacinput" id="pac-input" class="controls" :class="[mapLoaded ? '' : 'hidden']" type="text" placeholder="Search Box">
+        <input ref="pacinput" id="pac-input" class="controls" :class="[mapLoaded ? '' : 'hidden']" type="text" placeholder="Search a place">
         <div class="w-full h-full" ref="mapel"></div>
     </div>
 </template>
@@ -62,14 +62,34 @@
             const searchBox = new google.maps.places.Autocomplete(pacinput.value, {
                 fields: ['geometry']
             })
-            // const searchBox = new google.maps.places.SearchBox(pacinput.value);
+            const service = new google.maps.places.AutocompleteService();
+            const placesService = new google.maps.places.PlacesService(currentMap)
+
             currentMap.controls[google.maps.ControlPosition.LEFT_TOP].push(pacinput.value);
 
-            searchBox.addListener('place_changed', () => {
+            searchBox.addListener('place_changed', async () => {
                 const place = searchBox.getPlace();
 
                 if (place.geometry?.location) {
                     currentMap.setCenter(place.geometry.location);
+                } else {
+                    const sessionToken = new google.maps.places.AutocompleteSessionToken();
+                    const rest = await service.getPlacePredictions({
+                        input: place.name!,
+                        sessionToken
+                    })
+
+                    placesService.getDetails({
+                        sessionToken,
+                        placeId: rest.predictions[0].place_id
+                    }, (res) => {
+                        if (!res?.geometry?.location) {
+                            return;
+                        }
+
+                        currentMap.setCenter(res.geometry.location);
+                    })
+                    
                 }
 
                 currentMap.setZoom(17);