Существует ряд проблем, которые, как представляется, достаточно хорошо известны при использовании API Карт Google для отображения карты на вкладке пользовательского интерфейса jQuery. Я видел, что вопросы о подобных проблемах были опубликованы (здесь и здесь), но решения там похоже, работает только для v2 API Карт. Другие ссылки, которые я проверил, здесь и здесь, наряду с почти всем, что я мог бы выкопать через Гуглинг.
Я пытаюсь нанести карту (с помощью v3 API) на вкладку jQuery со смешанными результатами. Я использую последние версии всего (в настоящее время jQuery 1.3.2, jQuery UI 1.7.2, не знаю о Картах).
Это разметка и javascript:
<body>
<div id="dashtabs">
<span class="logout">
<a href="go away">Log out</a>
</span>
<!-- tabs -->
<ul class="dashtabNavigation">
<li><a href="#first_tab" >First</a></li>
<li><a href="#second_tab" >Second</a></li>
<li><a href="#map_tab" >Map</a></li>
</ul>
<!-- tab containers -->
<div id="first_tab">This is my first tab</div>
<div id="second_tab">This is my second tab</div>
<div id="map_tab">
<div id="map_canvas"></div>
</div>
</div>
</body>
и
$(document).ready(function() {
var map = null;
$('#dashtabs').tabs();
$('#dashtabs').bind('tabsshow', function(event, ui) {
if (ui.panel.id == 'map_tab' && !map)
{
map = initializeMap();
google.maps.event.trigger(map, 'resize');
}
});
});
function initializeMap() {
// Just some canned map for now
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map($('#map_canvas')[0], myOptions);
}
И вот что я нашел, что делает/не работает (для Maps API v3):
- Использование метода off-left, описанного в документации jQuery UI Tabs (и в ответах на два связанных мной вопроса), не работает вообще. Фактически, наиболее эффективный код использует CSS
.ui-tabs .ui-tabs-hide { display: none; }вместо этого. - Единственный способ получить карту, отображаемую на вкладке, - это установить ширину и высоту CSS
#map_canvasкак абсолютные значения. Изменение ширины и высоты наautoили100%приводит к тому, что карта вообще не отображается, даже если она уже была успешно отображена (с использованием абсолютной ширины и высоты). - Я не мог найти его документально за пределами API Карт, но
map.checkResize()больше не будет работать. Вместо этого вам нужно запустить событие изменения размера, вызвавgoogle.maps.event.trigger(map, 'resize'). - Если карта не инициализирована внутри функции, связанной с событием
tabsshow, сама карта отображается правильно, но элементы управления не являются - большинство из них просто отсутствуют.
Итак, вот мои вопросы:
- Есть ли у кого-нибудь еще опыт выполнения этого же умения? Если да, то как вы выяснили, что на самом деле будет работать, поскольку документированные трюки не работают для Maps API v3?
- Как насчет загрузки содержимого вкладки с помощью Ajax в соответствии с jQuery UI docs? У меня не было возможности поиграть с ним, но я предполагаю, что он еще больше сломает Карты. Каковы шансы заставить его работать (или это не стоит пытаться)?
- Как сделать карту заполнять максимально возможную область? Я бы хотел, чтобы он заполнил вкладку и адаптировался к изменению размера страницы, в основном так, как это было сделано на maps.google.com. Но, как я уже сказал, я, кажется, застрял в применении только абсолютной ширины и высоты CSS к карте div.
Извините, если это было длинным, но это может быть единственная документация для вкладок Maps API v3 + jQuery. Ура!