Google Haritalar ile ilgili sorunlar v3 jQuery UI Sekmeleri API

SORU

15 EYLÜL 2009, Salı

Google Haritalar ile ilgili sorunlar v3 jQuery UI Sekmeleri API

Google Maps API, jQuery UI sekme içinde bir harita oluşturmak için kullanırken oldukça iyi bilinen, görünen bir takım sorunlar vardır. Sorular benzer sorunlar (here ** 14,) hakkında yayınlanan ÇOK gördüm ama çözüm yok sadece Maps API v2 için çalışmıyor gibi görünüyor. Kontrol ettim diğer kaynaklar here here, Googling kazmak elimden hemen hemen her şeyi ile birlikte.

Malzeme haritası çalışıyorum (API v3 kullanarak) karışık sonuçlar sekmesi. bir jQuery içine Her şey son sürüm 1.3.2, DV şu anda jQuery UI 1.7.2, Haritalar bilmiyorum () kullanıyorum.

Bu işaretleme ve 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);
}

Ve burada yok/çalışmıyor buldum işte (Maps API v3 için):

JQuery açıklandığı gibi off-sol tekniğini kullanarak Sekmeleri belgeleri (ve ben bağlantılı iki soruya cevap olarak) hiç çalışmıyor UI. Aslında, en iyi işleyen kod CSS .ui-tabs .ui-tabs-hide { display: none; } yerine kullanır.
Bir sekme içinde görüntülemek için bir harita almak için tek yol #map_canvas CSS genişlik ve yükseklik değerleri mutlak olarak ayarlamak için. Genişliğini değiştirme ve auto 100% yükseklik zaten başarıyla (mutlak genişlik ve yükseklik kullanarak) işlenen olsa bile görüntülemek için Haritayı neden olur.
Her yerde Haritalar API dışında belgelenmiş bulamadım, ama map.checkResize() artık işe yaramayacak. Bunun yerine, google.maps.event.trigger(map, 'resize') çağırarak yeniden boyutlandırma olayı var.
Harita işlevi tabsshow bir olay, doğru işlenen kendisi haritaya bağlı içinde başlatılmadı ancak denetimler ise en sade eksik.

Yani burada benim soru:

Herkesten aynı bu feat başarmak deneyimi olan var mı? Eğer öyleyse, nasıl aslında belgelenmiş hile Maps API v3 için çalışmıyor beri iş, ne anladın?
Ne sekme içeriği jQuery UI docs başı olarak Ajax kullanarak yükleme hakkında? Onunla oynamak için bir şansım olmadı ama tahminimce Haritalar daha çok kırar. İşe alma şansı (ya da denemeye değer değil)?
Haritayı nasıl mümkün olan en büyük alanı doldurmak yapabilirim? Bu sekmeyi doldurmak ve sayfa yeniden uyum için, çok üzerinde maps.google.com sonunda yaptıklarına şekilde istiyorum. Ama dediğim gibi, harita div mutlak genişlik ve yükseklik CSS tek uygulama ile sıkışmış gibi görünüyor.

Bu Haritalar API v3 jQuery sekmeler için tek belge olabilir eğer bu uzun soluklu olsaydı ama üzgünüm. Şerefe!

CEVAP

15 EKİM 2010, Cuma

Not: bu cevap geçersiz bir 3. parti aldı aslında içeriği, 3. parti editörü yapmaman gereken bir şey yerini düzenleyin. Ancak, sonuç Her iki sürümü şimdi aşağıda verilmiştir orijinal, bu yüzden daha yararlı olabilir:

Orijinal yazarı 2010, bir sonra gelen Anon versiyonu Anon tarafından Düzenle

google.haritalar.olay.(göster, '') resize;tetik göster.setZoom( göster.() getZoom );

tarafından önerilen A http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448 v2. checkResize için v3 yerine().

İğrenç - kötü google, kurabiye yok.

Kullanıcı Eugeniusz Fizdejko tam yeniden form 2012:

Bir işaretleyici eklerken bana işleri için:

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

google.maps.event.addListener(map, "idle", function(){
    marker.setMap(map);
});

Bunu Paylaş: