Javascript 谷歌地图功能，但不显示地图？

谷歌地图在几周前还运行良好。标记等显示，但地图图像没有，我只有一个白色屏幕。另一件奇怪的事情是，缩放等按钮显示，但似乎失去了他们的风格。我可以像以前一样在页面上滚动，可以缩放等。我只是看不到地图图像

我的控制台中没有显示任何错误

谢谢你在这方面的帮助

这是我正在使用的代码

<script src="https://maps.googleapis.com/maps/api/js"></script>

<script>
        function initialize() {
            var myLatLng = { lat: 53.466055, lng: -2.632223 };
            var mapCanvas = document.getElementById('map');
            var mapOptions = {
                center: new google.maps.LatLng(53.466051, -2.632229),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.SATELLITE,
                mapTypeControl: true,
                scrollwheel: false
            }

           var map = new google.maps.Map(mapCanvas, mapOptions)

            var markerHeadOffice = new google.maps.Marker({
                position: myLatLng,
                map: map,
                animation: google.maps.Animation.DROP,
                anchor: new google.maps.Point(30, 0),
                icon: '/Content/images/nic.png',
                title: 'Nichols plc, Newton-le-Willows, Merseyside'
            });
            var markerSouthWales = new google.maps.Marker({
                position: { lat: 51.6577671, lng: -3.8336524 },
                map: map,
                icon: '/Content/images/smallerNic.png',
                title: 'Nichols South Wales'
            });
            var markerSouth = new google.maps.Marker({
                position: { lat: 50.8541572, lng: -1.7532777 },
                map: map,
                icon: '/Content/images/smallerNic.png',
                title: 'Dayla Packaging'
            });
            var markerScotland = new google.maps.Marker({
                position: { lat: 56.1082775, lng: -3.9169815 },
                map: map,
                icon: '/Content/images/smallerNic.png',
                title: 'Nichols Dispense'
            });
            var markerManu = new google.maps.Marker({
                position: { lat: 51.9279492, lng: -2.5780233 },
                map: map,
                icon: '/Content/images/smallerNic.png',
                title: 'Manufacturing'
            });


            var contentString =
                '<div class="row" style="width:350px;height:150px;">'
                    //+ '<div class="col-sm-12">'
                   + '<div class="col-xs-4"><img src="/Content/images/mixed.png"/></div>'
                   + '<div class="col-xs-6">'
                   + 'Nichols plc<br/>'
                   + 'Laurel House<br/>'
                   + 'Woodland Park<br/>'
                   + 'Newton-le-Willows<br/>'
                   //+ '</div>'

                    + '</div></div>';
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            markerHeadOffice.addListener('click', function () {
                infowindow.open(map, markerHeadOffice);
            });

            markerHeadOffice.setMap(map);
            markerSouthWales.setMap(map);
            markerSouth.setMap(map);
            markerScotland.setMap(map);
            markerManu.setMap(map);
      }

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

函数初始化（）{
var Mylatng={lat:53.466055，液化天然气：-2.632223}；
var mapCanvas=document.getElementById（'map'）；
变量映射选项={
中心：新google.maps.LatLng（53.466051，-2.632229），
缩放：8，
mapTypeId:google.maps.mapTypeId.SATELLITE，
mapTypeControl:true，
滚轮：错误
}
var map=new google.maps.map（mapCanvas，mapOptions）
var markerHeadOffice=new google.maps.Marker({
职位：myLatLng，
地图：地图，
动画：google.maps.animation.DROP，
主播：新google.maps.Point（30,0），
图标：'/Content/images/nic.png'，
标题：“尼科尔斯股份有限公司，默西塞德郡牛顿·勒威洛斯”
});
var markerSouthWales=新的google.maps.Marker({
职位：{lat:51.6577671，lng:-3.8336524}，
地图：地图，
图标：'/Content/images/smallerNic.png'，
标题：“尼科尔斯南威尔士”
});
var markerSouth=新的google.maps.Marker({
职位：{lat:50.8541572，lng:-1.7532777}，
地图：地图，
图标：'/Content/images/smallerNic.png'，
标题：“Dayla包装”
});
var markerScotland=new google.maps.Marker({
位置：{lat:56.1082775，lng:-3.9169815}，
地图：地图，
图标：'/Content/images/smallerNic.png'，
标题：“尼科尔斯分发”
});
var markerManu=new google.maps.Marker({
位置：{lat:51.9279492，lng:-2.5780233}，
地图：地图，
图标：'/Content/images/smallerNic.png'，
标题：“制造业”
});
var contentString=
''
//+ ''
+ ''
+ ''
+“尼科尔斯公司
”
+“劳雷尔之家”

+“林地公园
”
+“Newton le Willows
”
//+ ''
+ '';
var infowindow=new google.maps.infowindow({
内容：contentString
});
markerHeadOffice.addListener（'click'，函数（）{
信息窗口。打开（地图、markerHeadOffice）；
});
markerHeadOffice.setMap（地图）；
markerSouthWales.setMap（map）；
markerSouth.setMap（map）；
markerScotland.setMap（地图）；
markerManu.setMap（map）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

您需要向#map元素添加高度：

---

很可能我从css中删除了这个

img {
    max-width: 100%;
    max-height: 100%;
}

---

瞧，我的地图图像回来了。希望这对其他人有帮助。感谢所有帮助过这件事的人

谢谢你的快速回复。我仍然有同样的问题。地图已经设置了高度（标记等和控件应该显示，而不是地图图像）。我确实复制了代码并将其粘贴到我的代码中，并按照建议设置了高度/宽度。因为它在钢笔里工作，而不是在我的代码里。标记没有显示你的笔，这可能是错误的来源吗？右下角的控件（+和-）和黄色人也没有正确渲染，框在那里，它们在单击时工作。另外，如果我拖动应该是小黄色人的东西，街景显示JQuery版本是否会导致这样的问题？所有对

[marker].setMap（map）

的调用都是多余的；创建每个标记时，您已经指定了map属性，这就是您需要做的全部工作：

map:map

img {
    max-width: 100%;
    max-height: 100%;
}