Javascript 谷歌地图API灰色屏幕-尝试了一切

我正致力于分析待售房屋，并试图让它们成为实物。我尝试过用其他帖子的解决方案修改代码，例如：修正缩放、坐标等，但没有成功。希望有人能解决这个问题，因为我已经做了一个多星期了

我正在使用Google Appscript WebApp，因此我不确定这是否是导致错误的原因

HTML

CSS

.map{
高度：400px；
宽度：100%；
display:none；//最初隐藏，直到displayMap（）函数运行
}

Javascript

//这里还有其他javascript代码，在下一个函数中生成“match”结果
document.getElementById（“分析”）.addEventListener（“单击”，显示地图）//单击表格时，将显示地图
var mapDisplay=document.getElementById（“地图显示”）；
让地图；
函数displayMap（）{
变量匹配={
地址：“达利街2126号”
浴室：1间
床位：2张
建成日期：1910年
城市：“洛杉矶”
纬度：34.0702443
lon：-118.2152669
批量：3920
mls:820000258
价格：41万
参考号：573
国家：“CA”
状态：“活动”
url:“http://www.redfin.com/CA/Los-Angeles/2126-Daly-St-90031/home/6945566"
邮政编码：90031
}
变量compsList=[
{地址：“汉考克街2315号”
浴室：2间
床位：3张
城市：“洛杉矶”
纬度：34.072444
lon：-118.2093106
批量：5500
mls：“RS20015393”
售价：680000
参考号：1505
销售类型：“过去销售”
旧金山：1169
soldDate:“周四2020年2月20日16:00:00 GMT-0800（太平洋标准时间）”
国家：“CA”
状态：“已售出”
url:“http://www.redfin.com/CA/Los-Angeles/2315-Hancock-St-90031/home/6946949"
邮政编码：90031
},
{地址：“汉考克街2333号”
浴室：2间
床位：3张
城市：“洛杉矶”
纬度：34.0724248
lon：-118.2093112
批量：5700
mls：“RS20015394”
售价：640000
参考编号：1510
销售类型：“过去销售”
旧金山：1171
soldDate:“周四2020年2月2日16:00:00 GMT-0800（太平洋标准时间）”
国家：“CA”
状态：“已售出”
url:“http://www.redfin.com/CA/Los-Angeles/2333-Hancock-St-90031/home/6946949"
邮政编码：90031
}
];
变量compIcon=”https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
变量选项={
缩放：8，
中心：{lat:match.lat，lng:match.lon}，
mapTypeId：“路线图”
}
map=新的google.maps.map（地图显示，选项）；
活动变量={
坐标：{lat:match.lat，lng:match.lon}，
内容：“”
}
addMarkers（active）//函数应将地图放在active周围的中心，并将“compList”项与beachflag一起放置
var comps=compsList.map（函数（c）{//函数更改数组以仅保留映射所需的键/对象
var重新格式化={
坐标：{lat:c.lat，lng:c.lon}，
内容：“，
图标：compIcon
}
返回重新格式化
}).forEach（函数（r）{addMarkers（r）}）//将要在地图上显示的两面海滩旗中的每一面连同中心一起发送
mapDisplay.style.display=“内联块”；
}
功能添加标记（道具）{
var marker=new google.maps.marker({
位置：道具，坐标，
地图：地图
})
如果（道具图标）{
marker.setIcon（道具图标）
}
如果（道具内容）{
var infoWindow=new google.maps.infoWindow({
内容：道具内容
});
marker.addListener（“单击”，函数（）{
信息窗口。打开（地图、标记）；
})
}

当我在

控制台上遇到错误时，我尝试重新设置
中心
，
位置
，
内容
到
设置中心
，
设置位置
，
设置内容
，但我认为这不对，所以我改变了谷歌文档的设置方式

我尝试过更改div的大小和溢出：display，但是没有。还有什么可以帮助我实现这一点的想法吗？我的控制台上没有显示错误，所以我没有从Google Maps API获得任何反馈…
@haby22。正如我在上面的评论中提到的，在你的选项中，你有“enter”而不是“center”。你还有“l”在您的中心设置中，以及在您的坐标中，代表经度的是“gn”，而不是“lng”

我还注意到match和comp对象缺少逗号，所以我将它们添加到示例中

我还读到，您可以将纬度和经度作为字符串传递，然后将其转换为解析为float

我注释掉了您的
var comps=match.comps.map
函数，因为我没有看到comps的代码

编辑我根据反馈重新添加了此代码，以供将来参考，并遵循比尔和特德的《卓越准则》。）

我也没有你点击的代码，所以我添加了一个H2，你可以点击地图来显示

不确定这是否是您正在寻找的，但这里什么也没有：



.地图{
高度：400px；
宽度：100%；
显示：无；
/*最初隐藏，直到displayMap（）函数运行*/
}
展示
//其他javascript代码在这里运行，在下一个函数中生成“match”结果
document.getElementById（“analysis”）.addEventListener（“单击”，显示映射）；//单击表时，将显示映射
让mapDisplay=document.getElementById（“地图显示”）；
让地图；
函数displayMap（）{
变量匹配={
地址：“达利街2126号”，
洗澡：1，
病床：2张，
建成日期：1910年，
城市：“洛杉矶”，
lat:“34.0702443”，
lon:“-118.2152669”，
批量：3920，
mls:820000258，
价格：41万，
参考号：573，
国家：“CA”，
状态：“活动”，
url:“http://www.redfin.com/CA/Los-Angeles/2126-Daly-St-90031/home/6945566",
邮政编码：90031，
}
变量compsList=[
{地址：“汉考克街2315号”，
洗澡：2，
病床：3张，
城市：“洛杉矶”，