title: Google map API, Uncaught TypeError: Cannot read property 'offsetWidth' of null
body: <p>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!</p>
  
  <p>the chrome development tool, turning up with javascript syntax problems. This is my first time using Google map API to my webpage.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;! DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt; Google book search &lt;/title&gt;
      &lt;!--link rel="stylesheet" href="css/style.css"--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id = "input"&gt;
      &lt;form&gt;
          &lt;input type="button" id="search_button" value="search"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  &lt;script &gt;
      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);
      }
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      var map;
      function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: -34.397, lng: 150.644},
              zoom: 8
          });
      }
  &lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpKAwq-qKxzm-9D1405KCFp7ZTtu_Vimg&amp;callback=initMap"
          async defer&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>