создал компонент ymap.vue

client/src/components/ymap.vue

@@ -0,0 +1,62 @@
+<template>
+  <div ref="map" :style="{ width: mapWidth, height: mapHeight }"></div>
+</template>
+
+<script>
+export default {
+  name: 'YandexMap',
+  props: {
+    apiKey: {
+      type: String,
+      default: '',
+    },
+    mapWidth: {
+      type: String,
+      default: '100%',
+    },
+    mapHeight: {
+      type: String,
+      default: '100%',
+    },
+    center: {
+      type: Array,
+      default: () => [61.402554, 55.159902],
+    },
+    zoom: {
+      type: Number,
+      default: 10,
+    },
+  },
+  mounted() {
+    this.loadYandexMap();
+  },
+  methods: {
+    loadYandexMap() {
+      if (document.querySelector('script[src*="api-maps.yandex.ru"]')) {
+        this.initMap();
+      } else {
+        const script = document.createElement('script');
+        script.src = `https://api-maps.yandex.ru/v3/?apikey=${this.apiKey}&lang=ru_RU`;
+        script.onload = this.initMap;
+        document.head.appendChild(script);
+      }
+    },
+    async initMap() {
+      // eslint-disable-next-line no-undef
+      await ymaps3.ready;
+
+      // eslint-disable-next-line no-undef
+      const { YMap, YMapDefaultSchemeLayer, YMapDefaultMarker } = ymaps3;
+
+      const map = new YMap(this.$refs.map, {
+        location: {
+          center: this.center,
+          zoom: this.zoom,
+        },
+      });
+
+      map.addChild(new YMapDefaultSchemeLayer());
+    },
+  },
+};
+</script>

client/src/views/contacts.vue

@@ -29,8 +29,8 @@
           </div>
         </div>
       </div>
-      <!-- <div class="contacts__map">
-        <div
+      <div class="contacts__map">
+        <!-- <div
           class="contacts__map-frame"
           style="position: relative; overflow: hidden"
         >
@@ -38,10 +38,6 @@
             href="https://yandex.ru/maps/56/chelyabinsk/?utm_medium=mapframe&utm_source=maps"
             style="color: #eee; font-size: 12px; position: absolute; top: 0px"
             >Челябинск</a
-          ><a
-            href="https://yandex.ru/maps/geo/chelyabinsk/53159527/?ll=61.421984%2C55.159071&utm_medium=mapframe&utm_source=maps&z=14.04"
-            style="color: #eee; font-size: 12px; position: absolute; top: 14px"
-            >Челябинск — Яндекс Карты</a
           ><iframe
             src="https://yandex.ru/map-widget/v1/?ll=61.421984%2C55.159071&mode=poi&poi%5Bpoint%5D=61.399655%2C55.160475&poi%5Buri%5D=ymapsbm1%3A%2F%2Fgeo%3Fdata%3DCgg1MzE1OTUyNxIg0KDQvtGB0YHQuNGPLCDQp9C10LvRj9Cx0LjQvdGB0LoiCg04nHVCFb2jXEI%2C&z=14.04"
             width="100%"
@@ -50,8 +46,9 @@
             allowfullscreen="true"
             style="position: relative"
           ></iframe>
-        </div>
-      </div> -->
+        </div> -->
+        <YandexMap apiKey="e73ed16e-35ea-483b-afb4-9daac388591a" />
+      </div>
       <FormKit
         v-model="formData"
         type="form"
@@ -79,11 +76,12 @@
 <script>
 import AppBreadcrumbs from '@/components/app-breadcrumbs.vue';
 import SupportBlock from '@/components/support-block.vue';
+import YandexMap from '@/components/ymap.vue';
 import { app } from '@/services';
 
 export default {
   name: 'contacts',
-  components: { SupportBlock, AppBreadcrumbs },
+  components: { SupportBlock, AppBreadcrumbs, YandexMap },
   data() {
     return {
       formData: {},
@@ -162,7 +160,6 @@ export default {
     submitHandler() {},
     removeNullFields(obj) {
       const result = {};
-
       for (const key in obj) {
         if (obj[key] !== null) {
           if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
@@ -172,19 +169,15 @@ export default {
           }
         }
       }
-
       return result;
     },
-
     createArrayContacts(dictionary, fields) {
       const result = [];
-
       for (const key in fields) {
         if (dictionary[key]) {
           result.push({ title: dictionary[key], data: fields[key] });
         }
       }
-
       return result;
     },
     formatAddress(contacts) {