Tabs and Yandex.Maps
Всё работает ура!
HTML
<div id="tabs">
<!-- Вкладки -->
<ul class="tabNavigation">
<li><a href="#first">М. Багратионовская</a></li>
<li><a href="#second" onclick="getMap2()">М. Кузнецкий Мост</a></li>
</ul>
<!-- Контейнеры содержимого -->
<div id="first">
<p class="contact-adress"><b>Наш адрес:</b> метро Багратионовская, улица Барклая дом 8, ТЦ "Горбушка", 1 этаж, 166 павильон</p>
<p class="contact-adress">Мы находимся в здании Рубин торгового центра "Горбушки", которое расположено вдоль улицы Барклая (не "Горбушкин Двор"!)</p>
<p class="contact-adress"><b>Как пройти от метро:</b> если на выходе из метро перекресток оказался по левую руку от Вас, то нужно перейти дорогу и повернуть направо, если перекресток по правую руку, то необходимо повернуть налево и пройти прямо около 100м. Перед Вами снова окажется небольшой перекресток. Переходите его. Слева увидите угловой вход в "Горбушкин Двор", Вам туда НЕ НАДО! Проходите расположенные слева ресторан "Шлягер", бизнес-центр "Рубин", "Кофеманию", арку, центральный вход в "Горбушку" (большие красные буквы "Горбушка"). Через 30м увидите треугольный выступ здания "Горбушки", прямо под ним вход, заходите, поворачиваете направо и через 3 павильона по правую руку будет наш 166 павильон.</p>
<div class="yandexMap" id="ymaps-map" style="width: 600px; height: 376px;"></div>
</div>
<div id="second">
<p class="contact-adress"><b>Наш адрес:</b> метро Кузнецкий Мост, улица Кузнецкий Мост дом 19</p>
<p class="contact-adress"><b>Как пройти от метро:</b> если на выходе из метро перекресток оказался по левую руку от Вас, то нужно перейти дорогу и повернуть направо, если перекресток по правую руку, то необходимо повернуть налево и пройти прямо около 100м. Перед Вами снова окажется небольшой перекресток. Переходите его. Слева увидите угловой вход в "Горбушкин Двор", Вам туда НЕ НАДО! Проходите расположенные слева ресторан "Шлягер", бизнес-центр "Рубин",...
CSS
#tabs {}
ul.tabNavigation { list-style: none; margin: 0; padding: 0; }
ul.tabNavigation li { display: inline; }
ul.tabNavigation li a { padding: 3px 9px; background-color: #aaaaaa; color: #000; text-decoration: none; }
ul.tabNavigation li a.selected,
ul.tabNavigation li a.selected:hover { background: #dfdfdf; color: #000; }
ul.tabNavigation li a:hover { background: #cccccc; color: #000; }
ul.tabNavigation li a:focus { outline: 0; }
#tabs div { padding: 5px; margin-top: 3px; border: 1px solid #aaaaaa; background: #cccccc; }
#tabs div h2 { margin-top: 0; }
JavaScript
window.onload = function()
{
var map = new ymaps.Map("ymaps-map", {center: [37.49966065266167, 55.742409980028505], zoom: 16, type: "yandex#map"});map.controls.add("zoomControl").add("mapTools").add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));map.geoObjects.add(new ymaps.Placemark([37.502463739852516, 55.741248120052795], {balloonContent: "Сервис-центр Remobi."}, {preset: "twirl#darkblueDotIcon"})).add(new ymaps.Polyline([[37.497936171035384, 55.74354800011415], [37.49978153083764, 55.741901784021984], [37.50224916313133, 55.74080023283674], [37.50304309699975, 55.74103022961327]], {balloonContent: "Маршрут"}, {strokeColor: "ff0000", strokeWidth: 5, strokeOpacity: 0.8}));
var map2 = new ymaps.Map("ymaps-map2", {center: [37.625000596604224, 55.76218558896047], zoom: 17, type: "yandex#map"});map2.controls.add("zoomControl").add("mapTools").add(new ymaps.control.TypeSelector(["yandex#map", "yandex#satellite", "yandex#hybrid", "yandex#publicMap"]));map2.geoObjects.add(new ymaps.Placemark([37.625774, 55.762237], {balloonContent: "Сервис-центр Remobi."}, {preset: "twirl#lightblueDotIcon"})).add(new ymaps.Polyline([[37.62425843371888, 55.76150310079587], [37.623566423793015, 55.76149402679763], [37.62353423728486, 55.762117103947], [37.62419406070251, 55.76209895621023], [37.624821697612006, 55.76204451294903], [37.62555662288208, 55.76191747837602], [37.62565854682463, 55.76214735015611], [37.62556735171813, 55.76228345780551], [37.62556735171813, 55.762368146768786], [37.625771199603264, 55.76235907296012], [37.625784610648324, 55.7622335517228]], {balloonContent: "Маршрут"}, {strokeColor: "ff0000", strokeWidth: 5, strokeOpacity: 0.5}));
var tabContainers = $('#tabs > div'); // получаем массив контейнеров
tabContainers.hide().filter(':first').show(); // прячем все, кроме первого
// далее обрабатывается клик по вкладке
$('#tabs ul.tabNavigation a').click(function () {
...