- run by vite

- change camera

src/components/MapCheckin.vue

@@ -1,101 +1,101 @@
-<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>("");
-const test = ref();
-
-// hook
-onMounted(() => {
-  findNearestPlace();
-});
-
-// หาตำแหน่ง
-function findNearestPlace() {
-  if (navigator.geolocation) {
-    navigator.geolocation.getCurrentPosition(
-      (position) => {
-        const userLocation = {
-          lat: position.coords.latitude,
-          lng: position.coords.longitude,
-        };
-
-        // ส่ง Location ไปยัง API เพื่อหาสถานที่ที่ใกล้ที่สุด
-        findNearestPlaceFromAPI(userLocation);
-        center.value = userLocation;
-        console.log(center.value);
-      },
-      (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: 1000, // รัศมีในเมตร
-    types: ["point_of_interest"], // ประเภทของสถานที่ที่คุณต้องการค้นหา
-  };
-
-  placesService.nearbySearch(request, (results: any, status: any) => {
-    if (status === google.maps.places.PlacesServiceStatus.OK) {
-      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);
-    }
-  });
-}
-</script>
-
-<template>
-  <q-card
-    bordered
-    flat
-    class="col-12 bg-grey-2 shadow-0"
-    :style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 360px;'"
-  >
-    <div style="width: 100%; height: 90%">
-      <GoogleMap
-        api-key="AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58"
-        style="width: 100%; height: 100%"
-        :center="center"
-        :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>
-
-    <div
-      :class="
-        $q.screen.gt.xs
-          ? 'q-pa-sm text-weight-medium text-grey-8'
-          : ' text-weight-medium text-grey-8'
-      "
-    >
-      พื้นที่ใกล้เคียง
-      <span class="q-px-sm">:</span>
-      {{ location }}
-    </div>
-  </q-card>
-</template>
-
-<style scoped></style>
+<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>('')
+const test = ref()
+
+// hook
+onMounted(() => {
+  findNearestPlace()
+})
+
+// หาตำแหน่ง
+function findNearestPlace() {
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const userLocation = {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude,
+        }
+
+        // ส่ง Location ไปยัง API เพื่อหาสถานที่ที่ใกล้ที่สุด
+        findNearestPlaceFromAPI(userLocation)
+        center.value = userLocation
+        console.log(center.value)
+      },
+      (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: 1000, // รัศมีในเมตร
+    types: ['point_of_interest'], // ประเภทของสถานที่ที่คุณต้องการค้นหา
+  }
+
+  placesService.nearbySearch(request, (results: any, status: any) => {
+    if (status === google.maps.places.PlacesServiceStatus.OK) {
+      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)
+    }
+  })
+}
+</script>
+
+<template>
+  <q-card
+    bordered
+    flat
+    class="col-12 bg-grey-2 shadow-0"
+    :style="$q.screen.gt.xs ? 'height: 350px;' : 'height: 360px;'"
+  >
+    <div style="width: 100%; height: 90%">
+      <GoogleMap
+        api-key="AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58"
+        style="width: 100%; height: 100%"
+        :center="center"
+        :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>
+
+    <div
+      :class="
+        $q.screen.gt.xs
+          ? 'q-pa-sm text-weight-medium text-grey-8'
+          : ' text-weight-medium text-grey-8'
+      "
+    >
+      พื้นที่ใกล้เคียง
+      <span class="q-px-sm">:</span>
+      {{ location }}
+    </div>
+  </q-card>
+</template>
+
+<style scoped></style>