Как отобразить Яндекс карту в компоненте vue?

Question

[Тимур Евгажуков]

При установке карты на сайте, написанном на vue отображается весь интерфейс карты (кнопки, масштабирование и так далее), а вот самой карты нет. Второй день бьюсь и не могу понять причину.
Посмотреть можно, например, тут https://yapacar.com/carservices/view/201 либо на картинке ниже



Как описано в документации указал ссылку на api в head файла index.html, а после в нужном мне компоненте указываю:

<div id="map" style="width: 100%; height: 400px"></div>

а после в методе created вставляю код:

ymaps.ready(function () {
    new ymaps.Map("map", {
        center: [55.76, 37.64],
        zoom: 7
    });
});

пробовал и через nextTick с таким же результатом.

При этом если я этот код вставляю в обычный статичный html файл, то все отлично показывается.

Еще пробовал использовать компонент vue-yandex-map, но он у меня вообще не отобразился, просто пустое место показывает.

Помогите разобраться что я делаю не так.

Comments

[Тимур Евгажуков]

При этом в Firefox все корректно показывается, а в Хроме и в Опере так, как я описал. Копаю дальше

[Тимур Евгажуков]

Пробовал еще и как тут jsfiddle.net/L3p0osxa/, но эффект точно такой же

Answer 1

[0xD34F]

Проблема из-за css. Для всех canvas'ов у вас задано правило width: 100% !important;, а родительский элемент canvas'а карты имеет нулевые размеры.

UPD.

new ymaps.Map("map", {

Вот так делать не надо. Что если экземпляров компонента с картой будет больше одного? - двух, трёх и т.д. карт с одним id быть не может. Замените id на ref, и передавайте в конструктор карты вместо id сам элемент.

Comments

[Тимур Евгажуков]

на ref сменил, спасибо за уточнение, хотя карта всегда была бы только одна, а вот про css стили не совсем понял как это исправить

[0xD34F]

Тимур Евгажуков, уберите !important.

[Тимур Евгажуков]

0xD34F, убрал в стилях используемого шаблона. Спасибо! Помогло

Answer 2

[letres]

1. Выкачиваем модуль c https://api-maps.yandex.ru/2.1/?apikey=Ваш_ключ&la...
2. Выкаченный фал переименовываем в yandex-maps.js и копируем в папку проекта plugins
3. Создаём файл Contacts.vue

<template>
  <div id="map" class="shadow" style="width: 100%; height: 500px"></div>
</template>

<script>
import "../plugins/yandex-maps.js";

function init() {
 var myMap = new ymaps.Map("map", {
                center: [55.76, 37.64],
                zoom: 7
            });
}

export default {
  data() {
    return {};
  },
  mounted() {
    ymaps.ready(init);
  },
};
</script>

<style scoped>
</style>

Answer 3

[Александр Буки]

Вам правильно написали про стили. Подключите их в main js например
Еще как вариант попробуйте библиотеку:
https://vue-yandex-maps.github.io/

Comments

[Тимур Евгажуков]

Я ее сразу попробовал, но было ее хуже.

[Тимур Евгажуков]

О какие именно стилях идет речь, которые нужно подключить, не совсем понимаю