refactor code & fixed location

src/components/MapCheckin.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { GoogleMap, Marker } from 'vue3-google-map'
+import { useQuasar } from 'quasar'
+
+const $q = useQuasar()
+
+const googleMapsApiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY || ''
 
 declare var google: any
 const center = ref<any>()
@@ -29,11 +34,32 @@ function findNearestPlace() {
       },
       (error) => {
         console.error(error)
-        console.log('erroe')
+        // Show user-friendly error message
+        let errorMessage = 'ไม่สามารถระบุตำแหน่งได้'
+        switch (error.code) {
+          case error.PERMISSION_DENIED:
+            errorMessage = 'คุณปฏิเสธการอนุญาตให้เข้าถึงตำแหน่ง'
+            break
+          case error.POSITION_UNAVAILABLE:
+            errorMessage = 'ข้อมูลตำแหน่งไม่พร้อมใช้งาน'
+            break
+          case error.TIMEOUT:
+            errorMessage = 'หมดเวลาในการระบุตำแหน่ง'
+            break
+        }
+        $q.notify({
+          type: 'negative',
+          message: errorMessage,
+          position: 'top',
+        })
       }
     )
   } else {
-    console.error('เบราว์เซอร์ไม่รองรับการระบุตำแหน่ง')
+    $q.notify({
+      type: 'negative',
+      message: 'เบราว์เซอร์ไม่รองรับการระบุตำแหน่ง',
+      position: 'top',
+    })
   }
 }
 
@@ -69,6 +95,14 @@ function findNearestPlaceFromAPI(userLocation: any) {
 onMounted(() => {
   findNearestPlace()
 })
+
+// Cleanup resources
+onBeforeUnmount(() => {
+  // Clear location reference to prevent memory leaks
+  center.value = undefined
+  location.value = ''
+  test.value = undefined
+})
 </script>
 
 <template>
@@ -80,7 +114,7 @@ onMounted(() => {
   >
     <div style="width: 100%; height: 90%">
       <GoogleMap
-        api-key="AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58"
+        :api-key="googleMapsApiKey"
         style="width: 100%; height: 100%"
         :center="center"
         :zoom="15"