title: Uncaught TypeError: Cannot read property 'offsetWidth' of null
body: <p>I read couple of threads before posting this question  unfortunately  I could not find the suitable answers for my question .</p>
  
  <p>So here is my code snippet </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
          &lt;meta charset="utf-8"&gt;
      &lt;!--&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"&gt;&lt;/script&gt;
      &lt;script src="http://goessner.net/download/prj/jsonxml/xml2json.js"&gt;&lt;/script&gt;
      --&gt;
  &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1Wwh21ce7jnB6yDbjVGN3LC5ns7OoOL4&amp;amp;sensor=false"&gt;
  &lt;/script&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="bd_css"&gt;
  
      &lt;!-- javascript code for triggering the download for csv file of businesses--&gt;
      &lt;script type="text/javascript"&gt;
          function populateIframe(id) 
          {
              var ifrm = document.getElementById(id);
              ifrm.src = "business_data_to_excel";
          }
      &lt;/script&gt;
  
      &lt;script&gt;
  
  
  
          function showCategories(str)
          {
          if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
            }
          else
            {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
          xmlhttp.onreadystatechange=function()
            {
            if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
              {
              document.getElementById("txt").innerHTML=xmlhttp.responseText;
              }
            }
          // here within this bd_get_subcategories we have to 
          xmlhttp.open("GET","bd_get_subcategories?q="+str,true);
          xmlhttp.send();
          loadMap(str);
          }
  
      &lt;/script&gt;
  &lt;!--               Rohit Script ----------------------&gt;
  &lt;script type="text/javascript"&gt;
  
  var map, actual, iw;
  var gmarkers = [];
  var icons = {
      img: "http://sites.google.com/site/mxamples/icons-dot.png",
      bar: [0, 0],
      cafe: [128, 32],
      hotel: [32, 32],
      disco: [96, 0],
      white: [192, 0]
  };
  
  function shifter(a) {
      var g = google.maps;
      var b = {
          url: icons.img,
          size: new g.Size(32, 32),
          origin: new g.Point(a[0], a[1]),
          anchor: new g.Point(15, 32)
      };
      return b
  }
  
  function createMarker(b, c, d, e, f) {
      var g = google.maps;
      var h = shifter(icons[e]);
      var i = new g.Marker({
          position: b,
          map: map,
          title: c,
          clickable: true,
          draggable: false,
          icon: h
      });
      i.category = e;
      i.name = c;
      i.id = f;
      gmarkers.push(i);
      var j = "&lt;b&gt;" + c + "&lt;\/b&gt;&lt;p&gt;" + d + "&lt;\/p&gt;";
      g.event.addListener(i, "click", function () {
          iw.setContent(j);
          iw.open(map, this)
      });
      g.event.addListener(i, "mouseover", function () {
          i.setIcon(shifter(icons.white));
          var a = document.getElementById(f);
          if (a) {
              a.className = "focus";
              actual = a
          }
      });
      g.event.addListener(i, "mouseout", function () {
          i.setIcon(shifter(icons[e]));
          if (actual) {
              actual.className = "normal"
          }
      })
  }
  var hover = {
      over: function (i) {
          var a = gmarkers[i];
          var b = document.getElementById(a.id);
          b.className = "focus";
          a.setIcon(shifter(icons.white))
      },
      out: function (i) {
          var a = gmarkers[i];
          var b = document.getElementById(a.id);
          b.className = "normal";
          a.setIcon(shifter(icons[a.category]))
      }
  };
  var visible = {
      show: function (a) {
          for (var i = 0, m; m = gmarkers[i]; i++) {
              if (m.category == a) {
                  m.setVisible(true)
              }
          }
          document.getElementById(a).checked = true
      },
      hide: function (a) {
          for (var i = 0, m; m = gmarkers[i]; i++) {
              if (m.category == a) {
                  m.setVisible(false)
              }
          }
          document.getElementById(a).checked = false;
          iw.close()
      }
  };
  
  function boxclick(a, b) {
      if (a.checked) {
          visible.show(b)
      } else {
          visible.hide(b)
      }
      makeSidebar()
  }
  
  function triggerClick(i) {
      google.maps.event.trigger(gmarkers[i], "click")
  }
  
  function makeSidebar() {
      var a;
      var b = "";
      for (var i = 0, m; m = gmarkers[i]; i++) {
          if (m.getVisible()) {
              var c = gmarkers[i].category;
              c = c.replace(/^./, c.charAt(0).toUpperCase());
              if (a != c) b += "&lt;b&gt;" + c + "s&lt;\/b&gt;&lt;br \/&gt;";
              b += '&lt;a id="' + gmarkers[i].id + '" href="javascript:triggerClick(' + i + ')" onmouseover="hover.over(' + i + ')" onmouseout="hover.out(' + i + ')"&gt;' + gmarkers[i].name + '&lt;\/a&gt;&lt;br \/&gt;';
              a = c
          }
      }
      document.getElementById("sidebar").innerHTML = b
  }
  
  function loadMap() {
      var g = google.maps;
      var a = {
          center: new g.LatLng(48.139543, 11.571436),
          zoom: 14,
          mapTypeId: g.MapTypeId.ROADMAP,
          mapTypeControlOptions: {
              mapTypeIds: [g.MapTypeId.ROADMAP, g.MapTypeId.SATELLITE, g.MapTypeId.HYBRID]
          },
          panControl: true,
          zoomControl: true
      };
      map = new g.Map(document.getElementById("map"), a);
      iw = new g.InfoWindow();
      g.event.addListener(map, "click", function () {
          if (iw) iw.close()
      });
      readData()
  }
  
  function readData() {
      var k;
      try {
          if (typeof ActiveXObject != "undefined") {
              k = new ActiveXObject("Microsoft.XMLHTTP")
          } else if (window["XMLHttpRequest"]) {
              k = new XMLHttpRequest()
          }
      } catch (e) {}
      k.open("GET", "marker_info_to_xml?p=bar", true);
      k.onreadystatechange = function () {
          if (k.readyState == 4) {
              var a = k.responseXML;
              var b = a.documentElement.getElementsByTagName("marker");
              for (var i = 0, m; m = b[i]; i++) {
                  var c = parseFloat(m.getAttribute("lat"));
                  var d = parseFloat(m.getAttribute("lng"));
                  var e = new google.maps.LatLng(c, d);
                  var f = m.getAttribute("address");
                  var g = m.getAttribute("nr");
                  var h = m.getAttribute("name");
                  var j = m.getAttribute("category");
                  createMarker(e, h, f, j, g)
              }
              if (gmarkers) {
                  gmarkers.sort(compareCats)
              }
              visible.show("bar");
              visible.show("cafe");
              visible.hide("hotel");
              visible.hide("disco");
              makeSidebar()
          }
      };
      k.send(null)
  }
  var compareCats = function (a, b) {
      var c = a.name;
      c = c.toLowerCase();
      c = c.replace(/ä/g, "a");
      c = c.replace(/ö/g, "o");
      c = c.replace(/ü/g, "u");
      c = c.replace(/ß/g, "s");
      var d = b.name;
      d = d.toLowerCase();
      d = d.replace(/ä/g, "a");
      d = d.replace(/ö/g, "o");
      d = d.replace(/ü/g, "u");
      d = d.replace(/ß/g, "s");
      var e = a.category;
      var f = b.category;
      if (a.category == b.category) {
          if (a.name == b.name) {
              return 0
          }
          return (a.name &lt; b.name) ? -1 : 1
      }
      return (a.category &lt; b.category) ? -1 : 1
  };
  //window.onload = loadMap;
  google.maps.event.addDomListener(window, "load", loadMap);
  
  &lt;/script&gt;
  
  &lt;!--               Rohit SCript end --------------------&gt;
  
  
  
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="business_form"&gt;&lt;form action= ""&gt;
          &lt;div id='radiobtn'&gt;Search By:
              &lt;input type="radio"&gt;Title
              &lt;input type="radio"&gt;Keywords
              &lt;input type="radio"&gt;Both
          &lt;/div&gt;&lt;/br&gt;
          &lt;div id="searchfor"&gt;Search For:
              &lt;td&gt;&lt;input type="text" maxlength="30"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="submit" name="submit_query" value="Search"&gt;&lt;/td&gt;
              &lt;iframe id="frame1" style="display:none"&gt;&lt;/iframe&gt;
              &lt;a href="javascript:populateIframe('frame1')"&gt;Download entire directory in Excel format&lt;/a&gt;
          &lt;/div&gt;&lt;/br&gt;
          &lt;div id='cat_select'&gt;Catgories:&lt;select name='users' onchange='showCategories(this.value)'&gt;
          &lt;?php
            $query_select = ee()-&gt;db-&gt;query('SELECT DISTINCT category_name,cat_counter FROM stab_num_of_cat_subcat');
  
  
          echo "&lt;option value=''&gt;All Categories&lt;/option&gt;";
          foreach($query_select-&gt;result_array() as $row_value){
              echo "&lt;option value='".$row_value['category_name']."'&gt;".$row_value['category_name']."(".$row_value['cat_counter'].")&lt;/option&gt;";
          }
  
          ?&gt;
          &lt;/select&gt;&lt;/div&gt;
      &lt;/form&gt;&lt;/div&gt;
  
      &lt;div id="txt"&gt;Sub Categories:&lt;select disabled name="subcat_select"&gt;&lt;option value=''&gt;All Subcategories&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;&lt;/br&gt;
      &lt;div id="map-canvas" style="width:500px;height:380px;"&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>Basically upon changing the categories I am trying to render the map I am getting the data from a xml file .</p>
  
  <p>But I am getting the  error "Uncaught TypeError: Cannot read property 'offsetWidth' of null"  and my map is not getting load .</p>
  
  <p>My example is exactly same as "<a href="http://www.wolfpil.de/v3/toggle-cats.html" rel="noreferrer">http://www.wolfpil.de/v3/toggle-cats.html</a>"</p>
  
  <p>I don't know what might I am doing wrong here .</p>
  
  <p>Please help me out .</p>