CODEWITHSUNDEEP
javascriptgoogle-maps
Dongsong Wu
Dongsong Wu

Reputation: 3

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

Upvotes: 0

Views: 12131

Answers (2)

Mohit Sonkar
Mohit Sonkar

Reputation: 1

Use 

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

in your resource.

Upvotes: 0

geocodezip
geocodezip

Reputation: 161334

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>

Upvotes: 1

Related Questions