Вкладки Google Maps API v3 и jQuery-UI - PullRequest
Новая
       20

Вкладки Google Maps API v3 и jQuery-UI

0 голосов
/ 10 октября 2010

Я использую новый v3 API Карт Google.По сути, у меня проблема в том, что у меня есть Google Map во вкладках пользовательского интерфейса jQuery.Карта не находится на первой вкладке, поэтому вы должны щелкнуть по вкладке, чтобы просмотреть карту, но она не всегда отображается правильно.Т.е. иногда изображения карты размещаются неправильно.

У меня была эта проблема, когда я использовал v2 API, но мне удалось решить проблему, инициализировав мою Карту следующим образом: 

map = new GMap2(document.getElementById("map"),{size:new GSize(500,340)});

К сожалению, это не работает в v3.Я посмотрел на предложения в этой теме: Проблемы с Google Maps API v3 + jQuery UI Tabs

У меня ничего не получалось, но я использовал один из обходных путей, который я инициализировалфункция карты при загрузке вкладки: 

$(function()
{
    $("#tabs-container").tabs({show: function(event, ui)
    {
        if(ui.panel.id == "viewmap")
        {
            mapiInitialize();
        }
    }});
});

Это все хорошо, но я предпочитаю, чтобы карта была "там", когда пользователь нажимает на вкладку.Иногда загрузка карты занимает несколько секунд, и все, что видит пользователь за это время, это простой серый фон - какой-то индикатор загрузки мог бы помочь.

Так есть ли у кого-нибудь какие-либо предложения?Моя разметка и CSS выглядит следующим образом: 

<div id="tabs-container">
<ul>
    <li><a href="#details"><span>Details</span></a></li>

    <li><a href="#viewmap"><span>Location Map</span></a></li>

    <li><a href="#reviews"><span>Reviews (<?php echo $numrows; ?>)</span></a></li>
</ul>

<div id="details"><?php echo $details; ?></div>

<div id="viewmap" style="padding: 10px; border: 1px solid #A9A9A9;">
    <div id="map" style="height: 340px;"></div>
</div>

<div id="reviews"><?php echo $reviews; ?></div>

</div><!-- end tab-container -->

Ответы [ 3 ]

2 голосов
/ 16 февраля 2011

Попробуйте, когда вы инициализируете свои вкладки пользовательского интерфейса jQuery: 

$("#tabs-container").tabs({                    
    show: function(event, ui) {
        google.maps.event.trigger(map, 'resize');
    }                    
});

Примечание: вам нужно будет инициализировать карту перед инициализацией вкладок .

1 голос
/ 28 марта 2012

просто используйте 

map.setZoom( map.getZoom() );
1 голос
/ 12 октября 2010

После того, как вы переключитесь на вкладку с вызовом карты google.maps.events.trigger(map, 'resize');, она должна правильно отобразиться.

...