API Yandex Map 2.0 multiple maps on one page?

Question

JavaScript

The task is to integrate a map with tags for each product into the Yandex engine.
On API 1.x, connecting multiple maps on the same page is easy.

<script type="text/javascript">
              YMaps.jQuery(function () {
                
                var [email protected]@ = new YMaps.Map(YMaps.jQuery("#[email protected]@")[0]);
                [email protected]@.setCenter(new YMaps.GeoPoint(37.678514, 55.758255), 17);
              });

            </script>

    <div id="[email protected]@" style="width:500px;height:500px"></div>

I did not understand how to connect several cards on one API 2.0 page.
The card is displayed not for each product, but only in the first one, and several cards are shown at once.

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map('map', {
            center: [56.136, 40.390],
            zoom: 10
        });

I have superficial knowledge in JS. Khabrovchane, please help.
Actually the question is:
How to put a label in the first example? (I did not understand myself)
Or how to implement the second example?
Thanks in advance

Answer 1

I’m afraid to seem stupid, but I didn’t quite understand the question - where is the first example, and where is the second?
Well, actually, multiple maps and labels for them can be implemented like this (the example is freely taken from the map sandbox, by the way, I advise you to go there for details of working with the api):

ymaps.ready(init);

function init() {
    var center = [56.136, 40.390];
    var myMap1 = new ymaps.Map('map1', {
        center: center,
        zoom: 10
    });
    var myMap2 = new ymaps.Map('map2', {
        center: center,
        zoom: 10
    });
    var myPlacemark1 = new ymaps.Placemark(center, {
        // Свойства.
        // Содержимое иконки, балуна и хинта.
        iconContent: '1',
        balloonContent: 'Балун',
        hintContent: 'Стандартный значок метки'
    }, {
        // Опции.
        // Стандартная фиолетовая иконка.
        preset: 'twirl#violetIcon'
    });
    var myPlacemark2 = new ymaps.Placemark(center, {
        // Свойства.
        // Содержимое иконки, балуна и хинта.
        iconContent: '2',
        balloonContent: 'Балун',
        hintContent: 'Стандартный значок метки'
    }, {
        // Опции.
        // Стандартная фиолетовая иконка.
        preset: 'twirl#violetIcon'
    });
    myMap1.geoObjects.add(myPlacemark1);
    myMap2.geoObjects.add(myPlacemark2);
}

example on jsfiddle:
upd: The code, as you understand, is for the second version of the api.