JSFiddle - React, Tailwind, and code Playground

by smartmax

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"/>

CSS

#map {
                width: 800px;
                height: 600px;
                margin: 20px;
                padding: 0;
                font-family: "Arial";
                font-size: 11pt;
}

JavaScript

function init() {
    
    var myMap = new ymaps.Map('map', {
            center: [55.734046, 37.588628],
            zoom: 9,
            controls: ['zoomControl', 'typeSelector',  'fullscreenControl']
        });

    var objects = ymaps.geoQuery()

    .add(ymaps.geocode('Москва, ул. Стромышнка, 6', {results:1}))
    .add(ymaps.geocode('Москва, ул. Остоженка, 24', {results:1}))
    .add(ymaps.geocode('Москва, ул. Малая Красносельская, 1с4', {results:1}))
    // вместо ▲ этих строк используется следующее выражение на php (берет адреса из MySQL):
    // <?php  
    //     while (($result = mysql_fetch_array($address))) 
    //        { 
    //          print_r (".add(ymaps.geocode('$result[0]',{results:1}))\n"); 
    //        }       
    // ?>
        .addToMap(myMap); 

    var balloons = ['Описание'], i = 0; // Описание также берет скрипт php из массива MySQL
    var balloonsfooter = ['Подвал'], i = 0; // Подвал также берет скрипт php из массива MySQL
    objects.then(function () {
        objects.get(0).balloon.open();
        for(var i = 0, len = objects.getLength(); i < len; i++) {
             objects.get(i).properties.set('iconContent', i + 1, 'results', '1');
             objects.get(i).properties.set('balloonContentBody', balloons[i]);
             objects.get(i).properties.set('balloonContentFooter', balloonsfooter[i]);
             
        }
    });
}

ymaps.ready(init);