Problemy z Google Maps API v3 + jQuery UI Tabs

Question

Sep 15, 2009, 06:21 PM

google-maps google-maps-api-3 jquery jquery-ui-tabs

Problemy z Google Maps API v3 + jQuery UI Tabs

Podczas korzystania z interfejsu API Map Google do renderowania mapy w zakładce interfejsu użytkownika jQuery istnieje wiele problemów, które wydają się dość dobrze znane. Widziałem pytania SO dotyczące podobnych problemów (tutaj itutaj, na przykład), ale rozwiązania tam wydają się działać tylko dla v2 API Map. Inne referencje, które sprawdziłem, sątutaj itutaj, wraz z prawie wszystkim, co mogłem wykopać przez Googling.

Próbowałem wypchnąć mapę (używając v3 API) do karty jQuery z mieszanymi wynikami. Używam najnowszych wersji wszystkiego (obecnie jQuery 1.3.2, jQuery UI 1.7.2, nie wiem o Mapach).

To jest znacznik i 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>

i

$(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);
}

A oto co znalazłem, że działa / nie działa (dla Map API v3):

Korzystanie z techniki off-left, jak opisano w dokumentacji jQuery UI Tabs (iw odpowiedziach na dwa pytania, które połączyłem) nie działa w ogóle. W rzeczywistości najlepiej działający kod korzysta z CSS.ui-tabs .ui-tabs-hide { display: none; } zamiast.Jedynym sposobem na wyświetlenie mapy na karcie jest ustawienie szerokości i wysokości CSS#map_canvas być wartościami bezwzględnymi. Zmiana szerokości i wysokości naauto lub100% powoduje, że mapa nie jest wyświetlana w ogóle, nawet jeśli została już pomyślnie wyświetlona (przy użyciu bezwzględnej szerokości i wysokości).Nie mogłem go znaleźć w żadnym miejscu poza interfejsem API Map Google, alemap.checkResize() już nie będzie działać. Zamiast tego musisz wystrzelić zdarzenie zmiany rozmiaru, dzwoniącgoogle.maps.event.trigger(map, 'resize').Jeśli mapa nie jest zainicjowana wewnątrz funkcji powiązanej z atabsshow zdarzenie, sama mapa jest renderowana poprawnie, ale kontrolki nie są - większość z nich jest po prostu brakująca.

Oto moje pytania:

Czy ktoś inny ma doświadczenie w realizacji tego samego wyczynu? Jeśli tak, to w jaki sposób dowiedziałeś się, co faktycznie działa, ponieważ udokumentowane sztuczki nie działają w przypadku Map API v3?A co z ładowaniem zawartości karty za pomocą Ajaxu jak wDokumenty interfejsu użytkownika jQuery? Nie miałem okazji się z tym bawić, ale przypuszczam, że jeszcze bardziej złamie Mapy. Jakie są szanse na to, by zadziałało (czy nie warto próbować)?Jak sprawić, aby mapa wypełniła jak największy obszar? Chciałbym, aby wypełnił kartę i dostosował jej rozmiar do strony, tak jak to ma miejsce na maps.google.com. Ale, jak już powiedziałem, wydaje mi się, że utknąłem przy stosowaniu tylko bezwzględnej szerokości i wysokości CSS do mapy div.

Przepraszam, jeśli to było długie, ale może to być jedyna dokumentacja dla Map API v3 + zakładki jQuery. Twoje zdrowie!