Wordpress 谷歌地图显示灰色条纹和扭曲的外观

出于某种原因，即使我的谷歌地图正在显示，地图上仍有奇怪的灰色条纹/线条（下图链接）

仅供参考，它使用PlacesAPI搜索位置

有人知道为什么会这样吗？以下是地图的代码：

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>
<script type="text/javascript">
    function search_map_init() {
        var args     = {
            disableDefaultUI : true,
            center           : new google.maps.LatLng(51.6948168, -0.6433884),
            mapTypeId        : google.maps.MapTypeId.ROADMAP,
            scrollwheel      : false,
            zoom             : 12,
            styles           : [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), args);

        var marker_url = {
            url        : 'IMG_URL',
            scaledSize : new google.maps.Size(48, 65)
        };

        var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('pac-input'));

        google.maps.event.addListener(searchBox, 'places_changed', function() {
            searchBox.set('map', null);

            var places = searchBox.getPlaces();

            var bounds = new google.maps.LatLngBounds();
            var i, place;
            for (i = 0; place = places[i]; i++) {
                (function(place) {
                    var marker = new google.maps.Marker({

                        position: place.geometry.location,
                        icon     : marker_url
                    });
                    marker.bindTo('map', searchBox, 'map');
                    google.maps.event.addListener(marker, 'map_changed', function() {
                        if (!this.getMap()) {
                            this.unbindAll();
                        }
                    });

                    bounds.extend(place.geometry.location);
                }(place));

                var new_address = $('#pac-input').val();
                var new_lat     = place.geometry.location.lat();
                var new_lng     = place.geometry.location.lng();

                $('input[name="post[meta_input][map][address]"]').val(new_address);
                $('input[name="post[meta_input][map][lat]"]').val(new_lat);
                $('input[name="post[meta_input][map][lng]"]').val(new_lng);
            }

            map.fitBounds(bounds);
            searchBox.set('map', map);
            map.setZoom(Math.min(map.getZoom(),12));
        });

        return map;
    }

    google.maps.event.addDomListener(window, 'load', search_map_init);
</script>

函数搜索\映射\初始化（）{
变量args={
disableDefaultUI:true，
中心：新google.maps.LatLng（51.6948168，-0.6433884），
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误，
缩放：12，
样式：[{“featureType”：“water”，“elementType”：“geometry”，“stylers”：[{“color”：“#E9E9”}，{“lightness”：17}，{“featureType”：“landscape”，“elementType”：“geometry”，“stylers”：[{“color”：“#f5f5f5”}，{“lightness”：20}，{“featureType”：“road.highway”，“elementType”：“geometry.fill”，“stylers”：“{“color”：“ffffff”}，{“lightness”：}，{“lightness”：}，{“道路.公路”，“元素类型”：“几何体.笔划”，“样式器”：[{“颜色”：“#ffffff”}，{“亮度”：29}，{“重量”：0.2}，{“特征类型”：“道路.干线”，“元素类型”：“几何体”，“样式器”：[{“颜色”：“#ffffff”}，{“亮度”：18}，{“特征类型”：“道路.局部”，“元素类型”：“几何体”，“样式器”：“{“颜色”：“{”ffffff”}，{“亮度”：16}，{elementType:“几何体”、“样式器”：[{“颜色”：“#F5F5”}、{“亮度”：21}、{“特征类型”：“点公园”、“元素类型”：“几何体”、“样式器”：[{“颜色”：“#dededede”}、{“亮度”：21}、{“元素类型”：“标签.文本.笔划”、“样式器”：[{“可见性”：“在”}、{“颜色”：“#ffffffff”}、{“亮度”：16}、{“元素类型.填充”标签、{36}颜色：“#333333”}，{“亮度”：40}，{“元素类型”：“标签.图标”，“样式器”：[{“可见性”：“关闭”}，{“特征类型”：“过渡”，“元素类型”：“几何体”，“样式器”：[{“颜色”：“#F2F2F2F2”}，{“亮度”：19}，{“特征类型”：“管理”，“元素类型”：“几何体.填充”，“样式器”：[{“颜色”：“FEFEFEFEFE”}，{“亮度”：20}，{“特征类型”}，{elementType:“geometry.stroke”，“stylers:[{“color”：“#fefefe”}，{“lightness”：17}，{“weight”：1.2}]}]
};
var map=new google.maps.map（document.getElementById（'map-canvas'），args）；
var marker_url={
url:'IMG_url'，
scaledSize:new google.maps.Size（48,65）
};
var searchBox=new google.maps.places.searchBox（document.getElementById（'pac-input'）；
map.controls[google.maps.ControlPosition.TOP_CENTER].push（document.getElementById（'pac-input'）；
google.maps.event.addListener（搜索框，'places_changed'，函数（）{
searchBox.set（'map'，null）；
var places=searchBox.getPlaces（）；
var bounds=new google.maps.LatLngBounds（）；
var i，地点；
for（i=0；place=places[i]；i++）{
（功能（地点）{
var marker=new google.maps.marker({
位置：place.geometry.location，
图标：标记url
});
marker.bindTo（'map'，searchBox，'map'）；
google.maps.event.addListener（标记'map_changed'，函数（）{
如果（！this.getMap（））{
这是；
}
});
扩展（place.geometry.location）；
}(地点);；
var new_address=$（'#pac input'）.val（）；
var new_lat=place.geometry.location.lat（）；
var new_lng=place.geometry.location.lng（）；
$（'input[name=“post[meta_input][map][address]”）.val（新地址）；
$（'input[name=“post[meta_input][map][lat]”）.val（new_lat）；
$（'input[name=“post[meta_input][map][lng]”）.val（new_lng）；
}
映射边界（bounds）；
searchBox.set（'map'，map）；
setZoom（Math.min（map.getZoom（），12））；
});
返回图；
}
google.maps.event.addDomListener（窗口“加载”，搜索映射初始化）；

---

注意：我已在上面的代码中将API键和图像URL替换为API_键和IMG_URL。

我在CSS中设置了最小宽度，这也影响了地图显示。问题已解决！

很可能是CSS问题，很可能与图像高度有关，但您尚未共享CSS。请提供答：你确实是对的。这是CSS中的一个图像问题。我从来没有真正把这两个问题联系起来。感谢大家的提醒，我发现了这个问题。我在某个部分设置了图像的最小宽度，这也影响了地图！