Как подключить апи от яндекса в VueJS?

Question

[Artem0071]

Добрый день
Хочу подключить карту от яндекса, как это сделать?

В хеаде прописываю:

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

в компоненте :

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <div id="map" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
export default {
  name: 'app',
  created () {
    var map = new ymaps.Map("map", {
      center: [55.76, 37.64],
      zoom: 7
    });
  }
}
</script>

На что в консоли выводит:
ymaps.Map is not a constructor

Я так понимаю, что Vue просто не видит вне себя этот конструктор, так что как такое можно реализовать?

Answer 1

[Евгений]

Если вы подключили скрипт в хедере, то он уже будет доступен в глобальной области видимости. Если бы это было не так, то вы бы получили другу ошибку, у вас же явно сказано что ymaps это не конструктор. Значит проблема в названии переменой скорее всего нужно с большой буквы написать класс, т.к. в JS все переменные чувствительны к регистру и как правило классы всегда пишутся с заглавной буквы:
var map = new YMaps.Map(...)

Answer 2

[grin_09]

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

Answer 3

[Klein Maximus]

Есть готовый компонент - https://github.com/PNKBizz/vue-yandex-map

Comments

[Александр Алексеев]

не такой уж он и готовый (

[Klein Maximus]

shure348, "готовее" не нашел.