Yandex.map

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="common.css">
  <link rel="stylesheet" href="elements.css">
  <link rel="stylesheet" href="classes.css">
  <link rel="stylesheet" href="ymaps.css">
  <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
  <script src="script.js"></script>
  <script src="actions.js"></script>

</head>

<body>
  <div id="container">
    <nav>
      <h1>Ангары</h1>
      <div class="list_manager" id="manage-list-show"><span>▼</span> Показать список</div>
    </nav>
    <div id="menu-list">
      <div id="menu-container">
        <ol>
          <li>
            <span>
                <span>1</span> Арочный, г. Юхнов
            <div>2009 г.</div>
            </span>

          </li>
          <li>
            <span>
                <span>2</span> Прямоугольный, г. Павловский Посад
            <div>2009 г.</div>
            </span>
          </li>
          <li>
            <span>
                <span>3</span> Шатровый, г. Юхнов
            <div>2009 г.</div>
            </span>
          </li>
          <li>
            <span>
                <span>4</span> Арочный, г. Ногинск
            <div>2009 г.</div>
            </span>
          </li>
          <li>
            <span>
                <span>5</span> Прямоугольный, г. Юхнов
            <div>2009 г.</div>
            </span>
          </li>
          <!--<li>
            <span>
                <span>6</span> 
                Арочный, г. Юхнов
                <div>2009 г.</div>
            </span>
        </li>
        <li>
            <span>
                <span>7</span> 
                Прямоугольный, г. Павловский Посад
                <div>2009 г.</div>
            </span>
        </li>
        <li>
            <span>
                <span>8</span> 
                Шатровый, г. Юхнов
                <div>2009 г.</div>
            </span>
        </li>-->
          <li>
            <span>
                <span>9</span> Арочный, г. Юхнов
            <div>2009 г.</div>
            </span>
          </li>
          <li>
            <span>
                <span>10</span> Прямоугольный, г. Павловский Посад
            <div>2009 г.</div>
            </span>
          </li>
        </ol>
      </div>
      <div class="list_manager" id="manage-list-hide"><span>▲</span> Скрыть список</div>
    </div>
    <div id="main">
      <div id="shell">
      </div>
      <div id="gallery">
        Gallery
        <div class="close"></div>
      </div>
      <div class="mapArea" id="map1">
      </div>
    </div>
  </div>
</body>

</html>

// Как только будет загружен API и готов DOM, выполняем инициализацию
ymaps.ready(init);

var myMaps = {};

function init() {
    var Map, Markers,
        mapsParams = {
            map1: {
                center: [55.76, 37.64],
                markers: [
                    [55.779393, 38.651318], // Павлов Посад
                    [55.383874, 36.724225],  // Наро-Фоминск
                    [54.744659, 35.242463]   // Юхнов
                ],
                imgTexts: [
                    "Ангар первый",
                    "Ангар второй",
                    "Ангар третий"
                ]
            }
        };
    for (var map in mapsParams) {
        //console.log('map(' + typeof(map) + ') = ' + map);
        //console.dir(mapsParams[map]);
        //console.log(mapsParams[map].center);
        //console.log(mapsParams[map].balloonContent);
        //console.log(mapsParams[map].hintContent);
        //console.log('zoom type: '+typeof mapsParams['zoom']);
        //console.log('type type: '+typeof mapsParams['type']);
        Map = mapsParams[map];
        myMaps[map] = new ymaps.Map(map, {
            center: Map.center,//Петрозаводск //[55.76, 37.64], // Москва
            zoom: 8,
            type: 'yandex#map'
        });
        // добавим маркеры
        Markers = Map.markers;
        for (var i = 0, j = Markers.length; i < j; i++) {
            myMaps[map].geoObjects.add(new ymaps.Placemark(
                Markers[i], {
                    balloonContent: '<img class="preview" onclick="manageGallery('+(i+1)+')" src="images/map' + (i + 1) + '.jpg" />' +
                    '<div>' + Map.imgTexts[i] + '</div>' +
                    '<input type="button" value="Видео">'
                }
            ));
        } //console.dir(myMaps[map].getCenter());
        myMaps[map].controls.add(
            new ymaps.control.TypeSelector(
                ['yandex#map', 'yandex#hybrid', 'yandex#satellite']
            )
        );
        myMaps[map].controls.add('zoomControl', {
            float: 'none',
            position: {
                right: 40,
                top: 75
            }
        });
    }
}

#container {
    height: 100%;
    position: relative;
}
#main {
    height: 100%;
    width: 100%;
    margin-top: -60px;
    padding-top: 60px;
}
#manage-list-hide{
    bottom: 0;
    border-top: solid 1px;
    display: none;
    width: 100%;
}
#manage-list-show{
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    opacity: 0.85;
}
#menu-container{
    position: absolute;
    
    top: 0;
    bottom: 50px;
    overflow: auto;
    width: 100%;
    background: #000;
    padding: 0 10px 28px 20px;
}
#menu-list{
    display: none;
    margin: 0px;
    position: absolute;
    opacity: 0.85;
    bottom: 0px;
    top: 59px;
    z-index: 1;
    background-color: black;
}
#shell{
    background-color: black;
    bottom: 0;
    display: none;
    opacity: 0.5;
    left: 0;
    right: 0;
    position: fixed;
    padding: 20px;
    top: 0;
    z-index: 2;
}
#gallery{
    background-color: lightyellow;
    display: none;
    height: 535px;
    position: fixed;
    top: 25%;
    width: 594px;
    z-index: 3;
}
[id^="manage-list-"] span:first-child{
    cursor: pointer;
    display: inline-block;
    transform: scaleY(0.5);
}

$(function(){
    // показать/спрятать список
    var manageListBlock = $('.list_manager');
    $('span:first-child', manageListBlock).on('click', function(){
        $(manageListBlock).toggle(200); //console.dir($(manageListBlock));
        $('#menu-list').slideToggle(300);
    });
    // обработать клик по элементу списка
    $('div#menu-container ol li').on('click', function(){
        var pMarker = 'map'+($(this).index()+1);
        console.log('pMarker: '+pMarker);
        //console.dir(myMaps['map1'].balloon);

    });
    // закрыть превью
    $('.close').on('click', function(){
        $(this).parent().fadeOut(200, function(){
            $(getShell()).fadeOut(200);
        });
    });
    // скорректировать позицию превью на изменение размера окна
    $(window).on('resize', manageGallery);

});

function manageGallery(nmb){
    var shell   = getShell(),
        gallery = $('#gallery');
    if(typeof nmb == 'number' || $(gallery).is(':visible')){
        //console.log(typeof nmb);
        //console.log('visible: '+$(gallery).is(':visible'));
        var ofstLeft= ($(shell).width()-$(gallery).width())/ 2,
            ofstTop = ($(shell).height()-$(gallery).height()+60)/ 2;
        // через jQuery не работает...
        $(gallery)[0].style.top=ofstTop+'px';
        $(gallery)[0].style.left=ofstLeft+'px';
        //
        if(nmb){
            $(shell).fadeIn(200, function(){
                $(gallery).fadeIn(200);
            });
        }
    }
}
function getShell(){
    return $('#shell');
}

.close{
    cursor: pointer;
    font-family: Arial;
    position: absolute;
    right: -6px;
    top:4px;
    width: 24px;
    height: 24px;
    zoom: 1.5;
    transform: scaleY(0.7);
}
.close::after{
    content: 'x';
}
.list_manager{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    height: 51px;
    line-height: 50px;
    padding: 0 15px;
    position: absolute;
}
.mapArea{
    height: 100%;
}

a, body, div, li, menu, nav, span{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.list_manager,
#menu-list{
    width: 276px;
}
.list_manager,
#menu-list >ol{
    background-color: black;
    color: white;
    margin-top: -4px;
}
#menu-list{
    left: 112px;
}
nav{
  padding-left: 112px !important;
}

a, body, div, li, menu, nav, span{
    box-sizing: border-box;
}
html, body{
    height: 100%;
    margin: 0;
    padding: 0;
}
menu{
    margin: 0;
}
nav{
    background-color: black;
    height: 60px;
    padding: 0;
    position: relative;
}
#menu-list{
    display: none;
}
#menu-container >ol{
    margin: 0;
}
nav >div{
    position: absolute;
    z-index: 2;
}
#menu-container >ol li{
    min-height: 66px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    position: relative;
    padding-top: 13px;
    list-style: none;
}
#menu-container >ol li >span{
    display: block;
    margin-left: -47px;
    padding-left: 36px;
    height: 66px;
    color: white;
}
#menu-container >ol li >span:hover,
#menu-container >ol li >span:hover div{
    color: red;
    cursor: pointer;
}
#menu-container >ol li >span:hover >span{
    color: white;
}
#menu-container >ol li >span >span{
    margin-left: -37px;
    margin-right: 4px;
    margin-top: 4px;
    padding-top: 2px;
    display: inline-block;
    text-align: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: solid 2px #bbb;
}
#menu-container >ol li span >div{
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.7;
}
nav h1{
    color: white;
    font-family: 'Myriad Pro', Arial, Impact, Helvetica;
    line-height: 60px;
    margin: 0;
}
nav div{
   color: white;
}

.ymaps-b-balloon__content-body img{
    cursor: pointer;
}