Sync zoom changes from map with store

frontend/src/components/SearchControls.vue

@@ -32,8 +32,8 @@
       <v-card style="width: 100%">
         <v-card-title>Search area</v-card-title>
         <l-map
-          :zoom="zoom"
-          :center="center"
+          :zoom.sync="zoom"
+          :center.sync="center"
           style="width: 100%; height: 600px"
           ref="map"
           :noBlockingAnimations="true"
@@ -135,11 +135,17 @@ export default {
       get() {
         return this.$store.state.mapCenter;
       },
+      set(val) {
+        this.$store.commit("setCenter", val);
+      },
     },
     zoom: {
       get() {
         return this.$store.state.mapZoom;
       },
+      set(val) {
+        this.$store.commit("setZoom", val);
+      },
     },
     url() {
       if (this.$store.state.mode == "google") {

frontend/src/store/index.js

@@ -87,6 +87,12 @@ export default new Vuex.Store({
       state.mapCenter = center;
       state.mapZoom = zoom;
     },
+    setZoom(state, zoom) {
+      state.mapZoom = zoom;
+    },
+    setCenter(state, center) {
+      state.mapCenter = center;
+    },
     setResponseTime(state, t) {
       state.responseTime = t;
     },