diff --git a/webclient/src/components/DetailsFeedbackButton.vue b/webclient/src/components/DetailsFeedbackButton.vue
index efbd54435..085d2812d 100644
--- a/webclient/src/components/DetailsFeedbackButton.vue
+++ b/webclient/src/components/DetailsFeedbackButton.vue
@@ -4,13 +4,16 @@ import { useDetailsStore } from "@/stores/details";
 import { useGlobalStore } from "@/stores/global";
 import { TokenRequest } from "@/codegen";
 import FeedbackCategory = TokenRequest.CategoryEnum;
+import { defineExpose } from "vue";
 
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 const state = useDetailsStore();
 function _getFeedbackSubject(currentEdits) {
   if (Object.keys(currentEdits).length > 1) {
     return (
       `[${state.data.id} et.al.]: ` +
-      $t("feedback.coordinatepicker.edit_coordinates_subject")
+      t("feedback.coordinatepicker.edit_coordinates_subject")
     );
   }
 
@@ -18,7 +21,7 @@ function _getFeedbackSubject(currentEdits) {
   const subjectMsg =
     Object.keys(currentEdits).length === 0
       ? ""
-      : $t("feedback.coordinatepicker.edit_coordinate_subject");
+      : t("feedback.coordinatepicker.edit_coordinate_subject");
 
   // The subject backup is only loaded (and supported) when a single
   // entry is being edited
@@ -59,14 +62,14 @@ function _getFeedbackBody(currentEdits) {
 
   const defaultActionMsg =
     state.data.coords.accuracy === "building"
-      ? $t("feedback.coordinatepicker.add_coordinate")
-      : $t("feedback.coordinatepicker.correct_coordinate");
+      ? t("feedback.coordinatepicker.add_coordinate")
+      : t("feedback.coordinatepicker.correct_coordinate");
   actionMsg = actionMsg || defaultActionMsg;
 
   if (Object.keys(currentEdits).length > 1) {
     // The body backup is discarded if more than a single entry
     // is being edited (because then it is not supported).
-    actionMsg = $t("feedback.coordinatepicker.edit_multiple_coordinates");
+    actionMsg = t("feedback.coordinatepicker.edit_multiple_coordinates");
   }
 
   let editStr = "";
@@ -76,7 +79,11 @@ function _getFeedbackBody(currentEdits) {
 
   return `${actionMsg}\n\`\`\`\n${editStr}\`\`\``;
 }
-function openFeedbackForm() {
+
+defineExpose({
+  openFeedbackForm: openFeedbackForm,
+});
+function openFeedbackForm(addLocationPicker) {
   // The feedback form is opened. This may be prefilled with previously corrected coordinates.
   // Maybe get the old coordinates from localstorage
   const currentEdits = getLocalStorageWithExpiry("feedback-coords", {});
diff --git a/webclient/src/components/DetailsInteractiveMap.vue b/webclient/src/components/DetailsInteractiveMap.vue
index 51a1ee885..5951b285c 100644
--- a/webclient/src/components/DetailsInteractiveMap.vue
+++ b/webclient/src/components/DetailsInteractiveMap.vue
@@ -35,9 +35,13 @@ type Coord = {
     lon: number | undefined;
   };
 };
+const emit = defineEmits(["openFeedbackForm"]);
 function confirmLocationPicker() {
   // add the current edits to the feedback
-  const currentEdits = getLocalStorageWithExpiry<{[index: string]: Coord}>("feedback-coords", {});
+  const currentEdits = getLocalStorageWithExpiry<{ [index: string]: Coord }>(
+    "feedback-coords",
+    {}
+  );
   const location = marker2.value?.getLngLat();
   currentEdits[state.data!.id] = {
     coords: { lat: location?.lat, lon: location?.lng },
@@ -57,7 +61,7 @@ function confirmLocationPicker() {
     state.coord_picker.force_reopen
   ) {
     state.coord_picker.force_reopen = false;
-    openFeedbackForm();
+    emit("openFeedbackForm", () => addLocationPicker());
   }
 
   // The helptext (which says thet you can edit multiple coordinates in bulk)
@@ -74,22 +78,20 @@ function cancelLocationPicker() {
 
   if (state.coord_picker.force_reopen) {
     state.coord_picker.force_reopen = false;
-    openFeedbackForm();
+    emit("openFeedbackForm", () => addLocationPicker());
   }
 }
-// TODO: make this interactive from other components
+defineExpose({
+  addLocationPicker: addLocationPicker,
+});
 function addLocationPicker() {
   // If this is called from the feedback form using the edit coordinate
   // button, we temporarily save the current subject and body, so it is
   // not lost when being reopened
   if (global.feedback.open) {
     coord_picker.value.backup_id = state.data!.id;
-    coord_picker.value.subject_backup = (
-      document.getElementById("feedback-subject") as HTMLInputElement
-    ).value;
-    coord_picker.value.body_backup = (
-      document.getElementById("feedback-body") as HTMLTextAreaElement
-    ).value;
+    coord_picker.value.subject_backup = global.feedback.subject;
+    coord_picker.value.body_backup = global.feedback.body;
     coord_picker.value.force_reopen = true; // reopen after confirm
 
     global.temprarilyCloseFeedback();
diff --git a/webclient/src/views/DetailsView.vue b/webclient/src/views/DetailsView.vue
index 0a192c37c..927f5a306 100644
--- a/webclient/src/views/DetailsView.vue
+++ b/webclient/src/views/DetailsView.vue
@@ -280,7 +280,7 @@ onMounted(() => {
             v-if="state.data.coords.accuracy === 'building'"
           >
             {{ $t("view_view.msg.inaccurate_only_building.msg") }}
-            <button class="btn btn-sm" @click="addLocationPicker">
+            <button class="btn btn-sm" @click="$refs.interactiveMap.addLocationPicker()">
               {{ $t("view_view.msg.inaccurate_only_building.btn") }}
             </button>
           </div>
@@ -298,7 +298,7 @@ onMounted(() => {
           </div>
         </div>
 
-        <DetailsInteractiveMap ref="interactiveMap" />
+        <DetailsInteractiveMap ref="interactiveMap" @open-feedback-form="$refs.feedbackButton.openFeedbackForm" />
         <DetailsRoomfinderMap ref="roomfinderMap" />
         <div class="btn-group btn-group-block">
           <button