Question

Google地图在几周前工作正常。标记等显示，但地图图像没有，我只有一个白色的屏幕。另一个奇怪的事情是缩放等按钮显示但似乎缺少他们的造型。我可以像以前一样在页面上滚动，也可以缩放等。我只是看不到地图图像。

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

感谢您提供任何帮助。

以下是我正在使用的代码

<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>

Answer 1

您需要为#map元素添加高度：http://codepen.io/anon/pen/KVZPBp

#map {
  height: 500px;
  width: 100%;
}

Answer 2

有机会我从我的css中删除了这个

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

瞧，我的地图图像又回来了。希望这有助于其他人。感谢所有为此提供帮助的人。

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

2 个答案: