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? Есть ли какие-нибудь примеры кода, как это правильно сделать?

В head выше всех стоит:

<script src="https://api-maps.yandex.ru/2.1?apikey=мой_ключ" type="text/javascript"></script>

Далее стандартные действия из примеров

<div id="map"> </div>

Не могу понять, что не так, уже не писал свой код, все взял из примеров

J

I do not share the negative scores to my question, in fact the comment of @Eduardo Jaramillo Licea helped me and I will share the answer, hopefully I can help someone else:
1 — Install the library DOM to Imagenpm i dom-to-image
2 — Install jspdf librarynpm i jspdf
in our app.component.html we will place a id, element of the DOM we want to capture. I chose #pdf.<div class=»container»>
<div id=»pdf»>
<h1>Este es un título</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat facere inventore accusantium. Quaerat, maxime fugiat vero eos praesentium nulla perspiciatis pariatur modi blanditiis ipsa consectetur ipsam dolores accusantium? Nam, nemo?</p>
</div>
<button class=»btn btn-primary» (click)=»pdf()»>Download PDF</button>
3 — In our app.component.ts we will include both dependencies and create the pdf() function.import { Component, OnInit} from ‘@angular/core’;
import { jsPDF } from ‘jspdf’
import domtoimage from ‘dom-to-image’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’],
providers: [UserService]
})
export class AppComponent implements OnInit {
constructor(){
}
ngOnInit(){
console.log(‘app.component cargando’);
}
pdf(){
var canvas = document.getElementById(‘pdf’);
domtoimage.toPng(canvas).then((dataUrl)=&gt;{
let imagen= new Image();
imagen.src=dataUrl;/*obtengo el screenshot*/
let pdf = new jsPDF(‘l’,’mm’,’A4′);/* creamos el pdf con jspdf, l es de landscape, mm: medidas en milímetros, y A4 el formato*/
pdf.addImage( imagen, 18, 10, 260,189); /*imagen: es la captura que insertaremos en el pdf, 18: margen izquierdo, 10: margen superior, 260:ancho, 189:alto, pueden jugar con estos valores, de esta forma me quedó prolijo en A4 horizontal*/
pdf.save( ‘documento.pdf’ ); /* descargamos el pdf con ese nombre.*/
}
);

}
}
app.component.cssh1 {
text-align: center;
}
#pdf {
border: solid 3px #000;
margin: 0;
text-align: justify;
}

Я разрабатываю расширение хрома. Я хочу подключить некоторый 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'
        });
    }
});