diff --git a/index.html b/index.html
index 4828cc4..c5fca42 100644
--- a/index.html
+++ b/index.html
@@ -19,11 +19,11 @@
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
-    <script src="https://js.arcgis.com/4.19/"></script>
-    <!-- <link
+    <!-- <script src="https://js.arcgis.com/4.19/"></script> -->
+
+    <link
       rel="stylesheet"
       href="https://js.arcgis.com/4.19/esri/themes/light/main.css"
     />
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzPSF5NxUZ1G8DKBnJvJPTqCR0Ct2xf58&libraries=places"></script> -->
   </body>
 </html>
diff --git a/src/components/AscGISMapTime.vue b/src/components/AscGISMapTime.vue
new file mode 100644
index 0000000..6a66581
--- /dev/null
+++ b/src/components/AscGISMapTime.vue
@@ -0,0 +1,381 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { loadModules } from 'esri-loader'
+import axios from 'axios'
+
+import type { LocationObject } from '@/interface/index/Main'
+
+const emit = defineEmits(['update:location'])
+
+function updateLocation(latitude: number, longitude: number, namePOI: string) {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit('update:location', latitude, longitude, namePOI)
+}
+
+const poiPlaceName = ref<string>('') // ชื่อพื้นที่ใกล้เคียง
+
+// Replace ArcGIS api key
+const apiKey = ref<string>(
+  'YLATgWuywoeRLHn6KImj5rg7UaP8bJoR9jiTldoCVBHlqFIebwMSA5wIXEmcYhwXwMHkmNISEYtUz3x0oiGIIx0bIXXnUwi0OzupoOEtDrQIsRPVtor7gaPpXEmH8TrNaMT3snf6zO_yujHLGzborg-L9aeAjTJn4ndL6f8qFmRzYcX93E2vyA-7XCufLYTRsdTE5Aq-9hnx1q9PmYVMqhAZpL7dWqn3JgO33fRXetk.'
+  // 'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
+)
+const zoomMap = ref<number>(18)
+
+async function initializeMap() {
+  try {
+    // Load modules of ArcGIS
+    loadModules([
+      'esri/config',
+      'esri/Map',
+      'esri/views/MapView',
+      'esri/Graphic',
+      'esri/geometry/Point',
+      'esri/symbols/PictureMarkerSymbol',
+      'esri/widgets/Search',
+    ]).then(
+      async ([
+        esriConfig,
+        Map,
+        MapView,
+        Graphic,
+        Point,
+        PictureMarkerSymbol,
+        Search,
+      ]) => {
+        // Set apiKey
+        // esriConfig.apiKey =
+        //   'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP'
+
+        // Create a FeatureLayer using a custom server URL
+        // const hillshadeLayer = new TileLayer({
+        //   url: `https://bmagis.bangkok.go.th/arcgis/rest/services/cache/BMA_3D_2D_Cache/MapServer`,
+        // })
+
+        const map = new Map({
+          basemap: 'streets',
+          // basemap: 'streets-navigation-vector',
+          // basemap: 'arcgis-topographic',
+          // layers: [hillshadeLayer],
+        })
+
+        navigator.geolocation.getCurrentPosition(async (position) => {
+          const { latitude, longitude } = position.coords
+          const pointDefult = new Point({
+            latitude,
+            longitude,
+          })
+
+          // สร้าง MapView
+          const mapView = new MapView({
+            container: 'mapViewDisplay', // div ที่จะแสดงแผนที่
+            map: map,
+            center: {
+              latitude: latitude,
+              longitude: longitude,
+            }, // Set the initial map center current position
+            zoom: zoomMap.value, // ระดับการซูม
+
+            ui: {
+              components: [], // Empty array to remove all default UI components
+            },
+          })
+
+          // สร้างสัญลักษณ์ของหมุด
+          const markerSymbol = new PictureMarkerSymbol({
+            url: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png', // รูปหมุด
+            width: '32px',
+            height: '32px',
+          })
+
+          // สร้าง Search widget เพื่อค้นหาสถานที่
+          const search = new Search({
+            view: mapView,
+            popupEnabled: false,
+          })
+
+          // เพิ่ม Search widget ไปยังแผนที่
+          mapView.ui.add(search, {
+            position: 'top-right', // ตำแหน่งของ Search widget
+          })
+
+          await axios
+            .get(
+              'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
+              {
+                params: {
+                  f: 'json', // Format JSON response
+                  distance: 2000,
+                  category: 'POI',
+                  location: {
+                    spatialReference: { wkid: 4326 },
+                    x: longitude,
+                    y: latitude,
+                  },
+                  token: apiKey.value,
+                },
+              }
+            )
+            .then((response) => {
+              console.log('poi', response.data.location)
+              poiPlaceName.value = response.data.address
+                ? response.data.address.PlaceName === ''
+                  ? response.data.address.ShortLabel
+                  : response.data.address.PlaceName
+                : 'ไม่พบข้อมูล'
+              const poiPoint = new Point({
+                longitude: response.data.location.x,
+                latitude: response.data.location.y,
+              })
+
+              updateLocation(latitude, longitude, poiPlaceName.value)
+            })
+            .catch(async () => {
+              await axios
+                .get(
+                  'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
+                  {
+                    params: {
+                      f: 'json', // Format JSON response
+                      distance: 2000,
+                      category: 'POI',
+                      location: {
+                        spatialReference: { wkid: 4326 },
+                        x: longitude,
+                        y: latitude,
+                      },
+                    },
+                  }
+                )
+                .then((response) => {
+                  // console.log('poi', response.data.location)
+                  poiPlaceName.value = response.data.address
+                    ? response.data.address.PlaceName === ''
+                      ? response.data.address.ShortLabel
+                      : response.data.address.PlaceName
+                    : 'ไม่พบข้อมูล'
+
+                  updateLocation(longitude, latitude, poiPlaceName.value)
+                })
+            })
+
+          let searchMarker: any = null
+
+          searchMarker = new Graphic({
+            geometry: pointDefult,
+            symbol: markerSymbol,
+          })
+          mapView.graphics.add(searchMarker)
+
+          // ฟังก์ชันจับการคลิกบนแผนที่
+          search.on('select-result', async function (event: any) {
+            const { latitude, longitude } = event.result.extent.center
+
+            const point = new Point({
+              latitude,
+              longitude,
+            })
+
+            // ลบหมุดเก่า (ถ้ามี)
+            if (searchMarker) {
+              mapView.graphics.remove(searchMarker)
+            }
+
+            // สร้างและเพิ่มหมุดใหม่
+            searchMarker = new Graphic({
+              geometry: point,
+              symbol: markerSymbol,
+            })
+            if (searchMarker) {
+              await axios
+                .get(
+                  'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
+                  {
+                    params: {
+                      f: 'json', // Format JSON response
+                      distance: 2000,
+                      category: 'POI',
+                      location: {
+                        spatialReference: { wkid: 4326 },
+                        x: longitude,
+                        y: latitude,
+                      },
+                      token: apiKey.value,
+                    },
+                  }
+                )
+                .then((response) => {
+                  console.log('poi', response.data.location)
+                  poiPlaceName.value = response.data.address
+                    ? response.data.address.PlaceName === ''
+                      ? response.data.address.ShortLabel
+                      : response.data.address.PlaceName
+                    : 'ไม่พบข้อมูล'
+                  const poiPoint = new Point({
+                    longitude: response.data.location.x,
+                    latitude: response.data.location.y,
+                  })
+
+                  updateLocation(latitude, longitude, poiPlaceName.value)
+                })
+                .catch(async () => {
+                  await axios
+                    .get(
+                      'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
+                      {
+                        params: {
+                          f: 'json', // Format JSON response
+                          distance: 2000,
+                          category: 'POI',
+                          location: {
+                            spatialReference: { wkid: 4326 },
+                            x: longitude,
+                            y: latitude,
+                          },
+                        },
+                      }
+                    )
+                    .then((response) => {
+                      // console.log('poi', response.data.location)
+                      poiPlaceName.value = response.data.address
+                        ? response.data.address.PlaceName === ''
+                          ? response.data.address.ShortLabel
+                          : response.data.address.PlaceName
+                        : 'ไม่พบข้อมูล'
+
+                      updateLocation(longitude, latitude, poiPlaceName.value)
+                    })
+                })
+            }
+
+            mapView.graphics.add(searchMarker)
+
+            // เคลื่อนไปยังตำแหน่งที่เลือก
+            mapView.goTo({
+              target: point,
+              zoom: zoomMap.value,
+            })
+          })
+
+          mapView.on('click', async function (event: any) {
+            const lat = event.mapPoint.latitude
+            const lon = event.mapPoint.longitude
+
+            const point = new Point({
+              longitude: lon,
+              latitude: lat,
+            })
+
+            if (!searchMarker) {
+              searchMarker = new Graphic({
+                geometry: point,
+                symbol: markerSymbol,
+              })
+
+              mapView.graphics.add(searchMarker)
+            } else {
+              searchMarker.geometry = point // ย้ายหมุดไปยังตำแหน่งใหม่
+              if (searchMarker) {
+                await axios
+                  .get(
+                    'https://bmagis.bangkok.go.th/portal/sharing/servers/e4732c3a9fe549ab8bc697573b468f68/rest/services/World/GeocodeServer/reverseGeocode/',
+                    {
+                      params: {
+                        f: 'json', // Format JSON response
+                        distance: 2000,
+                        category: 'POI',
+                        location: {
+                          spatialReference: { wkid: 4326 },
+                          x: lon,
+                          y: lat,
+                        },
+                        token: apiKey.value,
+                      },
+                    }
+                  )
+                  .then((response) => {
+                    console.log('poi', response.data.location)
+                    poiPlaceName.value = response.data.address
+                      ? response.data.address.PlaceName === ''
+                        ? response.data.address.ShortLabel
+                        : response.data.address.PlaceName
+                      : 'ไม่พบข้อมูล'
+                    const poiPoint = new Point({
+                      longitude: response.data.location.x,
+                      latitude: response.data.location.y,
+                    })
+
+                    updateLocation(latitude, longitude, poiPlaceName.value)
+                  })
+                  .catch(async () => {
+                    await axios
+                      .get(
+                        'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/',
+                        {
+                          params: {
+                            f: 'json', // Format JSON response
+                            distance: 2000,
+                            category: 'POI',
+                            location: {
+                              spatialReference: { wkid: 4326 },
+                              x: lon,
+                              y: lat,
+                            },
+                          },
+                        }
+                      )
+                      .then((response) => {
+                        // console.log('poi', response.data.location)
+                        poiPlaceName.value = response.data.address
+                          ? response.data.address.PlaceName === ''
+                            ? response.data.address.ShortLabel
+                            : response.data.address.PlaceName
+                          : 'ไม่พบข้อมูล'
+
+                        updateLocation(lat, lon, poiPlaceName.value)
+                      })
+                  })
+              }
+            }
+
+            mapView.goTo({
+              target: point,
+              zoom: zoomMap.value,
+            })
+          })
+        })
+      }
+    )
+  } catch (error) {
+    console.error('Error loading the map', error)
+  }
+}
+
+onMounted(async () => {
+  await initializeMap()
+})
+</script>
+
+<template>
+  <q-card
+    bordered
+    flat
+    class="col-12 bg-grey-2 shadow-0"
+    :style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
+  >
+    <div id="mapViewDisplay" style="height: 35vh"></div>
+
+    <div
+      :class="
+        $q.screen.gt.xs
+          ? 'q-pa-xs text-weight-medium text-grey-8'
+          : 'q-pa-xs text-weight-medium text-grey-8'
+      "
+    >
+      พื้นที่ใกล้เคียง
+      <span class="q-px-sm">:</span>
+      {{ poiPlaceName }}
+    </div>
+  </q-card>
+</template>
+
+<style></style>
diff --git a/src/components/FormTime.vue b/src/components/FormTime.vue
index 3ff6fd8..cf9a71f 100644
--- a/src/components/FormTime.vue
+++ b/src/components/FormTime.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, reactive } from 'vue'
 import { PropType } from 'vue'
 import { useQuasar } from 'quasar'
 import moment from 'moment'
@@ -11,6 +11,8 @@ import { useCounterMixin } from '@/stores/mixin'
 import type { FormRef, DataCheckIn } from '@/interface/index/Main'
 import type { FormTimeStemp } from '@/interface/response/checkin'
 
+import MapCheck from '@/components/AscGISMapTime.vue'
+
 const $q = useQuasar()
 const {
   date2Thai,
@@ -62,6 +64,11 @@ const objectRef: FormRef = {
   reason: reasonRef,
 }
 const checkstatusBox = ref<boolean>(false) //สถานะการเลือกเวลาเข้า,ออก
+const formLocation = reactive({
+  lat: 0, //พิกัดละติจูด
+  lng: 0, //พิกัดลองจิจูด
+  POI: '', //ชื่อสถานที่
+})
 
 /**
  * ฟังก์ชันอัปเดตเวลา
@@ -108,6 +115,9 @@ function onCkickSave() {
         checkInEdit: checkboxIn.value,
         checkOutEdit: checkboxOut.value,
         description: reason.value,
+        latitude: formLocation.lat.toString(),
+        longitude: formLocation.lng.toString(),
+        POI: formLocation.POI,
       }
 
       createListTime(data)
@@ -137,6 +147,21 @@ async function createListTime(data: FormTimeStemp) {
     })
 }
 
+/**
+ *  funciton เรียกพิกัดละติจูด พิกัดลองติจูด
+ * @param location  พิกัดละติจูด พิกัดลองติจูด
+ * @param namePOI ชื่อสถานที่ ได้มาจากระบบ ArcGis ของกองสารสนเทศภูมิศาสตร์
+ */
+async function updateLocation(
+  latitude: number,
+  longitude: number,
+  namePOI: string
+) {
+  formLocation.lat = latitude
+  formLocation.lng = longitude
+  formLocation.POI = namePOI
+}
+
 /**
  *  watch การเปลี่ยนแปลงของ checkboxIn และ checkboxOut
  */
@@ -167,134 +192,147 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="col-12 row">
-    <div class="row q-col-q-gutter-sm q-pa-md">
-      <q-card
-        flat
-        bordered
-        :class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
-      >
-        <q-card-section class="bg-primary text-white q-pa-sm">
-          <div class="text-center text-bold">เวลาปัจจุบัน</div>
-        </q-card-section>
-
-        <q-card-section class="text-center q-pa-sm">
-          <div class="row q-gutter-md">
-            <div class="col">{{ date2Thai(dateNow) }}</div>
-            <div class="col">{{ timeNoew }}</div>
-          </div>
-        </q-card-section>
-      </q-card>
-
-      <q-card flat bordered class="col-12 q-mt-sm">
-        <div class="q-pa-sm">
-          <datepicker
-            :readonly="!statusAction"
-            v-model="date"
-            :locale="'th'"
-            :enableTimePicker="false"
-            week-start="0"
-            autoApply
-            outlined
-            lazy-rules
-            :max-date="dateNow"
+  <q-card-section :horizontal="$q.screen.gt.md" style="padding: 0px">
+    <div class="col-12">
+      <div class="row q-col-q-gutter-sm">
+        <div class="q-pa-md col-md-5 col-xs-12">
+          <q-card
+            flat
+            bordered
+            :class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
           >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
+            <q-card-section class="bg-primary text-white q-pa-sm">
+              <div class="text-center text-bold">เวลาปัจจุบัน</div>
+            </q-card-section>
+
+            <q-card-section class="text-center q-pa-sm">
+              <div class="row q-gutter-md">
+                <div class="col">{{ date2Thai(dateNow) }}</div>
+                <div class="col">{{ timeNoew }}</div>
+              </div>
+            </q-card-section>
+          </q-card>
+
+          <q-card flat bordered class="col-12 q-mt-sm">
+            <div class="q-pa-sm">
+              <datepicker
                 :readonly="!statusAction"
-                ref="dateRef"
+                v-model="date"
+                :locale="'th'"
+                :enableTimePicker="false"
+                week-start="0"
+                autoApply
                 outlined
-                dense
-                :model-value="date !== null ? date2Thai(new Date(date)) : null"
-                :label="`${
-                  action === 'edit'
-                    ? 'วันที่ขอแก้ไข'
-                    : 'วันที่ขอลงเวลากรณีพิเศษ'
-                }`"
-                format-header="YYYY-MM-DD"
                 lazy-rules
-                :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
-                hide-bottom-space
+                :max-date="dateNow"
               >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
+                <template #year="{ year }">
+                  {{ year + 543 }}
                 </template>
-              </q-input> </template
-          ></datepicker>
-        </div>
-      </q-card>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :readonly="!statusAction"
+                    ref="dateRef"
+                    outlined
+                    dense
+                    :model-value="
+                      date !== null ? date2Thai(new Date(date)) : null
+                    "
+                    :label="`${
+                      action === 'edit'
+                        ? 'วันที่ขอแก้ไข'
+                        : 'วันที่ขอลงเวลากรณีพิเศษ'
+                    }`"
+                    format-header="YYYY-MM-DD"
+                    lazy-rules
+                    :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
+                    hide-bottom-space
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input> </template
+              ></datepicker>
+            </div>
+          </q-card>
 
-      <q-card
-        v-if="action === 'edit'"
-        flat
-        bordered
-        class="q-pa-sm col-12 q-mt-sm"
-        :style="{
-          borderColor: checkstatusBox ? '#B22222' : '',
-          borderWidth: checkstatusBox ? '2px' : '',
-        }"
-      >
-        <div class="row q-gutter-xs">
-          <div class="col-12">
-            <q-checkbox
-              keep-color
-              color="primary"
-              v-model="checkboxIn"
-              label="ขอแก้ไขเวลาเข้างาน"
-            />
+          <q-card
+            v-if="action === 'edit'"
+            flat
+            bordered
+            class="q-pa-sm col-12 q-mt-sm"
+            :style="{
+              borderColor: checkstatusBox ? '#B22222' : '',
+              borderWidth: checkstatusBox ? '2px' : '',
+            }"
+          >
+            <div class="row q-gutter-xs">
+              <div class="col-12">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  v-model="checkboxIn"
+                  label="ขอแก้ไขเวลาเข้างาน"
+                />
+              </div>
+              <div class="col-12">
+                <q-checkbox
+                  keep-color
+                  v-model="checkboxOut"
+                  color="primary"
+                  label="ขอแก้ไขเวลาออกงาน"
+                />
+              </div>
+            </div>
+          </q-card>
+
+          <div
+            v-if="checkstatusBox"
+            class="text-red-9 q-pa-sm"
+            style="font-size: 10px"
+          >
+            กรุณาเลือก
           </div>
-          <div class="col-12">
-            <q-checkbox
-              keep-color
-              v-model="checkboxOut"
-              color="primary"
-              label="ขอแก้ไขเวลาออกงาน"
+          <!-- :style="action == 'special' ? 'margin-bottom: 150px' : ''" -->
+          <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
+            <q-input
+              ref="reasonRef"
+              dense
+              outlined
+              v-model="reason"
+              label="เหตุผล"
+              type="textarea"
+              :rows="4"
+              label-color="grey-5"
+              :rules="[(val:string) => !!val || 'กรุณากรอกเหตุผล']"
+              lazy-rules
+              hide-bottom-space
+              class="custom-aqua-border"
             />
+          </q-card>
+        </div>
+        <q-separator vertical />
+        <div class="q-pa-md col">
+          <div class="row q-col-gutter-sm">
+            <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
+              <MapCheck @update:location="updateLocation" />
+            </q-card>
           </div>
         </div>
-      </q-card>
 
-      <div
-        v-if="checkstatusBox"
-        class="text-red-9 q-pa-sm"
-        style="font-size: 10px"
-      >
-        กรุณาเลือก
+        <!-- :style="action == 'special' ? 'margin-bottom: 120px' : ''" -->
       </div>
-
-      <q-card
-        flat
-        bordered
-        class="q-pa-sm col-12 q-mt-sm"
-        :style="action == 'special' ? 'margin-bottom: 150px' : ''"
-      >
-        <q-input
-          ref="reasonRef"
-          dense
-          outlined
-          v-model="reason"
-          label="เหตุผล"
-          type="textarea"
-          :rows="4"
-          label-color="grey-5"
-          :rules="[(val:string) => !!val || 'กรุณากรอกเหตุผล']"
-          lazy-rules
-          hide-bottom-space
-          class="custom-aqua-border"
-        />
-      </q-card>
     </div>
+  </q-card-section>
+  <div class="col-12">
     <div class="col-12"><q-separator /></div>
     <div class="row col-12 q-pa-sm">
       <q-space />
diff --git a/src/components/PopUp.vue b/src/components/PopUp.vue
index 107a8f9..98c5850 100644
--- a/src/components/PopUp.vue
+++ b/src/components/PopUp.vue
@@ -61,7 +61,7 @@ watch(
 </script>
 <template>
   <q-dialog v-model="props.modal" persistent m>
-    <q-card :style="$q.screen.lt.sm ? 'width: 100%;' : 'width: 320px;'">
+    <q-card :style="$q.screen.lt.sm ? 'width: 100%;' : 'min-width: 80vh;'">
       <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
 
       <FormTime
diff --git a/src/interface/response/checkin.ts b/src/interface/response/checkin.ts
index 8ced7f0..6db7da2 100644
--- a/src/interface/response/checkin.ts
+++ b/src/interface/response/checkin.ts
@@ -39,5 +39,8 @@ interface FormTimeStemp {
   checkInEdit: boolean
   checkOutEdit: boolean
   description: string
+  latitude: string
+  longitude: string
+  POI: string
 }
 export type { FormRef, FormData, Datalist, FormTimeStemp }
