Google Map API，未捕获的TypeError：无法读取null的属性“ offsetWidth”
[英]Google map API, Uncaught TypeError: Cannot read property 'offsetWidth' of null
问题描述
I try to make a button on my webpage once i press it, it will turn up a div box with a google map. 
按下按钮后，我会尝试在网页上创建一个按钮，它会打开一个带有Google地图的div框。 But it doesn't work ! 但这是行不通的！ it turns up with javascript syntax Error"Uncaught TypeError: Cannot read property 'offsetWidth' of null" please helps! 它会出现JavaScript语法错误“未捕获的TypeError：无法读取null的属性'offsetWidth'”，请帮忙！
the chrome development tool, turning up with javascript syntax problems. chrome开发工具，出现javascript语法问题。 This is my first time using Google map API to my webpage. 这是我第一次使用Google Map 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>
2 个解决方案
解决方案1
1 2015-11-18 02:15:00
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中未捕获的TypeError所示：无法读取null的属性“ offsetWidth” ，您需要在调用initMap之前将具有id =“ map”的div附加到DOM。
Simplest fix: call the initMap function after you append the div to the DOM (inside your dosearch function): 简单的解决办法：拨打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>
解决方案2
0 2016-12-01 08:42:53
Use 采用
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
in your resource. 在您的资源中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.