improve searchbox style

package.json

@@ -6,23 +6,23 @@
     "build": "vite-ssg build"
   },
   "dependencies": {
-    "@types/google.maps": "^3.50.4",
+    "@types/google.maps": "^3.52.3",
-    "@vitejs/plugin-vue": "^3.1.2",
+    "@vitejs/plugin-vue": "^4.1.0",
-    "@vueuse/core": "^9.3.1",
+    "@vueuse/core": "^9.13.0",
     "fflate": "^0.7.4",
-    "js-base64": "^3.5.2",
+    "js-base64": "^3.7.5",
-    "tailwindcss": "^3.2.1",
+    "tailwindcss": "^3.2.7",
     "tatween": "^0.2.0",
-    "vue": "^3.2.41"
+    "vue": "^3.2.47"
   },
   "devDependencies": {
-    "@googlemaps/js-api-loader": "^1.14.0",
+    "@googlemaps/js-api-loader": "^1.15.1",
-    "@vue/compiler-sfc": "^3.2.41",
+    "@vue/compiler-sfc": "^3.2.47",
-    "@vueuse/head": "^0.9.8",
+    "@vueuse/head": "^1.1.23",
-    "autoprefixer": "^10.4.12",
+    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.18",
+    "postcss": "^8.4.21",
-    "postcss-cli": "^10.0.0",
+    "postcss-cli": "^10.1.0",
-    "vite": "^3.1.8",
+    "vite": "^4.2.1",
-    "vite-ssg": "^0.21.1"
+    "vite-ssg": "^0.22.1"
   }
 }

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>
@@ -18,7 +18,7 @@
     
     const loader = new Loader({
         apiKey: "AIzaSyD7Vm3gm4Fm7jSkuIh_yM14GmYhz1P_S4M",
-        version: "3.48",
+        version: "3.51",
         libraries: ["geometry", "places"]
     });
 
@@ -62,19 +62,39 @@
             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);
+                    currentMap.setZoom(17);
+                    reset();
+                } 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);
+                        reset();
+                    })
                 }
 
-                currentMap.setZoom(17);
-
-                reset();
             });
 
             currentMap.addListener('bounds_changed', function() {

src/index.css

@@ -105,14 +105,8 @@ how to remove the virtical space around the range input in IE*/
 }
 
 .controls {
-  margin-top: 10px;
-  border: 1px solid transparent;
-  border-radius: 2px 0 0 2px;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  height: 40px;
   outline: none;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  @apply shadow-md rounded-md h-10 mt-4 border
 }
 
 #pac-input {