Fixed custom markers appearing on other maps

src/components/maps/overlay/MarkerCreator.vue

@@ -1,12 +1,18 @@
 <script lang="ts" setup>
 import type { MapMarker } from '@/types/Leaflet';
 import { onClickOutside, useCssVar, useLocalStorage, useMouse } from '@vueuse/core'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch, defineProps } from 'vue'
 
 const markerMenu = ref<HTMLMenuElement>()
 
 type MenuMode = "editing-marker" | "default"
 
+const props = defineProps<{
+    mapKey?: string
+}>()
+
+const customMarkersKey = props.mapKey ? `custom-markers-${props.mapKey}` : 'custom-markers'
+
 /**
  * Appearing behaviour
  */
@@ -91,14 +97,14 @@ const markerTitleInput = ref<HTMLInputElement>()
 const markerTitleInputError = ref<Error | null>()
 
 // Data from localStorage
-const customMarkersData = useLocalStorage('custom-markers', [])
+const customMarkersData = useLocalStorage(customMarkersKey, [])
 
 // Refresh from localStorage
 onMounted(() => {
-    customMarkersData.value = useLocalStorage('custom-markers', []).value
+    customMarkersData.value = useLocalStorage(customMarkersKey, []).value
 
     document.addEventListener('refresh-custom-markers', () => {
-        customMarkersData.value = useLocalStorage('custom-markers', []).value
+        customMarkersData.value = useLocalStorage(customMarkersKey, []).value
     })
 })