Javascript 没有地图显示，即使是简单的代码

我试图制作一张地图，在用户位置上添加一个标记（附带一个搜索框），但即使我的Javascript看起来合法，我也无法找出问题所在

背景资料： 我刚刚开始学习，用CSS解释了很多不必要的div。代码似乎没有问题，不管是CSS还是Javascript，但地图仍然没有显示在屏幕上。不幸的是，当有一个标准的中心（用cordinates设置）时，地图已经起作用了，代码也消失了

如果需要更多信息和/或以其他方式提供，请让我知道。有一个用于测试的工作代码段。只需单击“运行代码段”

功能初始化（位置）{
var location=new google.maps.LatLng（position.coords.lation，position.coords.longitude）；
变量设置={
中心：位置，
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），设置）；
var marker=new google.maps.marker({
位置:位置,，
地图：地图，
标题：“标记”
});
}
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（初始化）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）
.mapContent{
填充：0；
高度：500px；
填充：0；
保证金：60像素自动；
}
.mapContainer{
宽度：830px；
填充：0；
保证金：0自动；
}
谷歌地图分部{
高度：500px；
宽度：500px；
浮动：左；
边界半径：250px；
右边距：30px；
}
分区搜索框{
浮动：左；
高度：400px；
宽度：300px；
背景：白色；
边缘顶部：50px；
}
#浮动面板{
z指数：5；
背景色：暗色；
填充物：5px；
文本对齐：居中；
字体系列：“机器人”，“无衬线”；
线高：30px；
左侧填充：10px；
边界半径：5px；
}
您的页面上有以下错误：

“未捕获引用错误：未定义google”

请记住，在文档加载完成后无法加载API，您需要异步加载

此外，您可能忘记添加api URL引用：

看看这把小提琴，一切都很完美：


启用导航的代码：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(initialize);
}

google.maps.event.addDomListener(window, 'load', initialize);

所有东西似乎都在头标签旁边，比如maps.googleapis.com/maps/api/js“>实际上它在浏览器中不起作用。你能在我的代码中显示它放在哪里吗，因为我真的不明白它为什么不起作用。