แสดง marker พื้นที่ใกล้เคียง

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>