<html>
<head>
    <title>Примеры. Метка</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <style>
        html, body {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
    </style>
</head>
<body>
<div id="factories_map" style="width:100%;height:400px;"></div>
  
</body>
</html>


     const YMAP_URL = "//api-maps.yandex.ru/2.1?apikey=8776dc4f-9e80-468b-8dba-f421dbc6fa93&lang=ru_RU&load=Map,Placemark,geoObject.addon.balloon,geoObject.addon.hint,templateLayoutFactory";
    const MAP_IDS = ["#factories_map"];

    if (document.querySelectorAll(MAP_IDS.join(",")).length) {
        getMap();
    }


    function getMap() {
        if (typeof window.ymaps === 'undefined') {
            let script = document.createElement('script');
            script.src = YMAP_URL;
            document.head.appendChild(script);
            script.onload = () => {
                initMaps();
            }
        } else {
            initMaps();
        }
    }

    async function initMaps() {
        ymaps.ready(() => {
            let mapCenter = [59.945066564158054,30.41043349999999];
            let mapZoom = 13;
           
            if (document.getElementById('factories_map')){
            let data = JSON.parse('[{"hint":"БСУ №2 (ул. Софийская)","balloon":"<div>БСУ №2 (ул. Софийская)<\/div><div>Тел.: +7 (812) 309-03-13 доб. 22<\/div>","coords":"59.840224639428826,30.43536162301732","marker":"partner-marker.png"},{"hint":"Завод партнёр в Волхове","balloon":"<div>Завод партнёр в Волхове<\/div><div>Адрес: г. Волхов, Кировский проспект, 20\/7<\/div>","coords":"59.910591064225244,32.351172","marker":"partner-marker.png"},{"hint":"Завод партнёр в Гатчине","balloon":"<div>Завод партнёр в Гатчине<\/div><div>Адрес: г. Гатчина, Индустриальная улица, 18Б, стр.5<\/div>","coords":"59.56979556462436,30.155437999999982","marker":"partner-marker.png"}]');
                makeMap('factories_map', data, mapCenter, mapZoom);
            }
        });
    }

    function makeMap(mapId, placemarks, mapCenter, mapZoom) {
        let map = new ymaps.Map(mapId, {
                center: mapCenter,
                zoom: mapZoom
            },
            {
                suppressMapOpenBlock: true
            });
var mapsArr = [];
        mapsArr.push(map);

        let iconSizeX = 104, iconSizeY = 144, iconScale = 0.35;

        for (key in placemarks) {
            let item = placemarks[key];
            map.geoObjects.add(new ymaps.Placemark(item.coords.split(","), {
                hintContent: item.hint,
                balloonContent: item.balloon,
            }, {
                iconLayout: 'default#image',
                iconImageSize: [iconSizeX * iconScale, iconSizeY * iconScale],
                iconImageOffset: [-iconSizeX * iconScale, -iconSizeY * iconScale ],
                iconImageHref: 'http://bmlanding.ru/img/'+item.marker
            }));
        }

        map.setBounds(map.geoObjects.getBounds());
        if (map.getZoom() > 19) map.setZoom(16);
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.