Cara Menghapus Background Putih Info Window Pada Google Maps

Pada tutorial Google Maps dalam merubah style (gaya) di Info Window kita menemukan bahwa secara default Info Window yang di kostum tetap memiliki style bawaan google yaitu background putih. Dengan masih adanya background putih ini tentu Info Window yang kita kostum tetap masih kurang menarik dan terlihat juga memberikan jarak terhadap element di dalamnya. Lebih jelasnya dari yang saya maksud dapat kembali melihat tutorial Merubah Style Konten Info Window pada Google Maps.

Lalu bagaimana cara Menghapus Background Putih Info Window yang dimaksud? Caranya sangat mudah, kita hanya perlu menambahkan beberapa style css di dalam halaman kita. Sebenarnya tidak sepenuhnya kita menghapus, kita hanya menyembunyikan nya saja dari yang terlihat. Pada tutorial Menghapus Background Putih Info Window saya tetap menggunakan contoh file html pada tutorial sebelumnya.

Demo Remove Background

Sebelumnya karena kita ingin mengkostum menggunakan javascript, sangat disarankan anda harus meletakan jQuery di dalam baris program. Tambahkan pada baris setelah </head> pada struktur html script, saya menggunakan jQuery v 1.11.1.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Sebelumnya pada baris 13 di bagian style merupakan untuk footer, tambahkan baris style berikut :

.gm-style-iw {
          width: 368px !important;
          top: 15 !important;
          left: 10 !important;
         box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
         border: 1px solid rgba(72, 181, 233, 0.6);
         border-radius: 2px 2px 0 0;
      }

Selanjutnya tambahkan script berikut tepat didalam marker.Listener , perhatikan script berikut dan bandingkan pada script sebelum nya, pada tutorial kostumisasi script ini terdapat pada baris 41-43.

marker.addListener('click',function() {
   infoWindow.open(map,marker);
        var iwOuter = $('.gm-style-iw');
        var iwBackground = iwOuter.prev();
        iwBackground.children(':nth-child(2)').css({'display' : 'none'});
        iwBackground.children(':nth-child(4)').css({'display' : 'none'});
        iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 201px !important;'});
        iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 2px 6px', 'z-index' : '1'});
        var iwCloseBtn = iwOuter.next();
        iwCloseBtn.css({opacity: '1', right: '30px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'});
        if($('.iw-content').height() < 140){
          $('.iw-bottom-gradient').css({display: 'none'});
        }
        iwCloseBtn.mouseout(function(){
          $(this).css({opacity: '1'});
        });
   });

Hasil yang diperoleh seperti gambar dibawah ini, dan semua background putih sudah hilang.

Gambar 1

Penjelasan

Baris css yang ditambah adalah baris css untuk background , secara default google memiliki class gm-style-iw atau Google Maps Style Info Window dan style ini dapat kita kostum sendiri. Namun tidak semua akses dapat kita peroleh dalam mengkostum google maps, terutama develop yang hanya menggunakan google maps API biasa. 

Pada baris syntak di java script diambil class gm-style-iw dengan JQuery, dan menimpa style default dengan style yang baru saja di kostum dengan memanfaatkan variable iwBackground untuk elemen sebelumnya. Lalu manfaatkan variabel baru untuk close button dengan next() dalam metode JQuery.