Google maps 样式化谷歌地图上的单一灰色平铺

在我的谷歌地图中，一切都很好，只是总有一个磁贴无法正常加载。它通常是右下角或左上角，但有时正好在中间。触发“调整大小”事件并不能解决问题，即使在添加超时后也是如此。你可以拖动地图，总有一个灰色瓷砖的地方

我认为这与样式化地图有关，因为我们之前已经编写了几十个未样式化的谷歌地图，从未遇到过这个问题。但是，它也发生在未设置样式的贴图上

在Chrome、Firefox和Mac上的Safari、iOS上的Safari中也有同样的行为

这是生产中的地图：。以下是脚本：

var map;

/**
 * Build the google map.
 */
function initialize_gmap() {
    var bc_latlng = new google.maps.LatLng( 33.912959, -84.359551 );
    var styles = [
        {
            featureType: 'road.highway',
            elementType: 'geometry',
            stylers: [
                {visibility: 'simplified'},
                {color: '#42d0ff'}
            ]
        }, {

        // bunch of stylers omitted for brevity

            featureType: 'poi.medical',
            elementType: 'labels.text',
            stylers: [
                {visibility: 'simplified'}
            ]
        }, {}
    ];

    var mapOptions = {
        mapTypeControlOptions: {
            mapTypeIds: [ 'Styled' ]
        },
        center: bc_latlng,
        zoom: 10,
        panControl: false,
        zoomControl: true,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: true,
        overviewMapControl: false,
        scrollwheel: false,
        mapTypeId: 'Styled'
    };

    if ( jQuery( 'body' ).hasClass( 'is_mobile' ) ) {
        mapOptions.draggable = false;
    }
    map = new google.maps.Map( document.getElementById( "map" ), mapOptions );
    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled'});
    map.mapTypes.set('Styled', styledMapType);

    var content = "<div class='contact-iw'><div class='contact-iw-title'>Brytecore, LLC</div><p>5775-D Glenridge Drive<br>Suite 425<br>Atlanta, GA 30328</p><p>(844) GO-BRYTE</p></div>";
    var infowindow = new google.maps.InfoWindow( {
        backgroundColor: 'rgb(57,57,57)',
        content: content,
        position: bc_latlng
    } );
    infowindow.open( map );
}

google.maps.event.addDomListener( window, 'load', initialize_gmap );
google.maps.event.addDomListener( window, 'resize', function () {
    var center = map.getCenter();
    google.maps.event.trigger( map, "resize" );
        map.setCenter( center );
    } );

var映射；
/**
*构建谷歌地图。
*/
函数初始化_gmap（）{
var bc_latlng=新的google.maps.latlng（33.912959，-84.359551）；
变量样式=[
{
功能类型：“道路.公路”，
elementType:“几何体”，
样式：[
{可见性：'简化'}，
{颜色：'#42d0ff'}
]
}, {
//为简洁起见，省略了一堆样式
功能类型：“poi.medical”，
elementType:“labels.text”，
样式：[
{可见性：'简化'}
]
}, {}
];
变量映射选项={
mapTypeControlOptions：{
MapTypeId:['Styled']
},
中心：卑诗省拉廷，
缩放：10，
泛控制：错误，
动物控制：对，
mapTypeControl:false，
scaleControl:false，
街景控制：对，
overviewMapControl:错误，
滚轮：错误，
mapTypeId:'已设置样式'
};
if（jQuery（'body'）.hasClass（'is_mobile'））{
mapOptions.draggable=false；
}
map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
var styledMapType=new google.maps.styledMapType（样式，{name:'Styled'}）；
map.mapTypes.set（'Styled'，styledMapType）；
var content=“Brytecore，LLC5775-D格伦里奇大道
425号套房，佐治亚州亚特兰大30328号（844）GO-BRYTE
”；
var infowindow=new google.maps.infowindow（{
背景颜色：“rgb（57,57,57）”，
内容:内容,，
职位：bc_latlng
} );
打开（地图）；
}
google.maps.event.addDomListener（窗口“加载”，初始化\u gmap）；
google.maps.event.addDomListener（窗口“调整大小”，函数（）{
var center=map.getCenter（）；
google.maps.event.trigger（map，“resize”）；
地图设置中心（中心）；
} );

---

提前感谢。

灰色区域的出现很可能是由

contact.min.css

文件中声明的以下css规则引起的：

#map.google-map>div.gm-style>div>div>div:last-child>div:first-child>div:last-child img {
    display: none
}

由于指定的规则隐藏图像分幅，因此删除它后，所有分幅都将正确渲染

修改示例

var映射；
/**
*构建谷歌地图。
*/
函数初始化_gmap（）{
var bc_latlng=新的google.maps.latlng（33.912959，-84.359551）；
变量样式=[
{
功能类型：“道路.公路”，
elementType:“几何体”，
样式：[
{可见性：'简化'}，
{颜色：'#42d0ff'}
]
}, {
//为简洁起见，省略了一堆样式
功能类型：“poi.medical”，
elementType:“labels.text”，
样式：[
{可见性：'简化'}
]
}, {}
];
变量映射选项={
mapTypeControlOptions：{
MapTypeId:['Styled']
},
中心：卑诗省拉廷，
缩放：10，
泛控制：错误，
动物控制：对，
mapTypeControl:false，
scaleControl:false，
街景控制：对，
overviewMapControl:错误，
滚轮：错误，
mapTypeId:'已设置样式'
};
if（jQuery（'body'）.hasClass（'is_mobile'））{
mapOptions.draggable=false；
}
map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
var styledMapType=new google.maps.styledMapType（样式，{name:'Styled'}）；
map.mapTypes.set（'Styled'，styledMapType）；
var content=“Brytecore，LLC5775-D格伦里奇大道
425号套房，佐治亚州亚特兰大30328号（844）GO-BRYTE
”；
var infowindow=new google.maps.infowindow({
//背景颜色：“rgb（57,57,57）”，
内容:内容,，
职位：bc_latlng
});
打开（地图）；
}
google.maps.event.addDomListener（窗口“加载”，初始化\u gmap）；
google.maps.event.addDomListener（窗口“调整大小”，函数（）{
var center=map.getCenter（）；
google.maps.event.trigger（map，“resize”）；
地图设置中心（中心）；
});
。内页页脚{
位置：相对位置；
最大宽度：400px；
垫底：20px；
保证金：0自动；
溢出：隐藏；
可见性：可见
}
.内页页脚.谷歌地图{
宽度：100%；
高度：300px
}
.联系iw p{
保证金：5px0；
字体大小：.95em；
字体大小：400；
线高：1.3em；
颜色：#aedbea
}
Vadim（就这点而言，我在Chrome on Windows上发布的链接上看不到它，尽管它确实出现过一次）修复了它。该样式旨在隐藏信息窗口中的关闭图标，但不够具体。非常感谢你的帮助。