Ymaps is not defined ошибка

Разрабатываю сайт локально.
Использую pug.
Создал блок с классом map и id=»js-map»
.map#js-map
На сайте яндекс создал api ключ и подключил в шапке.
Создал файл и вставил в нем код с сайта и подключил перед body.
Поменял id.

ymaps.ready(init);
function init(){
		// Создание карты.
		var myMap = new ymaps.Map("js-map", {
				// Координаты центра карты.
				// Порядок по умолчанию: «широта, долгота».
				// Чтобы не определять координаты центра карты вручную,
				// воспользуйтесь инструментом Определение координат.
				center: [55.76, 37.64],
				// Уровень масштабирования. Допустимые значения:
				// от 0 (весь мир) до 19.
				zoom: 7
		});
}

И получаю ошибку
Uncaught ReferenceError: ymaps is not define

На сайте yandex нашел инфу, что можно использовать этот ключ локально.

Добрый день! Столкнулся с такой проблемой, что не получается получить переменную ymaps .

<template>
  <div class="base-map">
    <yandex-map
      ref="map"
      :settings="settings"
      class="ymap"
      :coords="coords[0] || [0, 0]"
    >
      <ymapMarker
        v-for="(point, index) in coords"
        :key="index"
        :marker-id="index"
        :coords="point"
      />
    </yandex-map>
  </div>
</template>

<script>
const settings = {
  apiKey: process.env.YANDEX_KEY,
  lang: 'ru_RU',
  coordorder: 'latlong',
  version: '2.1'
}

import { yandexMap, ymapMarker, loadYmap } from 'vue-yandex-maps'
export default {
  name: 'BaseMap',
  components: { yandexMap, ymapMarker },
  props: {
    coords: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      settings: settings
    }
  },
  async mounted() {
    await loadYmap(settings)
    console.log(window.ymaps)
  }
}
</script>

Вроде сделал все как указано в документации, но переменная ymaps остается undefined. В чем может быть проблема?

Также не нашел, как построить маршрут между несколькими точками на карте. Как я понял это надо делать, как раз через переменную ymaps? Есть ли какие-нибудь примеры кода, как это правильно сделать?

Я разрабатываю расширение хрома. Я хочу подключить некоторый API к текущей вкладке после нажатия кнопки в popup.html. Я использую этот код в popup.js:

$('button').click(function() {
    chrome.tabs.executeScript({
        file: 'js/ymaps.js'
    }, function() {});
});

В ymaps.js я использую следующий код для подключения API к текущей вкладке:

var script = document.createElement('script');
script.src = "http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU";
document.getElementsByTagName('head')[0].appendChild(script);

Этот API необходим для использования Yandex Maps. Итак, после этого кода я создаю <div> где должна быть размещена карта:

$('body').append('<div id="ymapsbox"></div>');

И этот простой код загружает только карту в созданный <div>:

ymaps.ready(init);//Waits DOM loaded and run function
var myMap;
function init() {
    myMap = new ymaps.Map("ymapsbox", {
        center: [55.76, 37.64],
        zoom: 7
    });
}

Я думаю, все ясно, и если вы все еще читаете, я объясню, в чем проблема. Когда я нажимаю кнопку в своем popup.html я попадаю в консоль Chrome. Не Uncaught ReferenceError: ymaps is not defined. Кажется, что библиотека api не связана. НО! Когда я вручную ymaps консольные ymaps — я получаю список доступных методов, поэтому библиотека подключена. Так почему, когда я вызываю ymaps -object из выполненного .js -file, я получаю такую ошибку?

UPD: Я также попытался обернуть ymaps.ready(init) в функции $(document).ready():

$(document).ready(function() {
    ymaps.ready(init);
})

Но ошибка все еще появляется. Человек внизу сказал, что библиотека api, возможно, еще не загружена. Но этот код также вызывает ошибку.

   setTimeout(function() {
        ymaps.ready(init);
    }, 1500);

Я даже пытался сделать такой путь…

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {
    if (changeInfo.status == "complete") {
        chrome.tabs.executeScript({
            file: 'js/gmm/yandexmaps.js'
        });
    }
});