Javascript 未捕获的类型错误：无法读取 null 的属性“firstChild”（谷歌地图加载失败）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42917703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'firstChild' of null (Google maps failing to load)
提问by Calvin Ellington
I was wondering if someone would be able to lend me their knowledge involving the Google Maps API. I've read similar questions and still haven't been able to come up with an answer. As the title says the error showing up in my browser console is:
我想知道是否有人能够将他们与 Google Maps API 相关的知识借给我。我已经阅读了类似的问题，但仍然无法找到答案。正如标题所说，我的浏览器控制台中显示的错误是：
Uncaught TypeError: Cannot read property 'firstChild' of null
Uncaught TypeError: Cannot read property 'firstChild' of null
I understand that this means there is an issue with the way values are being passed around; Following is my relevant code snippets where sourcespoints to in Chrome:
我知道这意味着传递值的方式存在问题；以下是我sources在 Chrome中指向的相关代码片段：
// --- Global Variable
var map;
// --- View Model.
function AppViewModel() {
// Initial Map
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 39.305, long: -76.617},
zoom: 12
});
// --- Initalize Application.
function initApp() {
ko.applybindings(new AppViewModel());
}
The error appears to be thrown when Google Maps attempts to load. Does anyone have an idea as to what I'm doing wrong here? Thanks for any help offered.
当 Google 地图尝试加载时，似乎会抛出该错误。有没有人知道我在这里做错了什么？感谢您提供的任何帮助。
Html for reference:
html供参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bolton Hill Neighborhood Map</title>
<link rel="stylesheet" href="static/main.css">
<meta name="viewport" content"width=device-width, initial-scale=1">
</head>
<body>
<div class='map'>maps error</div>
<script src="./js/knockout.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/app.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&callback=initApp" onerror="errorHandler"></script>
</body>
</html>
回答by Hua Trung
I think center: {lat: 39.305, long: -76.617}, with longis not correct.
You should define latlng like this:
我认为center: {lat: 39.305, long: -76.617}，withlong是不正确的。
您应该像这样定义 latlng：
var latlng = new google.maps.LatLng(39.305, -76.617);
map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 12
});
and
和
Uncaught TypeError: Cannot read property 'firstChild' of null
未捕获的类型错误：无法读取 null 的属性“firstChild”
Error message usually occurs when the maps container does not exist:
当地图容器不存在时，通常会出现错误消息：
map = new google.maps.Map(document.getElementById('id_that_does_notexist'), {
map = new google.maps.Map(document.getElementById('id_that_does_notexist'), {
