Google MAP API Uncaught TypeError Cannot read property offsetWidth of null

Question

I m trying to use Google MAP API v3 with the following code    lt h2 gt Topology lt  h2 gt    lt script src  https   maps google com maps api js sensor false  type  text javascript  gt  lt  script gt    lt link rel  stylesheet  type  text css  href     url css media  tooltip topology css        gt   lt link rel  stylesheet  type  text css  href     url css media  tooltip css        gt    lt style type  text css   gt         map canvas                 width 300px              height 300px          lt  style gt    lt script type  text javascript  gt   var latlng   new google maps LatLng -34 397  150 644   var myOptions     zoom  8        center  latlng        mapTypeId  google maps MapTypeId ROADMAP    var map   new google maps Map document getElementById  map canvas                myOptions     lt  script gt    lt div id  map canvas  gt   lt  div gt    When I run this code  the browser says this       Uncaught TypeError  Cannot read property  offsetWidth  of null   I have no idea  since I follow the direction given in this tutorial   Do you have any clue

User · Answer

Year  geocodezip s answer is correct  So change your code like this    if you still in trouble  or maybe somebody else in the future    lt script type  text javascript  gt   function initialize         var latlng   new google maps LatLng -34 397  150 644       var myOptions             zoom  8          center  latlng          mapTypeId  google maps MapTypeId ROADMAP            var map   new google maps Map document getElementById  map canvas                myOptions     google maps event addDomListener window   load   initialize     lt  script gt

User · Answer

Make sure you include the Places library  amp libraries places parameter when you first load the API   For example    lt script src  https   maps googleapis com maps api js key YOUR API KEY amp libraries places  gt

User · Answer

This is an edit of a previously deleted post to contain the content of the linked answer  in the answer itself  The purpose for re-publishing this answer is to function as a PSA for React 0 9  users who have also stumbled into this issue   original edited post    Also got this error while using ReactJS while following this blog post  sahat s comment here helped -  see the content of sahat s comment below         Note for React    0 9      Prior to v0 9  the DOM node was passed in as the last argument  If you were using this  you can still access the DOM node by calling this getDOMNode         In other words  replace rootNode parameter with this getDOMNode   in the latest version of React

User · Answer

Just so I add my fail scenario in getting this to work  I had a  lt div id  map gt  in which I was loading the map with   var map   new google maps Map document getElementById  map    myOptions     and the div was initially hidden and it didn t have explicitly width and height values set so it s size was width x 0  Once I ve set the size of this div in CSS like this    map       width  500px      height  300px      everything worked  Hope this helps someone

User · Answer

If you happen to be using asp net Webforms and are registering the script in the code behind of a page using a master page  don t forget to use the clientID of the map element  vb net    ClientScript RegisterStartupScript Me  GetType      Google Maps Initialization   String Format  init map      amp  map canvas ClientID    amp

User · Answer

For even more others that might still be having this issue  I was using a self-closing  lt div id  map1    gt  tag  and the second div was not showing  and did not seem to be in the dom  as soon as i changed it to two open amp close tags  lt div id  map1  gt  lt  div gt  it worked  hth

User · Answer

I had single quotes in my   var map   new google maps Map  document getElementById  map canvas        and replaced them with double quotes   var map   new google maps Map  document getElementById  map canvas        This did the trick for me

User · Answer

Also  make sure you re not placing hash symbol     inside your selector in a       document getElementById   map      bad      document getElementById  map      good   statement  It s not a jQuery  Just a quick reminder for someone in a hurry

User · Answer

My fail was to use   zoomLevel   as an option  rather than the correct option   zoom

User · Answer

Here the problem was the API link without the key param    lt script type  text javascript  src  http   maps google com maps api js libraries places amp key YOURKEY  gt  lt  script gt    That way works fine

User · Answer

In my case these sort of issues were solved using defer https   developer mozilla org en docs Web HTML Element script   lt script src   lt your file gt  js  defer gt  lt  script gt   You need to take into account browsers s support of this option though  I haven t seen problems

User · Answer

google uses id  map canvas  and id  map-canvas  in the samples  double-check and re-double-check the id  D

User · Answer

If you re creating multiple maps in a loop  if a single map DOM element doesn t exist  it breaks all of them  First  check to make sure the DOM element exists before creating a new Map object          for  var i   0  i  lt   self multiple maps  i          var map element   document getElementById   map     -    i toString            Element doesn t exist  don t create map    if  null     map element         continue         var map   new google maps Map  map element  myOptions

User · Answer

For others that might still be having this issue  even after trying the above recommendations  using an incorrect selector for your map canvas in the initialize function can cause this same issue as the function is trying to access something that doesn t exist  Double-check that your map Id matches in your initialize function and your HTML or this same error may be thrown    In other words  make sure your IDs match up

User · Answer

Also take care not to write  google maps event addDomListener window   load   init      correct   google maps event addDomListener window   load   init

User · Answer

Check that you re not overriding window self  My issue  I had created a component and wrote self   this instead of var self   this  If you don t use the keyword var  JS will put that variable on the window object  so I overwrote window self which caused this error

User · Answer

You can also get this error if you don t specify center or zoom in your map options

User · Answer

In order to solve it you need to add async defer to the script   It should be like this     lt script src  https   maps googleapis com maps api js key YOUR API KEY amp callback initMap      async defer gt  lt  script gt    See here the meaning of async defer   Since you ll be calling a function from the main js file  you also want to make sure that this  is after the one where you load the main script

User · Answer

Setup ng-init init   in your HTML And in the controller  use  scope init   function         instead of google maps event addDomListener window   load   init          Hope this will help you

User · Answer

add async defer at the begining of map api key call

User · Answer

Changing the ID  in all 3 places  from  map-canvas  to  map  fixed it for me  even though I had made sure the IDs were the same  the div had a width and height  and the code wasn t running until after the window load call  It s not the dash  it doesn t seem to work with any other ID than  map

User · Answer

In a case I was dealing with  the map div was conditionally rendered depending if the location was being made public  If you can t be sure whether the map canvas div will be on the page  simply check that your document getElementById is returning an element and only invoke the map if it s present   var mapEle   document getElementById  map canvas    if  mapEle        map   new google maps Map mapEle  myOptions

User · Answer

I know I m a bit late to the party  just wanted to add that the error can also happen when the div doesn t exist in the page  You can also check if the div exists first before loading the google maps function call  Something like  function initMap         if     venuemap   length    0            var city   lat  -26 2041  lng  28 0473           var map   new google maps Map document getElementById  venuemap             etc etc

User · Answer

This problem is usually due to the map div not being rendered before the javascript runs that needs to access it   You should put your initialization code inside an onload function or at the bottom of your HTML file  just before the  tag  so the DOM is completely rendered before it executes  note that the second option is more sensitive to invalid HTML    Note  as pointed out by matthewsheets this also could be cause by the div with that id not existing at all in your HTML  the pathological case of the div not being rendered    Adding code sample from wf9a5m75 s post to put everything in one place    lt script type  text javascript  gt   function initialize         var latlng   new google maps LatLng -34 397  150 644       var myOptions             zoom  8          center  latlng          mapTypeId  google maps MapTypeId ROADMAP            var map   new google maps Map document getElementById  map canvas                myOptions     google maps event addDomListener window   load   initialize     lt  script gt

User · Answer

I had the same issue but the problem was that zoom was not defined within the options object given to Google Maps

User · Answer

Actually easiest way to fix this is just move your object before Javascript code it worked to me  I guess in your answer object is loaded after javascript code    lt style type  text css   gt         map canvas                 width 300px              height 300px            lt div id  map canvas  gt   lt  div gt     Here    lt script type  text javascript  gt   var latlng   new google maps LatLng -34 397  150 644   var myOptions     zoom  8        center  latlng        mapTypeId  google maps MapTypeId ROADMAP    var map   new google maps Map document getElementById  map canvas                myOptions     lt  script gt    lt div id  map canvas  gt   lt  div gt

[javascript] Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null

Examples related to javascript

Examples related to google-maps-api-3