Карта с AJAX (Битрикс)

В некоторых случаях необходимо выводить развернутую информацию по метке. Для этого можно использовать ballon, но если необходима структурированная информация - оптимальнее использовать Ajax (or Axios) запросы, и асинхронно подгружать необходимые данные, в html формате

Пример на основании проверенного кода в Bitrix:

<?php
CModule::IncludeModule("iblock");

$obj_place = CIBlockElement::GetList(
    Array('NAME' => 'ASC'), 
    array(
        'IBLOCK_ID' => 3,
        'PROPERTY_PLACE_OTEL' => $id_hotel,
    ),
    false 
);
$result_items = array();
while($res_place = $obj_place->getNext()){
    $obj_prop = CIBlockElement::GetProperty(3, $res_place['ID'], Array(), Array());
    $tmpArr = array();
    while($ar_prop = $obj_prop->getNext()){
        $tmpArr[$ar_prop['CODE']] = $ar_prop;
    }
    $result_items[$res_place['ID']] = array(
        'NAME' => $res_place['NAME'],
        'PROP' => $tmpArr
    );
}
?>



<div class="mapCatAll">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h2>Выберите объект на карте</h2>
            </div>
        </div>
    </div>
    <div id="mapCatAll">
    </div>
    <div class="blockOneChildMap"></div>
</div>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
    ymaps.ready(init);
    var myMap,
        myPlacemark;

    function setIcon(){
        //myMap.IGeoObject.setIconContent('iconImageHref', '/img/icons/map_default.png');
    }
    function init(){     
        myMap = new ymaps.Map("mapCatAll", {
            center: [52.81400705, 55.39457876],
            zoom: 3,
            controls: [],
            controls: ['smallMapDefaultSet'],
            behaviors: []
        });
        myMap.behaviors.enable('drag');
        
        var myCollection = new ymaps.GeoObjectCollection(
            {},
            {
                iconLayout: 'default#image',
                iconImageHref: '/img/icons/map_default.png',
                iconImageSize: [18, 24],
                iconImageOffset: [-9, -24]
            }
        );
        
    <?php foreach($result_items AS $id_h => $values): ?>
        var yPl = new ymaps.Placemark([$values['PROP']['GEOLOCATION']['VALUE']?>],
            {
                //balloonContent: '<?=$values['PROP']['ADRES']['VALUE']?>',
                hintContent: '<?=$values['NAME']?>',
            }, {
                iconImageHref: '/img/icons/map_default.png',
                // Отключаем кнопку закрытия балуна.
                balloonCloseButton: false,
                // Балун будем открывать и закрывать кликом по иконке метки.
                hideIconOnBalloonOpen: true,
                classed: 'class',
                idobject: '<?=$id_h?>'
            }
        );
        yPl.events
            .add('click', function (e) {
                myCollection.each(function(a){a.options.set('iconImageHref', '/img/icons/map_default.png')});
                /*
                if(e.get('target').options.get('classed') == 'active'){
                    e.get('target').options.set('classed', 'class');
                    jQuery('.mapCatAll .blockOneChildMap').css('display', 'none');
                    e.get('target').options.set('iconImageHref', '/img/icons/map_default.png');
                } else {
                */
                    e.get('target').options.set('classed', 'active');
                    post = {urlArr:'<?=$APPLICATION->GetCurPage()?>', post_dateFrom:'<?=$_SESSION['dateIn']?>', post_dateTo:'<?=$_SESSION['dateOut']?>', id_hotel:'<?=$id_h?>'};
                    jQuery.ajax({
                        url    : "/page_inc/get_viewHotelOnMap.php",
                        type   : 'POST',
                        data   : {'post':JSON.stringify(post), 'func':'getObj'},
                        cache  : false,
                        success: function(data){
                            //console.log('success - '+data);
                        }
                    })
                    .done( function(data){
                            console.log(data);
                            data = JSON.parse(data);
                            //console.log(data);
                            if( data.id ){
                                jQuery('.mapCatAll .blockOneChildMap').html('');
                                jQuery('.mapCatAll .blockOneChildMap').append(data.message);
                            } else {
                                jQuery('.mapCatAll .blockOneChildMap').html('');
                                jQuery('.mapCatAll .blockOneChildMap').append("<h3>ERROR</h3>");
                            }
                        }
                    )
                    .fail( function(){
                        alert('Error');
                        }
                    );
                    jQuery('.mapCatAll .blockOneChildMap').css('display', 'block');
                    e.get('target').options.set('iconImageHref', '/img/icons/map_hover.png');
                /*}*/
            })
            .add('mouseenter', function (e) {
                //e.get('target').options.set('iconImageHref', '/img/icons/map_hover.png');
            })
            .add('mouseleave', function (e) {
                //e.get('target').options.set('iconImageHref', '/img/icons/map_default.png');
            });
        myCollection.add(yPl);
    <?php endforeach; ?>
        
    
    // Добавляем коллекцию на карту.
    myMap.geoObjects.add(myCollection);
                
    // Устанавливаем карте центр и масштаб так, чтобы охватить коллекцию целиком.
    myMap.setBounds(myCollection.getBounds());
    //myMap.setZoom(parseFloat(myMap.getZoom()) - 1);
    myMap.setZoom(myMap.getZoom());
    
}
</script>