diff --git a/pages/venue/venueMap.vue b/components/venue/VenueMap.vue
similarity index 63%
rename from pages/venue/venueMap.vue
rename to components/venue/VenueMap.vue
index de42f3165a..21ae11623c 100644
--- a/pages/venue/venueMap.vue
+++ b/components/venue/VenueMap.vue
@@ -1,48 +1,48 @@
 <template>
-        <l-map
-            ref="leafletMap"
-            style="height: 500px"
-            :zoom="zoom"
-            :center="center"
-            :options="options"
+    <l-map
+        ref="leafletMap"
+        style="height: 500px"
+        :zoom="zoom"
+        :center="center"
+        :options="options"
+    >
+        <l-tile-layer
+            v-for="tileProvider in tileProviders"
+            :key="tileProvider.name"
+            :name="tileProvider.name"
+            :visible="tileProvider.visible"
+            :url="tileProvider.url"
+            :attribution="tileProvider.attribution"
+            layer-type="base"
+        />
+
+        <l-control-layers position="bottomright"></l-control-layers>
+        <l-control-zoom position="topright"></l-control-zoom>
+        <l-control
+            position="topright"
+            class="leaflet-bar custom-control rounded-sm"
         >
-            <l-tile-layer
-                v-for="tileProvider in tileProviders"
-                :key="tileProvider.name"
-                :name="tileProvider.name"
-                :visible="tileProvider.visible"
-                :url="tileProvider.url"
-                :attribution="tileProvider.attribution"
-                layer-type="base"
-            />
-    
-            <l-control-layers position="bottomright"></l-control-layers>
-            <l-control-zoom position="topright"></l-control-zoom>
-            <l-control
-                position="topright"
-                class="leaflet-bar custom-control rounded-sm"
-            >
-                <button
-                    class="h-[30px] w-[30px] bg-white leading-[30px]"
-                    @click="centerMap"
-                >
-                    <img
-                        class="m-auto"
-                        :src="venueButtonUrl"
-                        alt="venue-center-btn"
-                    />
-                </button>
-            </l-control>
-            <l-marker :lat-lng="markerLatLng" :icon="icon">
-                <l-tooltip
-                    :options="{
-                        offset: [-4, 20],
-                        direction: 'bottom',
-                    }"
-                    >中央研究院 人文社會科學館</l-tooltip
-                ></l-marker
+            <button
+                class="h-[30px] w-[30px] bg-white leading-[30px]"
+                @click="centerMap"
             >
-        </l-map>
+                <img
+                    class="m-auto"
+                    :src="venueButtonUrl"
+                    alt="venue-center-btn"
+                />
+            </button>
+        </l-control>
+        <l-marker :lat-lng="markerLatLng" :icon="icon">
+            <l-tooltip
+                :options="{
+                    offset: [-4, 20],
+                    direction: 'bottom',
+                }"
+                >中央研究院 人文社會科學館</l-tooltip
+            ></l-marker
+        >
+    </l-map>
 </template>
 
 <script>
diff --git a/pages/venue/index.vue b/pages/venue/index.vue
index 2142b64df1..40c2d22ff2 100644
--- a/pages/venue/index.vue
+++ b/pages/venue/index.vue
@@ -51,6 +51,7 @@ import VenueTab from '@/components/venue/VenueTab.vue'
 import VenuePublicTransporterTab from '@/components/venue/VenuePublicTransporterTab.vue'
 import VenueDriveTab from '@/components/venue/VenueDriveTab.vue'
 import VenueShuttleServiceTab from '@/components/venue/VenueShuttleServiceTab.vue'
+import VenueMap from '@/components/venue/VenueMap.vue'
 export default {
     i18n,
     name: 'PageVenue',
@@ -62,7 +63,7 @@ export default {
         VenuePublicTransporterTab,
         VenueDriveTab,
         VenueShuttleServiceTab,
-        VenueMap: () => import('./venueMap.vue'),
+        VenueMap,
     },
     data() {
         return {