Расположение списка объектов на карте

311
16 февраля 2018, 17:19

В >>>ПРИМЕРЕ<<< карта растянута на весь экран и список объектов в низу под картой. Я пытаюсь сделать несколько карт с левой стороны и список с правой. Карты сделал, а вот список не могу сделать с правой стороны. Уже через таблицу пытался без успешно. 

// Как только будет загружен API и готов DOM, выполняем инициализацию 
ymaps.ready(init); 
 
function init() { 
  // Создание экземпляра карты и его привязка к контейнеру с 
  // заданным id ("map") 
  var myMap = new ymaps.Map('map1', { 
    // При инициализации карты, обязательно нужно указать 
    // ее центр и коэффициент масштабирования 
    center: [69.34578004, 88.18383015], 
    behaviors: ['default', 'scrollZoom'], 
    zoom: 11 
  }); 
  // Создание экземпляра карты и его привязка к контейнеру с 
  // заданным id ("map")	 
  var myMap = new ymaps.Map('map2', { 
    // При инициализации карты, обязательно нужно указать 
    // ее центр и коэффициент масштабирования 
    center: [69.35069841, 87.75575661], 
    behaviors: ['default', 'scrollZoom'], 
    zoom: 14 
  }); 
  // Создание экземпляра карты и его привязка к контейнеру с 
  // заданным id ("map") 
  var myMap = new ymaps.Map('map3', { 
    // При инициализации карты, обязательно нужно указать 
    // ее центр и коэффициент масштабирования 
    center: [69.49181393, 88.38485800], 
    behaviors: ['default', 'scrollZoom'], 
    zoom: 13 
  }); 
  // Создание экземпляра карты и его привязка к контейнеру с 
  // заданным id ("map") 
  var myMap = new ymaps.Map('map4', { 
    // При инициализации карты, обязательно нужно указать 
    // ее центр и коэффициент масштабирования 
    center: [68.09471301, 87.79412227], 
    behaviors: ['default', 'scrollZoom'], 
    zoom: 15 
  }); 
  // Контейнер для меню. 
  menu = $('<ul class="menu"></ul>'); 
 
  for (var i = 0, l = groups.length; i < l; i++) { 
    createMenuGroup(groups[i]); 
  } 
 
  function createMenuGroup(group) { 
    // Пункт меню. 
    var menuItem = $('<ul><a href="#">' + group.name + '</a></ul>'), 
      // Коллекция для геообъектов группы. 
      collection = new ymaps.GeoObjectCollection(null, { 
        preset: group.style 
      }), 
      // Контейнер для подменю. 
      submenu = $('<ul class="submenu"></ul>'); 
 
    // Добавляем коллекцию на карту. 
    myMap.geoObjects.add(collection); 
    // Добавляем подменю. 
    menuItem 
      .append(submenu) 
      // Добавляем пункт в меню. 
      .appendTo(menu) 
      // По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю. 
      .find('a') 
      .bind('click', function() { 
        if (collection.getParent()) { 
          myMap.geoObjects.remove(collection); 
          submenu.hide(); 
        } else { 
          myMap.geoObjects.add(collection); 
          submenu.show(); 
        } 
      }); 
    for (var j = 0, m = group.items.length; j < m; j++) { 
      createSubMenu(group.items[j], collection, submenu); 
    } 
  } 
 
  function createSubMenu(item, collection, submenu) { 
    // Пункт подменю. 
    var submenuItem = $('<li><a href="#">' + item.name + '</a></li>'), 
      // Создаем метку. 
      placemark = new ymaps.Placemark(item.center, { 
        balloonContent: item.name 
      }); 
 
    // Добавляем метку в коллекцию. 
    collection.add(placemark); 
    // Добавляем пункт в подменю. 
    submenuItem 
      .appendTo(submenu) 
      // При клике по пункту подменю открываем/закрываем баллун у метки. 
      .find('a') 
      .bind('click', function() { 
        if (!placemark.balloon.isOpen()) { 
          placemark.balloon.open(); 
        } else { 
          placemark.balloon.close(); 
        } 
        return false; 
      }); 
  } 
  // Добавляем меню в тэг BODY. 
  menu.appendTo($('body')); 
} 
// Группы объектов 
var groups = [{ 
    name: "Лицеи", 
    style: "islands#redCircleIcon", 
    items: [{ 
        center: [69.34579180, 88.19180375], 
        name: "МБОУ «Лицей № 3»(корпус №1)" 
      }, 
      { 
        center: [69.34526911, 88.19182521], 
        name: "МБОУ «Лицей № 3»(корпус №2)" 
      } 
    ] 
  }, 
  { 
    name: "Гимназии", 
    style: "islands#orangeCircleDotIcon", 
    items: [{ 
        center: [69.34753557, 88.21785750], 
        name: "МБОУ «Гимназия №1»(корпус №1)" 
      }, 
      { 
        center: [69.34814152, 88.21667733], 
        name: "МБОУ «Гимназия №1»(корпус №2)" 
      }, 
      { 
        center: [69.34769463, 88.21699919], 
        name: "МБОУ «Гимназия №1»(корпус №3)" 
      }, 
      { 
        center: [69.34328546, 88.21759563], 
        name: "МАОУ «Гимназия № 4»(корпус №1)" 
      }, 
      { 
        center: [69.34301272, 88.21544986], 
        name: "МАОУ «Гимназия № 4»(корпус №2)" 
      }, 
      { 
        center: [69.34676615, 88.21196658], 
        name: "МБОУ «Гимназия №5»(корпус №1)" 
      }, 
      { 
        center: [69.34274431, 88.23068347], 
        name: "МБОУ «Гимназия №5»(корпус №2)" 
      }, 
      { 
        center: [69.35467955, 88.18355100], 
        name: "МБОУ «Гимназия № 7»(корпус №1)" 
      }, 
      { 
        center: [69.35375575, 88.18524616], 
        name: "МБОУ «Гимназия № 7»(корпус №2)" 
      }, 
      { 
        center: [69.35096378, 87.76028646], 
        name: "МБОУ «Гимназия №11»" 
      }, 
      { 
        center: [69.49001555, 88.38055567], 
        name: "МАОУ «Гимназия №48»" 
      } 
    ] 
  }, 
];
body { 
  margin: 0 auto; 
  padding: 0; 
  border: 0; 
  font-size: 100%; 
  font: inherit; 
  vertical-align: baseline; 
  position: relative; 
  line-height: 1; 
  -webkit-background-size: cover; 
  /* Для хрома */ 
  -moz-background-size: cover; 
  /* Для лисы*/ 
  -o-background-size: cover; 
  /* Для оперы*/ 
  -ms-background-size: cover; 
  /* Для ИЭ*/ 
  background-size: cover; 
  /* Для закрипления*/ 
} 
 
div { 
  box-sizing: border-box; 
} 
 
#page-wrapper { 
  width: 99.7%; 
  font: 100%/1.4em, Helvetica, Arial, sans-serif; 
  margin: 0; 
  padding: 0; 
} 
 
header { 
  width: 98%; 
  min-height: 202px; 
  /*border*/ 
  border-top: 22px solid #000; 
  border-bottom: 13px solid #000; 
  border-left: 21.5px solid #000; 
  border-right: 22px solid #000; 
  margin: 0 auto; 
  /*border ends*/ 
} 
 
.container { 
  max-width: 800px; 
  margin: 0 auto; 
} 
 
.title2 { 
  margin-top: 4px; 
  margin-left: 0px; 
  padding-right: 14px; 
  font-size: 36px; 
  font-family: Impact, sans-serif; 
  color: #000000; 
  text-shadow: 0px 4px rgba(0, 0, 0, .34); 
  text-align: center; 
} 
 
h1 { 
  font-size: 17px; 
  font-family: Lobster, sans-serif; 
  letter-spacing: 1px; 
  font-weight: normal; 
  color: #fff; 
  text-align: center; 
  margin-top: 2px; 
  margin-right: 8px; 
} 
 
.title1 { 
  font-size: 18px; 
  color: #000000; 
  font-family: Impact, sans-serif; 
  text-shadow: 1px 0.5px 3px rgba(255, 255, 255, 0.6); 
  background-color: #666666; 
  -webkit-background-clip: text; 
  -moz-background-clip: text; 
  background-clip: text; 
  letter-spacing: -0.55px; 
  text-align: center; 
  margin-top: 0.5px; 
  margin-left: 0px; 
  padding-right: 3px; 
} 
 
#blok1 { 
  border: 1px solid red; 
  width: 700px; 
  height: 1450px; 
  margin: 0px 100px 100px; 
  float: right; 
  padding: 3; 
} 
 
#blok2 { 
  border: 1px solid red; 
  width: 700px; 
  height: 1450px; 
  margin: 0px 100px 100px; 
  padding: 3; 
} 
 
 
/* Оформление меню (начало)*/ 
 
#menu { 
  list-style: none; 
  padding: 0px; 
  color: #04b; 
  /* Цвет ссылки */ 
} 
 
#menu a { 
  tex-decoration: none; 
  border-bottom: dashed 1px; 
} 
 
.menu a:hover { 
  background: #faf3d2; 
  /* Цвет фона под ссылкой */ 
  color: #800000; 
  /* Новый цвет ссылки */ 
  border: 1px dashed #634f36/* Рамка вокруг ссылки */ 
} 
 
#submenu { 
  list-style: none; 
  margin: 0 0 0 10px; 
  padding: 0; 
} 
 
#footer { 
  width: 100%; 
  height: 30px; 
  background: #5d5d5d; 
  margin: 0 auto; 
  bottom: 0px; 
  padding: 0 50px; 
} 
 
#footer h1 { 
  text-align: center; 
  font-size: 18px; 
} 
 
.submenu li { 
  font-size: 80%; 
} 
 
a { 
  color: #000000; 
  /* Цвет ссылки */ 
  text-decoration: none; 
  /* Убираем подчеркивание у ссылок */ 
} 
 
a.active { 
  color: #000; 
} 
 
a:hover { 
  color: #f50000; 
  /* Цвет ссылки при наведении на нее курсора мыши */ 
} 
 
 
/* Оформление меню (конец)*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trancitional//EN"  
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>Интерактивная карта</title> 
 
  <style type="text/css"> 
    body { 
      background-color: #87cefa; 
      background-size: auto; 
      background-position: absolute; 
    } 
     
    a { 
      color: #000000; 
    } 
  </style> 
  <!-- Подключаем API  карт 2.x  --> 
  <script src="https://api-maps.yandex.ru/2.1/?lang=ru-RU" type="text/javascript"></script> 
  <script src="https://yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script> 
  <script src="maps.js" type="text/javascript"></script> 
  <link rel="stylesheet" href="my.css" type="text/css" /> 
</head> 
 
<body> 
  <div id="page-wrapper"> 
    <header class="clearfix"> 
      <div id="container"> 
        <div id="header"> 
          <div class="title2">Интерактивная карта</div> 
          <div class="title1"> 
            <a href="http://" target="_blank"> 
              <h1>Программы</h1> 
            </a> 
          </div> 
          <div id="sidebar"> 
            <div id="blok1"> 
              <div id="menu">Учреждения</div> 
            </div> 
          </div> 
          <div id="content"> 
            <div id="blok2"> 
              <div id="map1" style="margin: 0px 50px 50px; width: 600px; height: 300px; padding: 0;"> 
                <h4 align="center">Норильск</h4> 
              </div> 
              <div id="map2" style="margin: 0px 50px 50px; width: 600px; height: 300px; padding: 0;"> 
                <h4 align="center">Кайеркан</h4> 
              </div> 
              <div id="map3" style="margin: 0px 50px 50px; width: 600px; height: 300px; padding: 0;"> 
                <h4 align="center">Талнах</h4> 
              </div> 
              <div id="map4" style="margin: 0px 50px 50px; width: 600px; height: 300px; padding: 0;"> 
                <h4 align="center">Снежногорск</h4> 
              </div> 
            </div> 
          </div> 
        </div> 
        <div id="footer"> 
          <div> 
            <h1 style="text-align: center;"><a href="http://" target="_blank">&copy; Управление</a></h1> 
          </div> 
        </div> 
      </div> 
</body> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте termobud.com.ua
ТОП-10
READ ALSO
Скрывать input если пустой
CSS

Скрывать input если пустой

Подскажите как скрывать input если он пустой

 223
Как сделать выплывающее меню
CSS

Как сделать выплывающее меню

Привет!У меня есть сайт и на нем есть сайдбар и при нажатии на один с блоков должна плавно выежжать вниз менюЯ смотрел как это сделать в интернете...

 303
Изменение значения в инпуте через JS
CSS

Изменение значения в инпуте через JS

Доброго времени суток, поясните, пожалуйстаИмеется форма

 253
Фон страницы в виде диагональных линий
CSS

Фон страницы в виде диагональных линий

Для страницы сайта есть фоновая картинка в виде диагональных линийЗадавал ей background-repeat, но тогда стыковка заметна

 266