Почему не отображается Яндекс.Карта в vue-yandex-map?

Карта отлично показывается во всех браузерах, кроме Google Chrome, при чём вне зависимости от того подключаю я локально или глобально, и использую я метки или нет.


Вот так подключаю карту в app.js:

import VueRouter from 'vue-router'
import router from './router'
import YmapPlugin from 'vue-yandex-maps'
import axios from 'axios'

Vue.use(VueRouter)
Vue.use(YmapPlugin, {
    apiKey: '*скрыл свой apiKey, но он норм работает*',
    lang: 'ru_RU',
    coordorder: 'latlong',
    version: '2.1'
})

sync function initApp(){
    let getData = new Promise((resolve, reject) => {
        axios.post('/get-data')
        .then((response) => {       
            resolve(response.data)
        })
    })

    let serverData = await getData

    Vue.prototype.$http = axios

    new Vue({
        el: '#App',
        router,
    })
}

initApp()

Вот так вывожу:

<template>
    <div>
        <yandex-map :coords="coords" zoom="5" ymap-class="yandex-map" :controls='yaOptions.controls'>
            <ymap-marker
                v-for='pin in pins'
                :key='pin.id'
                :marker-id='pin.id'
                marker-type="placemark"
                :coords="pin.coords"
                :icon="pinIcon(pin.icon)"
            >
                <pin-baloon slot="balloon" :pin='pin'></pin-baloon>
            </ymap-marker>
        </yandex-map>
    </div>
</template>

<script>
    import { loadYmap } from 'vue-yandex-maps'

    export default {
        name: 'IndexMap',
        data() {
            return {
                coords: [54, 39],
                yaOptions: {
                    controls: ["fullscreenControl", "searchControl", "geolocationControl", "typeSelector", "zoomControl"],
                },
                pins: [],
                isLoading: true,
            }
        },
        async mounted() {
            await loadYmap()
            await this.getPins()

            ymaps.geolocation.get().then(res => {
                this.coords = res.geoObjects.position
            });
        },
        components: {
            PinBaloon, // Это контент балуна, работает как надо
        },
        methods: {
            pinIcon(icon){
                return {
                    layout: 'default#image',
                    imageHref: icon,
                    imageSize: [43, 43],
                }
            },

            getPins(){
                this.isLoading = true
                this.$http.post('/pins/get')
                .then((response) => {
                    this.pins = response.data.pins
                    this.isLoading = false
                })
            },
        }
    }
</script>

А вот так она выглядит в Google Chrome (не только у меня, но и у других): введите сюда описание изображения

Я уже чистил всё что можно (cash, cookies, localeStorage). Проблема у всех есть, поэтому уникальные настройки Google отметаем. Консоль в Network не выдаёт ошибок. Сама консоль также не выдаёт предупреждений и ошибок. В чём может быть проблема?


Ответы (1 шт):

Автор решения: Arcadiy

У Вас не закрыт тег скрипта

        },
        }
    }
<script>
→ Ссылка