Google 地图 API，未捕获的类型错误：无法读取 null 的属性“offsetWidth”答案

【问题标题】：Google map API, Uncaught TypeError: Cannot read property 'offsetWidth' of nullGoogle 地图 API，未捕获的类型错误：无法读取 null 的属性“offsetWidth”
【发布时间】：2016-02-19 15:02:37
【问题描述】：

我尝试在我的网页上制作一个按钮，一旦我按下它，它就会出现一个带有谷歌地图的 div 框。但它不起作用！它出现了javascript语法错误“未捕获的TypeError：无法读取null的属性'offsetWidth'”请帮忙！

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>

【问题讨论】：

Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null的可能重复
当initMap被调用时，没有id为map的元素

标签： javascript google-maps

【解决方案1】：

如Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null 所示，您需要在调用initMap 之前将id="map" 的div 附加到DOM。

最简单的解决方法：在将 div 附加到 DOM 后调用 initMap 函数（在 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();
 };

working fiddle

代码 sn-p：

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>

【讨论】：

感谢您的回答！还有一件事要确保！为什么我不能将 InitMap() 函数放入我的 dosearch 函数中？它确实会引起问题！
任何 javascript 错误？它对我有用（在发布的代码中），你可能有变量范围的问题；但这是另一个问题。

【解决方案2】：

使用

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>

在您的资源中。

【讨论】：