javascript Google 地图 API，未捕获的类型错误：无法读取 null 的属性“offsetWidth”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33770539/
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
Google map API, Uncaught TypeError: Cannot read property 'offsetWidth' of null
提问by Dongsong Wu
I try to make a button on my webpage once i press it, it will turn up a div box with a google map. But it doesn't work ! it turns up with javascript syntax Error"Uncaught TypeError: Cannot read property 'offsetWidth' of null" please helps!
我尝试在我的网页上创建一个按钮，一旦我按下它，它就会打开一个带有谷歌地图的 div 框。但它不起作用！它出现了 javascript 语法错误“未捕获的类型错误：无法读取 null 的属性 'offsetWidth'” 请帮助！
the chrome development tool, turning up with javascript syntax problems. This is my first time using Google map API to my webpage.
chrome 开发工具，出现 javascript 语法问题。这是我第一次在我的网页上使用 Google 地图 API。
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Google book search </title>
<!--link rel="stylesheet" href="css/style.css"-->
</head>
<body>
<div id = "input">
<form>
<input type="button" id="search_button" value="search">
</form>
</div>
</body>
</html>
<script >
var body = document.getElementsByTagName("body")[0];
var dosearch= function() {
var newDiv =document.createElement("div");
newDiv.setAttribute("id", "map");
newDiv.style.width="100px";
newDiv.style.height="100px";
body.appendChild(newDiv);
};
window.onload=function(){
console.log("ready");
var search_button= document.getElementById("search_button");
search_button.addEventListener("click", dosearch);
}
</script>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpKAwq-qKxzm-9D1405KCFp7ZTtu_Vimg&callback=initMap"
async defer></script>回答by geocodezip
As indicated in Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null, you need to append the div with id="map" to the DOM before calling initMap.
如Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null 所示，您需要在调用之前将 id="map" 的 div 附加到 DOM initMap。
Simplest fix: call the initMapfunction after you append the div to the DOM (inside your dosearchfunction):
最简单的解决方法：initMap在将 div 附加到 DOM（在您的dosearch函数内部）之后调用该函数：
var dosearch = function () {
var newDiv = document.createElement("div");
newDiv.setAttribute("id", "map");
newDiv.style.width = "100px";
newDiv.style.height = "100px";
body.appendChild(newDiv);
initMap();
};
code snippet:
代码片段：
var body = document.getElementsByTagName("body")[0];
var dosearch = function() {
var newDiv = document.createElement("div");
newDiv.setAttribute("id", "map");
newDiv.style.width = "100px";
newDiv.style.height = "100px";
body.appendChild(newDiv);
initMap();
};
window.onload = function() {
console.log("ready");
var search_button = document.getElementById("search_button");
search_button.addEventListener("click", dosearch);
}
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}<script src="https://maps.googleapis.com/maps/api/js" async defer></script>
<div id="input">
<form>
<input type="button" id="search_button" value="search" />
</form>
</div>回答by Mohit Sonkar
Use
利用
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
in your resource.
在您的资源中。
