Google Haritalar: Özel bir InfoWindow nasıl oluşturulur?

Bir harita işaretçisi için varsayılan Google Haritalar InfoWindow çok yuvarlaktır. Kare köşeli özel bir InfoWindow'u nasıl oluşturabilirim?

DÜZENLE Etrafta biraz avlandıktan sonra, bu en iyi seçenek gibi görünüyor:

https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

Çevrimiçi tüplü dalış günlük kaydı için bir web sitesi olan Dive Seven'da kullandığım bu InfoBubble'ın özelleştirilmiş bir sürümünü görebilirsiniz . Şöyle görünüyor:

Burada daha fazla örnek var . Bununla birlikte, kesinlikle ekran görüntünüzdeki örnek kadar güzel görünmüyorlar.

Yalnızca jquery kullanarak tüm InfoWindow'u değiştirebilirsiniz ...

var popup = new google.maps.InfoWindow({
    content:'<p id="hook">Hello World!</p>'
});

Burada <p> öğesi gerçek InfoWindow'a bir kanca görevi görecek. Domready ateşlendiğinde, eleman aktif hale gelecek ve javascript / jquery gibi kullanılarak erişilebilir olacaktır $('#hook').parent().parent().parent().parent().

Aşağıdaki kod, InfoWindow çevresinde 2 piksellik bir kenarlık ayarlar.

google.maps.event.addListener(popup, 'domready', function() {
    var l = $('#hook').parent().parent().parent().siblings();
    for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
            $(l[i]).css('border-radius', '16px 16px 16px 16px');
            $(l[i]).css('border', '2px solid red');
        }
    }
});

Yeni bir CSS sınıfı ayarlamak veya sadece yeni bir öğe eklemek gibi her şeyi yapabilirsiniz.

İhtiyacınız olanı elde etmek için elementlerle oynayın ...

InfoBox'ı gelişmiş şekillendirme için mükemmel buldum.

Bir InfoBox , google.maps.InfoWindow gibi davranır , ancak gelişmiş stil için birkaç ek özelliği destekler. Bir InfoBox, bir harita etiketi olarak da kullanılabilir. Bir InfoBox ayrıca google.maps.InfoWindow ile aynı olayları tetikler .

Sayfanıza http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js ekleyin

Bilgi penceresini biçimlendirmek, vanilya javascript ile oldukça basittir. Bunu yazarken bu konudaki bazı bilgileri kullandım. İe'nin önceki sürümlerindeki olası sorunları da hesaba kattım (her ne kadar onlarla test etmemiş olsam da).

var infowindow = new google.maps.InfoWindow({
  content: '<div id="gm_content">'+contentString+'</div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
  var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
  el.firstChild.setAttribute('class','closeInfoWindow');
  el.firstChild.setAttribute('title','Close Info Window');
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.setAttribute('class','infoWindowContainer');
  for(var i=0; i<11; i++){
    el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
    el.style.display = 'none';
  }
});

Kod, içeriği tutmak için kimliğe sahip bir div kullanarak her zamanki gibi bilgi penceresi oluşturur (eklentilere, özel katmanlara veya büyük koda gerek yoktur). Bu, sisteme, basit bir harici stil sayfasıyla işlemek üzere doğru öğeleri elde etmek için kullanabileceğimiz bir kanca verir.

İçerisindeki yakın bilgi penceresi görüntüsü ile div'e bir kanca vermek gibi şeyleri işleyen (kesinlikle gerekli olmayan) birkaç ekstra parça vardır.

Son döngü, işaretçi okunun tüm parçalarını gizler. İçeride şeffaflık olmasını istediğim için buna ihtiyacım vardı ve ok önüme çıktı. Elbette, kanca ile, ok görüntüsünü seçtiğiniz bir png ile değiştirmek için kodu değiştirmek de oldukça basit olmalıdır.

Eğer jquery olarak değiştirmek istiyorsanız (neden yapacağınız hakkında hiçbir fikriniz yok) o zaman bu oldukça basit olmalıdır.

Genelde bir javascript geliştiricisi değilim, bu yüzden herhangi bir düşünce, yorum, eleştiri hoş geldiniz :)

Aşağıdaki kod parçası size yardımcı olabilir.

var infowindow = new google.maps.InfoWindow();
 google.maps.event.addListener(marker, 'mouseover', (function(marker) {
            return function() {
                var content = address;
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
          })(marker));

İşte bunu başarmama yardımcı olan < Google haritalarında mükemmel yakınlaştırmayla birden fazla adres nasıl bulunur> makalesi . JS Fiddle bağlantısı ve eksiksiz örnek için buna başvurabilirsiniz.

FWIX.com'un bunu özellikle nasıl yaptığından emin değilim, ancak Özel Kaplamalar kullandıklarına bahse girerim .

Varsayılan stil penceresini kaldırmak için aşağıdaki kodu kullanabilirsiniz. İnforwindow için HTML kodunu kullanmaya başladıktan sonra:

var inforwindow = "<div style="border-radius: 50%"><img src='URL'></div>"; // show inforwindow image circle
marker.addListener('click', function() {
    $('.gm-style-iw').next().css({'height': '0px'}); //remove arrow bottom inforwindow
    $('.gm-style-iw').prev().html(''); //remove style default inforwindows
});

İşte google'daki mevcut bilgi penceresi örneğine dayanan saf bir CSS çözümü:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

#map *{
  overflow: visible;
}
#content{
  display: block;
  position: absolute;
  bottom: -8px;
  left: -20px;
  background-color: white;
  z-index: 10001;
}

Bu, küçük bilgi pencereleri için işe yarayacak hızlı bir çözümdür. Yardımcı olacaksa oy vermeyi unutmayın: P

Hatta kendi css sınıfınızı pop-up kapsayıcıya / tuval üzerine veya nasıl isterseniz ekleyebilirsiniz. Mevcut google maps 3.7, kodda popup div kapsayıcısının başına eklenen, canvas öğesi tarafından şekillendirilmiş pop-up'lara sahiptir. Yani googlemaps 3.7'de, pop-up'ın domready etkinliğiyle oluşturma sürecine girebilirsiniz:

var popup = new google.maps.InfoWindow();
google.maps.event.addListener(popup, 'domready', function() {
  if (this.content && this.content.parentNode && this.content.parentNode.parentNode) {
    if (this.content.parentNode.parentNode.previousElementSibling) {
      this.content.parentNode.parentNode.previousElementSibling.className = 'my-custom-popup-container-css-classname';
    }
  }
});

element.previousElementSibling, IE8'de mevcut değildir - bu nedenle, üzerinde çalışmasını sağlamak istiyorsanız, bunu izleyin .

olaylar ve daha fazlası için en son InfoWindow referansını kontrol edin ..

Bunu bazı durumlarda en temiz buldum.

Sanırım bulduğum en iyi cevap burada: https://codepen.io/sentrathis96/pen/yJPZGx

Bunun için kredi alamıyorum, google maps bağımlılığını gerçekten yüklenecek şekilde düzeltmek için bunu başka bir codepen kullanıcısından çatalladım

Çağrıyı not edin:

InfoWindow() // constructor