JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.full&amp;lang=ru-RU&amp;coordorder=longlat&amp;mode=debug&amp;fiddle.js"></script>
<script src="http://dimik.github.io/ymaps/examples/multi-geocoder/multi-geocoder.js"></script>
<script src="http://dimik.github.io/ymaps/examples/multi-geocoder/list-collection.js"></script>
Предустановлены координаты обоих точек (getBounds() возвращает '<span class="fbounds"></span>'):
<div id="map0" style="width: 570px; height: 200px"></div>
Предустановлены координаты одной точки (getBounds() возвращает '<span class="fbounds"></span>'):
<div id="map1" style="width: 570px; height: 200px"></div>
Адреса без координат (getBounds() возвращает '<span class="fbounds"></span>', при этом в консоль вываливается ошибка из-за того, что setBounds() ожидает массив):
<div id="map2" style="width: 570px; height: 200px"></div>

CSS

div {
    margin: 0 0 10px 0;
}

JavaScript

ymaps.ready(preinit);

function preinit() {
    var mapcount = 3,
        initaddresses = [
            [
                {
                    "address": "Иркутск, ул. Байкальская, 108",
                    "coords":  [104.30843522772031,52.266032600723655]
                },
                {
                    "address": "Иркутск, ул. Р. Люксембург, 119",
                    "coords":  [104.1922584232786,52.34126985730488]
                }
            ],
            [
                {
                    "address": "Иркутск, ул. Байкальская, 108",
                    "coords":  [104.30843522772031,52.266032600723655]
                },
                {
                    "address": "Иркутск, ул. Р. Люксембург, 119"
                }
            ],
            [
                {
                    "address": "Иркутск, ул. Байкальская, 108",
                },
                {
                    "address": "Иркутск, ул. Р. Люксембург, 119"
                }
            ]
        ]
    ;
    
    for (var i = 0; i < mapcount; i++) {
         init(i, initaddresses[i]);
    }
}

function init(map_num, addresses){
    var myMap,
        name = "12 \u043a\u043e\u0442\u043e\u0432",
        collection = new ymaps.GeoObjectCollection(null, { preset: 'twirl#greenIcon' }),
        cityname = "\u0418\u0440\u043a\u0443\u0442\u0441\u043a",
        mapcenter = [104.280633, 52.289422],
        addr = []
    ;
    
    if (cityname) {
        ymaps.geocode(cityname).then(function (res) {
            mapcenter = res.geoObjects.get(0).geometry.getCoordinates();
        });
    }
    
    myMap = createMap(map_num, mapcenter);
    myMap.geoObjects.add(collection);

    $.each(addresses, function(index, addrObject) {
        if (undefined !== addrObject.coords) {
            addrObject.placemark = createPlacemark(addrObject.id, addrObject.coords, name, addrObject.address);
            collection.add(addrObject.placemark);
        }
        else {
           ...