diff --git a/components/home/HomeMap.vue b/components/home/HomeMap.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f2aae2a92d117b189e7d334734dc3066840b526
--- /dev/null
+++ b/components/home/HomeMap.vue
@@ -0,0 +1,70 @@
+<template>
+  <section id="map">
+    <div class="container flex items-end mb-3">
+      <FaviconMap class="w-12 h-12 mr-3 fill-current dark:text-gray-100" />
+      <a
+        href="https://carte.monnaie-libre.fr"
+        target="_blank"
+        class="
+          group
+          bg-clip-text bg-gradient-to-r
+          font-extrabold
+          from-purple-800
+          hover:underline
+          text-4xl text-transparent
+          to-blue-600
+          uppercase
+        "
+        rel="noopener noreferrer"
+      >
+        Carte
+        <fa
+          icon="external-link-alt"
+          class="w-3 ml-1.5 text-gray-500 opacity-0 group-hover:opacity-75"
+        />
+      </a>
+    </div>
+
+    <iframe
+      :src="intersected ? 'https://carte.monnaie-libre.fr/?zoom=5' : null"
+      class="w-screen bg-gray-200"
+      style="height: 50vh; min-height: 600px"
+      title="Carte monnaie-libre"
+    />
+  </section>
+</template>
+
+<script>
+import FaviconMap from '~/static/img/favicon-map-g1.svg?inline'
+
+export default {
+  components: {
+    FaviconMap,
+  },
+  data() {
+    return {
+      observer: null,
+      intersected: false,
+    }
+  },
+  mounted() {
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        const item = entries[0]
+        if (item.isIntersecting) {
+          this.intersected = true
+          this.observer.disconnect()
+        }
+      },
+      {
+        rootMargin: '500px',
+      }
+    )
+
+    this.observer.observe(this.$el)
+  },
+  destroyed() {
+    this.observer.disconnect()
+  },
+}
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index e150b8d9f97a52db79c995868ed2cc86d70abd6c..4a4cdb14f63882e82288bb2f8c557b3e5139bc82 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -37,49 +37,13 @@
 
     <HomeNextEvents />
 
-    <section id="map">
-      <div class="container flex items-end mb-3">
-        <FaviconMap class="w-12 h-12 mr-3 fill-current dark:text-gray-100" />
-        <a
-          href="https://carte.monnaie-libre.fr"
-          target="_blank"
-          class="
-            group
-            bg-clip-text bg-gradient-to-r
-            font-extrabold
-            from-purple-800
-            hover:underline
-            text-4xl text-transparent
-            to-blue-600
-            uppercase
-          "
-          rel="noopener noreferrer"
-        >
-          Carte
-          <fa
-            icon="external-link-alt"
-            class="w-3 ml-1.5 text-gray-500 opacity-0 group-hover:opacity-75"
-          />
-        </a>
-      </div>
-      <iframe
-        src="https://carte.monnaie-libre.fr/?zoom=5"
-        class="w-screen"
-        style="height: 50vh; min-height: 600px"
-        title="Carte monnaie-libre"
-      />
-    </section>
+    <HomeMap />
   </div>
 </template>
 
 <script>
-import FaviconMap from '~/static/img/favicon-map-g1.svg?inline'
-
 export default {
   name: 'HomePage',
-  components: {
-    FaviconMap,
-  },
   async asyncData({ $content }) {
     const hero = await $content('ui/home-hero').fetch()
     const intro = await $content('ui/home-intro').fetch()