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

280
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>

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

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

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

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

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

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

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

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

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

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

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

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

241