Google map API, Uncaught TypeError: Cannot read property 'offsetWidth' of null

Question

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!

the chrome development tool, turning up with javascript syntax problems. This is my first time using Google map API to my webpage.

<! 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>

possible duplicate of [Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null](http://stackoverflow.com/questions/11740663/google-map-api-uncaught-typeerror-cannot-read-property-offsetwidth-of-null) — geocodezip, Nov 18 '15 at 02:04

score 1 · Answer 1 · edited May 23 '17 at 12:30

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.

Simplest fix: call the initMap function after you append the div to the DOM (inside your dosearch function):

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

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>

thank you for answering! one more thing to make sure! why i can't put the InitMap() function inside my dosearch function ? it does cause problems! — Dongsong Wu, Nov 18 '15 at 11:53
Any javascript errors? It works for me (in the posted code), you might have issues with variable scope; but that is another question. — geocodezip, Nov 18 '15 at 13:40

score 0 · Answer 2 · edited Dec 01 '16 at 08:45

0

Use

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

in your resource.

edited Dec 01 '16 at 08:45

FelixSFD

6,052
10
43
117

answered Dec 01 '16 at 08:42

Mohit Sonkar

1
1

Google map API, Uncaught TypeError: Cannot read property 'offsetWidth' of null

2 Answers2