Google Maps: Bagaimana cara membuat InfoWindow kustom?

Google Maps InfoWindow default untuk penanda peta sangat bulat. Bagaimana cara membuat InfoWindow kustom dengan sudut persegi?

EDIT Setelah mencari-cari, ini tampaknya menjadi pilihan terbaik:

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

Anda dapat melihat versi kustom dari InfoBubble ini yang saya gunakan di Dive Seven, sebuah situs web untuk pencatatan selam scuba online . Ini terlihat seperti ini:

Ada beberapa contoh lagi di sini . Namun, mereka pasti tidak terlihat sebagus contoh di tangkapan layar Anda.

Anda dapat memodifikasi seluruh InfoWindow menggunakan jquery saja ...

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

Di sini elemen <p> akan bertindak sebagai pengait ke InfoWindow yang sebenarnya. Setelah domready diaktifkan, elemen tersebut akan menjadi aktif dan dapat diakses menggunakan javascript / jquery, seperti $('#hook').parent().parent().parent().parent().

Kode di bawah ini hanya menetapkan batas 2 piksel di sekitar InfoWindow.

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');
        }
    }
});

Anda dapat melakukan apa saja seperti menyetel kelas CSS baru atau hanya menambahkan elemen baru.

Bermain-main dengan elemen untuk mendapatkan apa yang Anda butuhkan ...

Saya menemukan InfoBox sempurna untuk gaya tingkat lanjut.

InfoBox berperilaku seperti google.maps.InfoWindow , tetapi mendukung beberapa properti tambahan untuk penataan gaya tingkat lanjut. Sebuah InfoBox juga dapat digunakan sebagai label peta. InfoBox juga mengaktifkan peristiwa yang sama seperti google.maps.InfoWindow .

Sertakan http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js di laman Anda

Styling jendela infow cukup mudah dengan javascript vanilla. Saya menggunakan beberapa info dari utas ini saat menulis ini. Saya juga memperhitungkan kemungkinan masalah dengan versi sebelumnya yaitu (meskipun saya belum mengujinya dengan mereka).

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';
  }
});

Kode membuat jendela masuk seperti biasa (tidak perlu plugin, hamparan khusus, atau kode besar), menggunakan div dengan id untuk menampung konten. Ini memberikan kaitan dalam sistem yang bisa kita gunakan untuk mendapatkan elemen yang benar untuk dimanipulasi dengan stylesheet eksternal sederhana.

Ada beberapa bagian tambahan (yang tidak benar-benar diperlukan) yang menangani hal-hal seperti memberikan hook ke div dengan gambar jendela info dekat di dalamnya.

Loop terakhir menyembunyikan semua bagian panah penunjuk. Saya membutuhkan ini sendiri karena saya ingin transparansi pada jendela masuk dan panah menghalangi. Tentu saja, dengan pengait, mengubah kode untuk mengganti gambar panah dengan png pilihan Anda juga harus cukup sederhana.

Jika Anda ingin mengubahnya menjadi jquery (tidak tahu mengapa Anda mau) maka itu seharusnya cukup sederhana.

Saya biasanya bukan pengembang javascript jadi semua pemikiran, komentar, kritik diterima :)

Potongan kode di bawah ini dapat membantu Anda.

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));

Berikut adalah artikel < Bagaimana menemukan beberapa alamat di peta google dengan zoom sempurna > yang membantu saya mencapai ini. Anda dapat merujuknya untuk menjalankan tautan JS Fiddle dan contoh lengkapnya.

Saya tidak yakin bagaimana FWIX.com melakukannya secara khusus, tapi saya berani bertaruh mereka menggunakan Hamparan Kustom .

Anda dapat menggunakan kode di bawah ini untuk menghapus jendela inforwindow default gaya. Setelah Anda dapat menggunakan kode HTML untuk inforwindow:

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

Berikut adalah solusi CSS murni berdasarkan contoh jendela infow saat ini di google:

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;
}

Ini adalah solusi cepat yang akan bekerja dengan baik untuk jendela info kecil. Jangan lupa untuk memberikan suara jika membantu: P

Anda bahkan dapat menambahkan kelas css Anda sendiri pada wadah popup / kanvas atau sesuai keinginan Anda. Google maps 3.7 saat ini memiliki popup yang ditata oleh elemen kanvas yang menambahkan wadah div popup dalam kode. Jadi di googlemaps 3.7 Anda bisa masuk ke proses rendering dengan acara domready popup seperti ini:

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 tidak ada di IE8- jadi jika Anda ingin membuatnya berfungsi, ikuti ini .

periksa referensi InfoWindow terbaru untuk acara dan banyak lagi ..

Saya menemukan ini paling bersih dalam beberapa kasus.

Saya pikir jawaban terbaik yang saya dapatkan ada di sini: https://codepen.io/sentrathis96/pen/yJPZGx

Saya tidak dapat mengambil kredit untuk ini, saya memotong ini dari pengguna codepen lain untuk memperbaiki ketergantungan peta google agar benar-benar memuat

Catat panggilan ke:

InfoWindow() // constructor