Ya map

index.html

<div class="contacts__map" id="map">
              <div class="contacts__map-image no-js">
                <picture>
                  <source type="image/webp" media="(max-width: 767px)"
                    srcset="img/map/map-mobile.webp 1x, img/map/map-mobile@2x.webp 2x">
                  <source type="image/webp" media="(max-width: 1023px)"
                    srcset="img/map/map-tablet.webp 1x, img/map/map-tablet@2x.webp 2x">
                  <source type="image/webp" srcset="img/map/map-desktop.webp 1x, img/map/map-desktop@2x.webp 2x">

                  <source media="(max-width: 767px)" srcset="img/map/map-mobile.jpg 1x, img/map/map-mobile@2x.jpg 2x">
                  <source media="(max-width: 1023px)" srcset="img/map/map-tablet.jpg 1x, img/map/map-tablet@2x.jpg 2x">
                  <img width="560" height="306" src="img/map/map-desktop.jpg" srcset="img/map/map-bg-desktop@2x.jpg 2x"
                    alt="Адрес: г. Санкт Петербург, ул. Большая Конюшенная, 19/8." loading="lazy">
                </picture>
              </div>
            </div>

main.js

import {initMap} from './modules/yandex-map/yandex-map';
import {PIN_IMAGE, PIN_INFO, DEFAULT_ZOOM, MAP_CENTER} from './modules/yandex-map/map-initials';

// в секцию load:

window.addEventListener('load', () => {
  
  // ... то, что уже было в скрипте

    setTimeout(() => {
      initMap({
        id: 'map',
        initials: {
          center: MAP_CENTER,
          controls: [],
          zoom: DEFAULT_ZOOM,
        },
        placemark: [
          {
            hintContent: PIN_INFO,
          },
          {
            iconImageHref: PIN_IMAGE,
            iconImageSize: [18, 22],
            iconLayout: 'default#image',
            iconShadow: false,
            iconImageOffset: [-9, -22],
          }
        ],
      });
    }, 3000);
  });
});

map-initials.js

const MAP_CENTER = [59.938615, 30.323015];
const PIN_LOCATION = [59.938615, 30.323015];
const PIN_INFO = 'г. Санкт Петербург, ул. Большая Конюшенная, 19/8';
const DEFAULT_ZOOM = 16;
const PIN_IMAGE = 'img/sprite/icon-map-pin.svg';

export {MAP_CENTER, PIN_IMAGE, PIN_INFO, PIN_LOCATION, DEFAULT_ZOOM};

yandex-map.js

import {PIN_LOCATION} from './map-initials';
const mapImage = document.querySelector('.contacts__map-image');

mapImage.classList.remove('no-js');

let apiLoaded = false;

const createMap = ({id, initials, placemark}) => {
  const map = new window.ymaps.Map(id, initials);
  map.geoObjects.add(new window.ymaps.Placemark(PIN_LOCATION, ...placemark));
  // map.behaviors.disable('scrollZoom');
};

const initMap = (mapData) => {
  if (apiLoaded) {
    createMap(mapData);
    return;
  }

  const scriptElement = document.createElement('script');
  scriptElement.src = 'https://api-maps.yandex.ru/2.1/?lang=ru_RU';
  scriptElement.setAttribute('async', '');
  scriptElement.addEventListener('load', () => {
    window.ymaps.ready(() => {
      createMap(mapData);
      apiLoaded = true;
    });
  });
  document.body.append(scriptElement);
};

export {initMap};