How to initialize the Yandex Maps API in Vue?

Please tell me sawing project, it turned out that the old maps were developed using connect script in the global scope, but to me now it's all integrated in Vue, make delivery box in the online store, connect to the project footprint. follows:
data() {
 return {
 dropdownIsOpened: false,
 SuggestView: null,
 bounds: {
 100000003:[ // Moscow
 [55.142627, 36.803259],
 [56.021281, 37.967682]
],
 100000006:[ // Samara
 [53.091785, 49.731327],
 [53.550907, 50.390439]
],
 100000008:[ // Sochi
 [43.384759, 39.149676],
 [44.029925, 40.010388]
]
},
 provider: {
 suggest: function (request, options) {
 delete options['provider'];
 return ymaps.suggest(request, options).then(items => {
 let arrayResult = [];
 let arrayPromises = [];

 pushGeoData function(displayName, value, jsonData) {
 arrayResult.push({displayName: displayName, value: value, jsonData: jsonData});
}

 items.forEach(i => {
 arrayPromises.push(ymaps.geocode(i.value).then(gc => {
 let displayName = "";
 let value = i.value;
 if (!i.value.match(/.*access.*/)) {
 let geoObject = gc.geoObjects.get(0);

 if (geoObject) {
 let jsonData = JSON.stringify({
 'city': geoObject.getLocalities()[0] || geoObject.getAdministrativeAreas()[0],
 'street': geoObject.getThoroughfare() || geoObject.getLocalities()[0],
 'house': geoObject.getPremiseNumber(),
});

 if (geoObject.getCountryCode() == "RU") {
 value = value.replace(geoObject.getCountry()+", ", "");
 value = value.replace(geoObject.getAdministrativeAreas()[0]+", ", "");
 displayName = "<div class='yandex-map-address_info'>"+value+"</div><div class='yandex-map-localities_info'>"+geoObject.getCountry()+", "+geoObject.getLocalities()[0]+"</div>";
 value = value.replace("undefined", "");
 displayName = displayName.replace("undefined", "");

 pushGeoData(displayName, value, jsonData);
}
}
}
}));
})

 return Promise.all(arrayPromises).then(function(){
console.log(arrayResult)
 return ymaps.vow.resolve(arrayResult);
});
})
}
}
};
},
computed() {
...
 geoInput() {
 return document.getElementById('geo-select__input').querySelector('.app-select__input')
},
},
methods: {
 yaMapInit() { // methods()
 this.SuggestView = new ymaps.SuggestView(this.geoInput, {
 provider: this.provider
 boundedBy: this.bounds[this.brandCode]
});
},
mounted() {
ymaps.ready(this.yaMapInit());
}


Getting a TypeError: "ymaps.SuggestView is not a constructor". Do not understand why, tried the initialization in the DOMContentLoaded turn received something like yaCounter..... is not defined well, actually nothing came of it. I understand that to connect the card outside the context of a Vue not a good idea, but I do not even know what to do.
April 7th 20 at 11:01
1 answer
April 7th 20 at 11:03
Solution
Try to connect the script with Yandex at the time of initialization of a component. A method yaMapInit to run after this script has loaded.

Additionally it should provide for the deletion script when you delete a component.

Example:
created() { // or even beforeCreated()
 const script = document.createElement('script')

 script.onload = () => {
 ymaps.ready(() => this.yaMapInit());
 // or
 // this.yaMapInit()
};

 script.id = 'ymaps'
 script.src = "https://api-maps.yandex.ru/2.1/?apikey=ваш API key&lang=en_us"
document.head.append(script);
},

destroyed() {
document.head.querySelector('script#ymaps').remove()
 // ymaps = null
}
Thank you, now try - lillian_Johnst commented on April 7th 20 at 11:06

Find more questions by tags Yandex.MapsVue.js