谷歌地图功能,但不显示地图
Google Map Functions but does not show map?
谷歌地图直到几周前工作正常。标记等显示,但地图图像没有,我只有一个白屏。另一个奇怪的事情是,缩放等按钮显示,但似乎缺少它们的样式。我可以像以前一样滚动页面,并且可以缩放等。我只是看不到地图图像。
我的控制台中没有显示任何错误。
感谢您对此的任何帮助。
这是我正在使用的代码
<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>
您需要
为 #map 元素添加高度:http://codepen.io/anon/pen/KVZPBp
#map {
height: 500px;
width: 100%;
}
偶然的机会,我从我的 css 中删除了它
img {
max-width: 100%;
max-height: 100%;
}
瞧,我的地图图像回来了。希望这对其他人有所帮助。感谢所有帮助过这个问题的人。
相关文章:
- 地图API没有't显示地图
- 单击按钮以突出显示地图标记 (Gmaps) - 如何
- 谷歌地图API没有;t显示地图,如果中心由javascript函数填充
- 将PHP集成到Javascript中,使用Google API显示地图标记
- IE中的谷歌地图API v3不显示地图或标记
- 数据映射不是't显示地图
- 谷歌地图隐藏并显示地图
- 在谷歌地图中显示地图标记内容的事件
- 映射:单击标记,显示地图旁边的内容
- 谷歌地图没有显示地图上的所有目的地标记,只有第一个和最后一个
- 如何在另一页上显示地图并全屏查看
- 谷歌地图 - 通过使用php检索纬度和纵向来显示地图和标记
- 单击时显示地图,然后滚动到地图
- 在 JavaScript 循环中显示地图标记的 JSON 解析数据
- 如何更新和显示地图对象
- 必应地图显示地图的左上角的北美
- 谷歌地图功能,但不显示地图
- 如何在选择html元素时高亮显示地图标记
- 获取用户's附近没有显示地图与谷歌地图api v3
- 显示地图的“切换街景地图的问题”