Lazy load yandex maps API

YandexMap.vue

<script>/**
 * Lazy load Yandex Maps API
 * Отложенная загрузка выражается в том,
 * что API подгружается при первом мотировании компонента.
 * Если на странице нет карты, то и API не грузится.
 *
 * @author      delphinpro <[email protected]>
 * @copyright   copyright © 2018 delphinpro
 * @license     licensed under the MIT license
 *
 * @external ymaps
 */

const EVENT_YANDEX_MAP_READY_NAME = 'yandex-map:ready';

let apiTagInserted = null;
let apiIsReady     = false;

function fireEvent(el, eventName) {
    el.dispatchEvent(
        new CustomEvent(eventName, {
            bubbles   : true,
            cancelable: true,
            detail    : {ready: true},
        }),
    );
}

function apiOnReady(onReady) {
    let el;
    let firstScriptTag;

    if (!apiTagInserted) {
        console.log('Yandex maps API initialize...');

        apiTagInserted = true;

        el = document.createElement('script');

        el.onload = function() {
            console.log('Yandex maps API is ready.');
            apiIsReady = true;
            fireEvent(document, EVENT_YANDEX_MAP_READY_NAME);
        };

        el.setAttribute('charset', 'utf-8');
        el.setAttribute('async', 'async');
        el.setAttribute('src', '//api-maps.yandex.ru/2.1/?lang=ru_RU');

        firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(el, firstScriptTag);
    }

    if (typeof onReady === 'function') {
        if (apiIsReady) {
            onReady(window.ymaps);
        } else {
            const one = function() {
                document.removeEventListener(EVENT_YANDEX_MAP_READY_NAME, one);
                onReady(window.ymaps);
            };
            document.addEventListener(EVENT_YANDEX_MAP_READY_NAME, one);
        }
    } else {
        console.warn('function apiOnReady: expected callback function in the first parameter');
    }
}

export default {
    props: {
        center: {type: Array, default: [55.75161665120035, 37.61788699999992]},
        point : Array,
        zoom  : {type: Number, default: 15},
    },

    data: () => ({}),

    computed: {
        elId() {
            return `yandex-map-container-id-${this._uid}`;
        },
    },

    mounted() {
        let point = this.point || this.center;

        apiOnReady(ymaps => {
            ymaps.ready(() => {
                let myMap = new ymaps.Map(this.elId, {
                    center: this.center,
                    zoom  : this.zoom,
                });

                myMap.behaviors.disable(['scrollZoom']);

                let myPlacemark = new ymaps.Placemark(point, {}, {
                    iconLayout     : 'default#image',
                    iconImageHref  : '/design/images/point-brand.png',
                    iconImageSize  : [51, 67],
                    iconImageOffset: [-24, -67],
                });

                myMap.geoObjects.add(myPlacemark);
            });
        });
    },
};
</script>

<template>
    <div class="yandex-map" :id="elId"></div>
</template>

<style lang="scss">
    .yandex-map {
        position: relative;
        background: #eeeeee;
        overflow: hidden;
        &::before {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            content: 'Карта загружается...';
            font-size: 30px;
            display: block;
            font-weight: bold;
            text-transform: uppercase;
            color: #dddddd;
            text-shadow: -1px -1px 1px rgba(#000000, 0.2), 0px 1px 1px #ffffff, 1px 1px 1px #ffffff;
        }
    }
</style>