upload new version

src/components/MapCheckin.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { GoogleMap, Marker } from "vue3-google-map";
+
+declare var google: any;
+const center = ref<any>();
+const location = ref<string>("สำนักงาน");
+
+// hook
+onMounted(() => {
+  findNearestPlace();
+});
+
+// หาตำแหน่ง
+function findNearestPlace() {
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const userLocation = {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude,
+        };
+
+        // ส่ง userLocation ไปยัง API เพื่อหาสถานที่ที่ใกล้ที่สุด
+
+        findNearestPlaceFromAPI(userLocation);
+        center.value = userLocation;
+      },
+      (error) => {
+        console.error(error);
+        console.log("erroe");
+      }
+    );
+  } else {
+    console.error("เบราว์เซอร์ไม่รองรับการระบุตำแหน่ง");
+  }
+}
+function findNearestPlaceFromAPI(userLocation: any) {
+  const placesService = new google.maps.places.PlacesService(
+    document.createElement("div")
+  );
+
+  const request = {
+    location: userLocation,
+    radius: 500, // รัศมีในเมตร
+    types: [
+      "hospital",
+      "school",
+      "stadium",
+      "cafe",
+      "gym",
+      "store",
+      "accounting",
+      "amusement_park",
+    ], // ประเภทของสถานที่ที่คุณต้องการค้นหา
+  };
+
+  placesService.nearbySearch(request, (results: any, status: any) => {
+    if (status === google.maps.places.PlacesServiceStatus.OK) {
+      console.log("Nearby places:", results);
+    } else {
+      console.error("Error fetching nearby places:", status);
+    }
+  });
+}
+</script>
+
+<template>
+  <q-card
+    bordered
+    flat
+    class="col-12 bg-grey-2 shadow-0"
+    :style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 220px;'"
+  >
+    <div style="width: 100%; height: 90%">
+      <GoogleMap
+        api-key="AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58"
+        style="width: 100%; height: 100%"
+        :center="center"
+        :zoom="15"
+      >
+        <Marker :options="{ position: center }" />
+      </GoogleMap>
+    </div>
+
+    <div class="q-pa-md text-weight-medium text-grey-8">
+      พื้นที่ใกล้เคียง
+      <span class="q-px-sm">:</span>
+      {{ location }}
+    </div>
+  </q-card>
+</template>
+
+<style scoped></style>