Javascript 谷歌地图V3灰色瓷砖

我正在使用谷歌地图V3，一切都很好，期待灰色瓷砖的问题，我不知道如何解决它，我也尝试了

google.maps.event.trigger(map, "resize");

但它不起作用，或者我把它贴错了

当我尝试移动地图时，会出现灰色分片，仅渲染具有宽度和高度的地图窗口，其余部分为灰色，当我使用百分比时，整个地图为灰色，如何修复此问题

<script type="text/javascript">

    $(document).ready(function () {

        var styleArray = [{
            "featureType": "administrative.locality",
            "elementType": "labels.text.fill",
            "stylers": [{
                "color": "#365B6A"
            }]
        }, {
            "featureType": "road.highway",
            "elementType": "labels.text",
            "stylers": [{
                "visibility": "on"
            }]
        }, {
            "featureType": "landscape.man_made",
            "elementType": "geometry.fill",
            "stylers": [{
                "color": "#c4d3dc"
            }, {
                "weight": 0.1
            }]
        }, {
            "featureType": "landscape.man_made",
            "elementType": "geometry.stroke",
            "stylers": [{
                "color": "#ffffff"
            }]
        },

            {
                "featureType": "landscape.natural",
                "elementType": "all",
                "stylers": [{
                    "visibility": "simplified"
                }, {
                    "color": "#e1e9ee"
                }]
            }, {
                "featureType": "poi",
                "elementType": "all",
                "stylers": [{
                    "visibility": "off"
                }]
            }, {
                "featureType": "water",
                "elementType": "all",
                "stylers": [{
                    "visibility": "on"
                }]
            }, {
                "featureType": "transit.station",
                "elementType": "all",
                "stylers": [{
                    "visibility": "off"
                }]
            }, {
                "featureType": "road.highway",
                "elementType": "geometry.fill",
                "stylers": [{
                    "color": "#cfc824"
                }]
            }, {
                "featureType": "road.highway",
                "elementType": "geometry.stroke",
                "stylers": [{
                    "color": "#cfc824"
                }]
            }, {
                "featureType": "road.arterial",
                "elementType": "geometry.stroke",
                "stylers": [{
                    "color": "#4d6d7a"
                }, {
                    "weight": 0.5
                }]
            }, {
                "featureType": "road.arterial",
                "elementType": "labels.text.fill",
                "stylers": [{
                    "color": "#4d6d7a"
                }]
            }, {
                "featureType": "road.local",
                "elementType": "labels.text.fill",
                "stylers": [{
                    "color": "#4d6d7a"
                }]
            }, {
                "featureType": "road.highway",
                "elementType": "labels.text.fill",
                "stylers": [{
                    "color": "#385c6b"
                }]
            }];


        var submoem = '/media/image/marker.png';
        var primarymoem = '/media/image/marker-main.png';

        var geocoder;
        var markersArray = [];

        var locationsArray = [
            '{$Data.bwrk_gmap_substore1}',
            '{$Data.bwrk_gmap_substore2}',
            '{$Data.bwrk_gmap_substore3}',
            '{$Data.bwrk_gmap_substore4}'
        ];

        function plotMarkers() {
            for (var i = 0; i < locationsArray.length; i++) {

                codeAddresses(locationsArray[i]);

            }
        }


        geocoder = new google.maps.Geocoder();
        latlang = geocoder.geocode({
            'address': '{$Data.bwrk_gmap_mainstore}'
        }, function (results, status) {

            marker = new google.maps.Marker({
                map: map,
                icon: primarymoem,
                position: results[0].geometry.location
            });

            google.maps.event.trigger(map, 'resize');
            map.setCenter(results[0].geometry.location);



            markersArray.push(marker);
        });


        var mapOptions = {
            {if $Data.bwrk_gmap_style}styles: styleArray, {/if}
            center: latlang,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,

            mapTypeControl: {if $Data.bwrk_gmap_maptypecontrol}false{else}true{/if},
            scaleControl: {if $Data.bwrk_gmap_scaleControl}false{else}true{/if},
            zoomControl: {if $Data.bwrk_gmap_zoomControl}false{else}true{/if},
            panControl: {if $Data.bwrk_gmap_panControl}false{else}true{/if},
            navigationControl: {if $Data.bwrk_gmap_navigationControl}false{else}true{/if},
            streetViewControl: {if $Data.bwrk_gmap_streetViewControl}false{else}true{/if}
        };

        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        plotMarkers();

        function codeAddresses(address) {
            geocoder.geocode({
                'address': address
            }, function (results, status) {

                if (results.length > 0) {
                    new google.maps.Marker({
                        map: map,
                        icon: submoem,
                        position: results[0].geometry.location
                    });
                }
            });
        }
    });

    $.ajax({
        async: false,
        url: this.href,
        success: function (result) {
            console.log('success');
        },
        error: function (xhr, ajax, err) {
            console.error('error: ' + JSON.stringify(xhr));
            console.error(JSON.stringify(err));
        }
    });


</script>
<style>
     #map-canvas {
        width: 100%;
        height: 100%;
    }
</style>
<div id="map-canvas"></div>

$（文档）.ready（函数（）{
var styleArray=[{
“featureType”：“administration.locality”，
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“#365B6A”
}]
}, {
“功能类型”：“道路.公路”，
“elementType”：“labels.text”，
“造型师”：[{
“可见性”：“打开”
}]
}, {
“特色类型”：“景观。人造”，
“elementType”：“geometry.fill”，
“造型师”：[{
“颜色”：“#c4d3dc”
}, {
“重量”：0.1
}]
}, {
“特色类型”：“景观。人造”，
“elementType”：“geometry.stroke”，
“造型师”：[{
“颜色”：“#ffffff”
}]
},
{
“特色类型”：“景观。自然”，
“elementType”：“全部”，
“造型师”：[{
“可见性”：“简化”
}, {
“颜色”：“#e1e9ee”
}]
}, {
“featureType”：“poi”，
“elementType”：“全部”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“功能类型”：“水”，
“elementType”：“全部”，
“造型师”：[{
“可见性”：“打开”
}]
}, {
“功能类型”：“中转站”，
“elementType”：“全部”，
“造型师”：[{
“可见性”：“关闭”
}]
}, {
“功能类型”：“道路.公路”，
“elementType”：“geometry.fill”，
“造型师”：[{
“颜色”：“cfc824”
}]
}, {
“功能类型”：“道路.公路”，
“elementType”：“geometry.stroke”，
“造型师”：[{
“颜色”：“cfc824”
}]
}, {
“功能类型”：“道路干线”，
“elementType”：“geometry.stroke”，
“造型师”：[{
“color”：“#4D7A”
}, {
“重量”：0.5
}]
}, {
“功能类型”：“道路干线”，
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“4d6d7a”
}]
}, {
“功能类型”：“road.local”，
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“4d6d7a”
}]
}, {
“功能类型”：“道路.公路”，
“elementType”：“labels.text.fill”，
“造型师”：[{
“颜色”：“385c6b”
}]
}];
var submoem='/media/image/marker.png'；
var primarymoem='/media/image/marker main.png'；
var地理编码器；
var-markersArray=[]；
变量位置数组=[
“{$Data.bwrk_gmap_substore1}”，
“{$Data.bwrk_gmap_substore2}”，
“{$Data.bwrk_gmap_substore3}”，
“{$Data.bwrk_gmap_substore4}”
];
函数plotMarkers（）{
对于（变量i=0；i0）{
新的google.maps.Marker({
地图：地图，
图标：submoem，
位置：结果[0]。几何体。位置
});
}
});
}
});
$.ajax({
async:false，
url:this.href，
成功：功能（结果）{
console.log（'success'）；
},
错误：函数（xhr、ajax、err）{
console.error（'error:'+JSON.stringify（xhr））；
console.error（JSON.stringify（err））；
html, body {
    height: 100%;
}