SORU
30 EYLÜL 2011, Cuma


Google Maps API v3: infowindow için Özel stiller

Diğer stackoverflow soru google maps referans ve örnekler çok denedim, ama benim infowindow özel stiller elde etmek mümkün olmamıştır.

in this other stackoverflow answer yapılanlar için çok benzer bir şey kullanıyorum

/Düzenlenebilir çalışıyor burada: http://jsfiddle.net/3VMPL/

Özellikle, yuvarlak yerine Kare köşeli olsun istiyorum.

CEVAP
2 EKİM 2011, Pazar


Hakkında Bilgikutusu eklentisi kullanarak her zamanki İnfowindow kullanmak yerine? jsfiddle example here a tam bir örnek koydum. Bilgikutusu hakkında ana şey, sayfanın html içinde bilgikutusu, css kullanarak nasıl göründüğünü üzerinde tam kontrol (ve gerekirse bazı javascript seçenekleri) vererek oluşturabilirsiniz. İşte bilgikutusu html:

<div class="infobox-wrapper">
    <div id="infobox1">
        Infobox is very easy to customize because, well, it's your code
    </div>
</div>

Fikir işte "infobox-wrapper" div olacak gizli (yani, ekran:yok senin css) ve javascript olacak başlatmak Bilgikutusu bir nesne verin ve bu başvuru için "bilgikutusu" (içindeki gizli sarıcı) gibi

infobox = new InfoBox({
    content: document.getElementById("infobox1"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                opacity: 0.75,
                width: "280px"
        },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
});

Bu mevcut seçeneklerden bazıları sadece bir örnek. Sadece gerekli anahtar content - bilgikutusu için referans. Infobox API docs tüm seçenekleri göz atın.

Ve bilgi penceresini açmak için:

google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
});

Ve ek Google examples here.

Ve daha Bilgikutusu esneklik göstermek için, this jsfiddle css olarak bir geçiş ile bir imajı var "bilgi kutusu".

Ve son bir ipucu:Sınıfı "" html. bilgikutusu kullanmayınBilgikutusu aslında oluşturulduğunda eklenti tarafından kullanılan ne yazık ki değil.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Awesome Toys TV

    Awesome Toys

    18 HAZİRAN 2014
  • Carlos Delgado

    Carlos Delga

    21 HAZİRAN 2011
  • iMasterful

    iMasterful

    11 EYLÜL 2009