谷歌地图信息窗口的自定义样式（背景）

Question

我正在建立谷歌地图的地图，我有一个问题。我试图设计一些用户点击插件时打开的infowindow。我的问题是它实际上起作用，但它在窗口本身的父div上呈现出奇怪的效果（当有人在我的窗口上多次点击时，窗口显示一个奇怪的白色边框，这是背景的颜色我的div的父亲与一类gm-style-iw）。

我的代码如下：

我的javascript：

function initMap() { 

     var styledMapType=new google.maps.StyledMapType([{my custom style}]); 

     var mycompany = {lat: 44.348534, lng: -79.669197}; 

     var map = new google.maps.Map(document.getElementById('map'), { 
      center: mycompany, 
      zoom: 14, 
      scrollwheel: false, 
      mapTypeControl: false 
     }); 

     map.mapTypes.set('styled_map', styledMapType); 
     map.setMapTypeId('styled_map'); 

     var contentString = '<div class="iw-content">' + '<div class="iw-subTitle">My company </div>' + '<p>455 street</p>' + '<p>City, World</p>' + '<p>Canada, Postalcode</p>' + '</div>'; 

     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 

     var marker = new google.maps.Marker({ 
      position: mycompany, 
      map: map, 
      title: 'My company' 
     }); 



     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map,marker); 
     }); 

     google.maps.event.addListener(map, 'click', function() { 
      infowindow.close(); 
     }); 

     google.maps.event.addListener(infowindow, 'domready', function() { 

      var iwOuter = $('.gm-style-iw'); 

      var iwBackground = iwOuter.prev(); 

      iwBackground.children(':nth-child(2)').css({'background' : '#252525'}); 

      var iwmain = iwBackground.children(':nth-child(2)'); 

      iwBackground.children(':nth-child(4)').css({'display' : 'none'}); 

      var iwCloseBtn = iwOuter.next(); 

     }); 
    } 
    initMap(); 

我的CSS：

#map .gm-style-iw { 
    background-color: #252525; 
    padding: 2% 11%; 
} 
#map .iw-content p { 
    color: #a5a5a5; 
} 
#map .iw-subTitle { 
    color: white; 
    font-size: 16px; 
    font-weight: 700; 
    padding: 5px 0; 
} 

另外，我想在地图底部样式怪异的三角形是由于背景的原生色彩也是白色的。

我要添加图片为更好地解释我的问题

预先感谢您的任何帮助

Answer 1

您需要使用下面的CSS属性正确样式的信息窗口：

  /*style the box which holds the text of the information window*/ 
     .gm-style .gm-style-iw { 
      background-color: #252525 !important; 
      top: 0 !important; 
      left: 0 !important; 
      width: 100% !important; 
      height: 100% !important; 
      min-height: 120px !important; 
      padding-top: 10px; 
      display: block !important; 
     }  

     /*style the paragraph tag*/ 
     .gm-style .gm-style-iw #google-popup p{ 
      padding: 10px; 
     } 


     /*style the annoying little arrow at the bottom*/ 
     .gm-style div div div div div div div div { 
      background-color: #252525 !important; 
      margin: 0; 
      padding: 0; 
      top: 0; 
      color: #fff; 
      font-size: 16px; 
     } 

     /*style the link*/ 
     .gm-style div div div div div div div div a { 
      color: #f1f1f1; 
      font-weight: bold; 
     } 

的jsfiddle实施例：http://jsfiddle.net/hLenqzmy/18/