From c3d8ec885952d0e645e530d65c9be88b7a661a5d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 7 Nov 2023 17:22:50 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=20marker?=
 =?UTF-8?q?=20=E0=B8=9E=E0=B8=B7=E0=B9=89=E0=B8=99=E0=B8=97=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B9=83=E0=B8=81=E0=B8=A5=E0=B9=89=E0=B9=80=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MapCheckin.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/MapCheckin.vue b/src/components/MapCheckin.vue
index 1cad73c..bff12c8 100644
--- a/src/components/MapCheckin.vue
+++ b/src/components/MapCheckin.vue
@@ -4,7 +4,8 @@ import { GoogleMap, Marker } from "vue3-google-map";
 
 declare var google: any;
 const center = ref<any>();
-const location = ref<string>("สำนักงาน");
+const location = ref<string>("");
+const test = ref();
 
 // hook
 onMounted(() => {
@@ -24,6 +25,7 @@ function findNearestPlace() {
         // ส่ง Location ไปยัง API เพื่อหาสถานที่ที่ใกล้ที่สุด
         findNearestPlaceFromAPI(userLocation);
         center.value = userLocation;
+        console.log(center.value);
       },
       (error) => {
         console.error(error);
@@ -47,8 +49,10 @@ function findNearestPlaceFromAPI(userLocation: any) {
 
   placesService.nearbySearch(request, (results: any, status: any) => {
     if (status === google.maps.places.PlacesServiceStatus.OK) {
-      console.log("Nearby places:", results[0].name);
-      location.value = results[0].name;
+      console.log("Nearby places:", results[0]);
+      const place = results[0];
+      location.value = place.name;
+      test.value = place.geometry.location;
     } else {
       console.error("Error fetching nearby places:", status);
     }
@@ -71,6 +75,12 @@ function findNearestPlaceFromAPI(userLocation: any) {
         :zoom="17"
       >
         <Marker :options="{ position: center }" />
+        <Marker
+          :options="{
+            position: test,
+            icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
+          }"
+        />
       </GoogleMap>
     </div>