Существует ряд проблем, которые, как представляется, довольно хорошо известны при использовании API Карт Google для отображения карты на вкладке пользовательского интерфейса jQuery. Я видел так много вопросов о подобных проблемах (например, здесь и здесь ), но решения там, похоже, работают только для v2 API Карт. Другие ссылки, которые я проверил: здесь и здесь , а также почти все, что я мог найти в Google.
Я пытался вставить карту ( с использованием 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 (и в ответах на два связанных вопроса), вообще не работает. На самом деле, лучше функционирующий код использует 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 ? У меня не было возможности поиграть с этим, но я предполагаю, что это сломает Карты еще больше. Каковы шансы заставить его работать (или не стоит пытаться)?
- Как сделать так, чтобы карта занимала максимально возможную площадь? Мне бы хотелось, чтобы он заполнил вкладку и адаптировался к изменениям размера страницы, во многом так же, как это делается на maps.google.com. Но, как я уже сказал, я застрял с применением CSS абсолютной ширины и высоты к карте div.
Извините, если это было слишком скучно, но это может быть единственная документация для Карт API v3 + jQuery. Ура!