diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue
index 812dd24..c0c721e 100644
--- a/src/components/AscGISMap.vue
+++ b/src/components/AscGISMap.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  computed,
   ref,
   shallowRef,
   onBeforeUnmount,
@@ -51,6 +52,9 @@ const poiPlaceName = ref<string>(props.initialPOI || '') // ชื่อพื
 const mapView = shallowRef<any>(null) // Store mapView reference for cleanup (use shallowRef to avoid reactivity issues)
 const desktopMapContainerRef = ref<HTMLElement | null>(null)
 const mobileMapContainerRef = ref<HTMLElement | null>(null)
+const isMapVisible = computed(
+  () => !!mapView.value && !mapView.value.destroyed && isMapInitialized.value
+)
 
 // Unique container ID for each component instance to avoid conflicts
 const mapContainerId = `mapViewDisplay_${Math.random()
@@ -596,8 +600,8 @@ defineExpose({
 </script>
 
 <template>
-  <!-- Loading skeleton - show while map is initializing -->
-  <div v-if="isInitializing && !isMapInitialized" class="col-12">
+  <!-- Loading skeleton - show until map is visible -->
+  <div v-if="!isMapVisible" class="col-12">
     <q-skeleton
       :height="$q.screen.gt.xs ? '35vh' : '45px'"
       width="100%"
@@ -610,6 +614,7 @@ defineExpose({
     bordered
     flat
     class="col-12 bg-grey-2 shadow-0"
+    :class="{ 'map-hidden': !isMapVisible }"
     :style="$q.screen.gt.xs ? ';' : 'border-radius: 20px'"
   >
     <div v-if="$q.screen.gt.xs">
@@ -679,4 +684,8 @@ defineExpose({
 .expanAS.q-item__section--avatar {
   min-width: 40px !important;
 }
+
+.map-hidden {
+  visibility: hidden;
+}
 </style>