样式化谷歌地图上的单灰色瓷砖

Question

我的Google地图中的所有功能都可以正常使用，但总会有一个无法正确加载的磁贴。它通常是右下角或左上角，但有时它恰好位于中间。触发＆＃34;调整大小＆＃34;即使在添加超时后，事件也无法解决问题。你可以拖动地图，某处总是有一块灰色的瓷砖。

我认为这与样式化的地图有关，因为我们之前已经编写了数十个没有样式的Google地图，并且从未遇到过这个问题。然而，它也发生在一张没有样式的地图上。

Mac上的Chrome，Firefox和Safari，iOS上的Safari都有相同的行为。

以下是制作中的地图：brytecore.com/contact-us。这是脚本：

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

提前致谢。

Answer 1

灰色区域的出现很可能是由contact.min.css文件中声明的以下css规则引起的：

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

由于指定的规则隐藏了图像磁贴，因此在删除之后，所有磁贴都将正确呈现。

修改后的示例

＆＃13;

＆＃13;

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

＆＃13;

.inside-page-footer {
    position: relative;
    max-width: 400px;
    padding-bottom: 20px;
    margin: 0 auto;
    overflow: hidden;
    visibility: visible
}

.inside-page-footer .google-map {
    width: 100%;
    height: 300px
}


.contact-iw p {
    margin: 5px 0 0;
    font-size: .95em;
    font-weight: 400;
    line-height: 1.3em;
    color: #aedbea
}

＆＃13;

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?sensor=false&#038;ver=4.2.2'></script>
<div class="inside-page-footer">
   <div class="google-map" id="map"></div>
</div>

＆＃13;

＆＃13;

＆＃13;