我有一个页面来显示Google Map输出，并在页面上设置了一组（40+）个自定义标记（这是对现有系统的重新开发（但编码错误））。
我的问题是地图不输出，<div id='map'>中没有内容。在浏览器控制台上没有错误，因此在处理此问题方面有些茫然。
我已经注释掉了代码的各个部分（例如标记放置），但是这似乎也无法解决。
页面代码：
<!DOCTYPE html>
<head>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
/* mapTypeId: google.maps.MapTypeId.ROADMAP,*/
center: {lat: 52.345617, lng: 1.502666}
});
/** setMarkers(map);**/
/***
infowindow = new google.maps.InfoWindow({
content: "holding..."
});**/
}
/*** map still loads blank even when commenting all the below JS **/
/***
var places = [
// Name | lat | long | order | infoWindowDescr
['Dud Data', 52.3283777, 1.6753005, 12, 'some descriptive text']
<?php
//this PHP is a working Javascript array of marker data
// disabled for testing but seems ok.
//print $placesOutput;
?>
];
function setMarkers(map) {
// Adds markers to the map.
for (var i = 0; i < places.length; i++) {
var business = places[i];
var marker = new google.maps.Marker({
title: business[0],
position: {lat: business[1], lng: business[2]},
map: map,
zIndex: business[3]
});
google.maps.event.addListener(places, 'click', function (){
infowindow.setContent(business[4]);
infowindow.open(map, this);
})
}
}
**/
</script>
<script type="text/javascript" defer async
src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
</script>
</head>
<body>
<div id='map' style='height:500px;width:500px;'></div>
</body>
</html>
到目前为止，我已经尝试过：
源代码来自Google开发人员文档here和各种相关的Google页面。
多个标记
info window的代码来自另一个站点。我已经读过this question，this question和this question-第三个问题使我对代码重新排序，以便在建立函数之后对API进行引用。
我在浏览器（Firefox / Chrome）的控制台中没有错误；我似乎没有任何JavaScript错误。
我目前正在测试中没有PHP数据，因此问题2不适用于此处。
我的API密钥正常运行。
我尝试过重新排序Javascript代码以及将代码放在DIV元素之前/之后，但没有任何变化。
禁用places数组，setMarker函数和infoWindow函数也无法使其正常工作。
该页面上没有其他正在运行的JavaScript。
我敢肯定这很简单，但我看不到...。
最佳答案
我发现了问题。
正如预期的那样，这是非常愚蠢的。
页面上还有另一个不相关的元素，也具有id='map'引用。将地图javascript中的id引用更改为unidue id可以完全解决显示问题。