googlemaps信息窗口的自定义样式(背景)

Question

我正在使用谷歌地图构建地图,我遇到了问题.我试图设置一个用户点击针脚时打开的信息窗口.我的问题是它实际上有效但它在窗口本身的父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/