Fix map

src/components/flightPlans/FlightPlanPlaceInput.vue

@@ -29,13 +29,18 @@ const placesFilter = (val, update, abort) => {
         searchGeocode(val).then(results => {
           if (!results) return;
 
-          placesOptions.value = results.map(result => ({
-            name: result.formatted_address,
-            type: "geocode",
-            id: null,
-            gpsLatitude: result.geometry.location.lat,
-            gpsLongitude: result.geometry.location.lng,
-          }))
+          console.log(results)
+
+          placesOptions.value = results.map(result => {
+            console.log(result, result.geometry.location)
+            return {
+              name: result.formatted_address,
+              type: "geocode",
+              id: null,
+              gpsLatitude: result.geometry.location.lat(),
+              gpsLongitude: result.geometry.location.lng(),
+            }
+          })
         });
       }
     } else {

src/components/flightPlans/FlightPlanRoute.vue

@@ -31,6 +31,9 @@ const swapMarkers = (idx1, idx2) => {
 };
 const handlePlaceSelect = (modelVal) => {
   model.value.push(modelVal);
+
+  // TODO: upravit bounds u mapy
+
 }
 
 watch(() => model.value, () => {

src/components/inputs/MapGPSInput.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {Marker} from "vue3-google-map";
-import {onMounted, ref} from "vue";
+import {onMounted, ref, watch} from "vue";
 import MapWrapper from "components/map/MapWrapper.vue";
 import {useGeocode} from "src/composables/geocoding";
 import axios from "axios";
@@ -32,22 +32,34 @@ const markerDropped = (position) => {
 }
 
 const zoom = ref(8);
-onMounted(() => {
-  if (props.gpsLatitude && props.gpsLongitude) {
-    center.value.lng = props.gpsLongitude;
-    center.value.lat = props.gpsLatitude
-  } else if (props.label) {
-    searchGeocode(props.label).then(results => {
+
+
+watch(() => [props.label, props.gpsLongitude, props.gpsLatitude], (val, oldValue) => {
+  const [newAddress, newLon, newLat] = val
+  const [previousAddress, oldLon, oldLat] = oldValue
+  if (newAddress) {
+    if (newAddress === previousAddress) return
+
+    searchGeocode(newAddress).then(results => {
       if (!results) return;
-      center.value = results[0].geometry.location;
+
+      const lat = results[0].geometry.location.lat()
+      const lng = results[0].geometry.location.lng()
+
+      center.value = {lng, lat}
       emitModels(center.value.lat, center.value.lng);
       zoom.value = 13;
     });
+  } else if (newLat && newLon && (props.gpsLatitude !== newLat || props.gpsLongitude !== newLon)) {
+    center.value.lng = newLon;
+    center.value.lat = newLat
   } else {
+    console.log(newAddress, newLon, newLat, props.label, props.gpsLongitude, props.gpsLatitude)
     console.error("Set either label or gps coordinates.");
   }
-})
-
+},
+  // {immediate: true}
+)
 </script>
 
 <template>

src/components/map/MapWrapper.vue

@@ -241,6 +241,11 @@ const isControlsOpened = ref(false);
 </script>
 
 <template>
+
+<!--  <q-banner>-->
+<!--    https://dev.to/quasar/how-to-use-google-maps-in-a-quasar-project-1c13-->
+<!--  </q-banner>-->
+
   <GoogleMap
     :api-key="key"
     v-bind="$attrs"

src/components/poi/POIForm.vue

@@ -74,9 +74,18 @@ const handlePositionNotFound = () => {
       <template #append v-if="showResetMapButton">
         <q-btn @click="resetMap" icon="gps_fixed" round flat text-color="green" title="Nastav pozici na mapě"/>
       </template>
+      <template #after>
+        <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
+      </template>
     </q-input>
-    <ComboboxInput v-model="formData.type" :options="types" label="Kategorie" v-bind="commonProps"/>
 
+    <MapGPSInput
+      :label="poiNameForMap"
+      :zoom="zoom"
+      v-model:gpsLatitude="formData.gpsLatitude"
+      v-model:gpsLongitude="formData.gpsLongitude"
+      @not-found="handlePositionNotFound"
+    />
     <SlugInput
       v-if="formData.isPublic"
       v-bind="commonProps"
@@ -86,17 +95,9 @@ const handlePositionNotFound = () => {
       :slug-source="formData.name"
       :rules="rules.urlSlug"
     />
-    <q-checkbox v-model="formData.isPublic" label="Veřejný?"/>
 
-    <MapGPSInput
-      v-if="poiNameForMap"
-      :key="poiNameForMap"
-      :label="poiNameForMap"
-      :zoom="zoom"
-      v-model:gpsLatitude="formData.gpsLatitude"
-      v-model:gpsLongitude="formData.gpsLongitude"
-      @not-found="handlePositionNotFound"
-    />
+    <ComboboxInput v-model="formData.type" :options="types" label="Kategorie" v-bind="commonProps"/>
+
 
     <q-input type="textarea" v-model="formData.description" v-bind="commonProps" label="Popis"/>