Prace s mapu, zobrazeni GPX, editace kopilota, skeletony

src/components/map/MapWrapper.vue

@@ -0,0 +1,36 @@
+<script setup>
+import {GoogleMap} from "vue3-google-map";
+import {ref, watch} from "vue";
+
+const props = defineProps({
+  bounds: {
+    type: Array,
+    required: false
+  }
+});
+
+const key = process.env.GOOGLE_MAPS_API_KEY;
+
+
+const mapRef = ref(null);
+watch(
+  () => mapRef.value?.ready,
+  (ready) => {
+    if (!props.bounds || !ready) return;
+    const map = mapRef.value.map;
+    const api = mapRef.value.api;
+
+    const bounds = new api.LatLngBounds();
+    for (let i = 0; i < props.bounds.length; i++) {
+      bounds.extend(props.bounds[i]);
+    }
+    map.fitBounds(bounds);
+  }
+);
+</script>
+
+<template>
+  <GoogleMap :api-key="key" v-bind="$attrs" :max-zoom="13" ref="mapRef">
+    <slot/>
+  </GoogleMap>
+</template>