Q:

Dynamically creating google maps using javascript

I have a website that gets locations out of a MySQL database and passes it to a JavaScript function as a JSON object. The JavaScript function dynamically creates tables for each row returned from the database. Each location object returned includes a latitude and longitude and I want to create a Google map for each object. I can successfully create 1 map on the page using data returned from the database but when I add the map creation code to the loop that builds tables it begins throwing this error:
TypeError: Cannot read property 'offsetWidth' of null

I have gone through other questions that people have posted about this error. The two causes that it can have are either (1) the <div> I am trying to add the map to doesn't exist, or (2) I am trying to display the map before it is created. I know that the <div>s exist as they exist in the page when it is displayed. I am not sure how to check for or fix the other issue.
This is my JavaScript that retrieves data and builds the tables:
google.maps.event.addDomListener(window, "load");

//THIS FUNCTIONS BUILD THE MAPS
//PASS LAT, LONG, AND ID FOR DIV
function initializeMap(latitude,longitude, mapID) 
{
    var myCenter = new google.maps.LatLng(latitude, longitude);
     var mapProp = 
     {
      center:myCenter,
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP

     };
     var map=new google.maps.Map(document.getElementById(mapID), mapProp);

    var marker=new google.maps.Marker({
      position:myCenter,
      });

    marker.setMap(map);
}

function removeTable()
{
    $("#tableID").remove();
}

/*
    ajaxRequest variable receives and parses a JSON object into a 2 dimensional array
    an example of what a single row returned will look like: [["2","Alexandra","33 GRANT STREET","ALEXANDRA","3714","57721040","-37.18859863281250000000","145.70799255371094000000","","security"]]
    when trying to access elements in the array using a loop, columns are as follows:
    ajaxRequest[i][0] = database id
    ajaxRequest[i][1] = name
    ajaxRequest[i][2] = address
    ajaxRequest[i][3] = suburb
    ajaxRequest[i][4] = postcode
    ajaxRequest[i][5] = phone
    ajaxRequest[i][6] = latitude
    ajaxRequest[i][7] = longitude
    ajaxRequest[i][8] = description
    ajaxRequest[i][9] = service_type
*/
function search(option)
{
   var ajaxRequest;

   try{
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   }catch (e){
      // Internet Explorer Browsers
      try{
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }

   /*
   1 = unsafe
   2 = depressed
   3 = sad
   */
   if(option == 1)
   {ajaxRequest.open("GET", "securitymodel.php", true);}
   if(option == 2)
   {ajaxRequest.open("GET", "depressedModel.php", true);}    
   if(option == 3)
   {ajaxRequest.open("GET", "sadmodel.php", true);} 
    ajaxRequest.send(null); 

   // Create a function that will receive data
   // sent from the server and will update
   // div section in the same page.
   var ajaxResult = 1;

   ajaxRequest.onreadystatechange = function()
   {
      if(ajaxRequest.readyState == 4)
      {
         var ajaxDisplay = document.getElementById('ajaxDiv');
            //ajaxDisplay.innerHTML = ajaxRequest.responseText;
            ajaxResult = JSON.parse(ajaxRequest.responseText);

            if(ajaxResult.length > 0)
        {
        //IF SOMETHING IS RETURNED BEGIN BUILDING THE TABLE
            var tableLocation = document.getElementById('suggestionTable');

            var tableArea = document.createElement('table');
            tableArea.id = 'tableID';       

            for(var i = 0; i < ajaxResult.length; i++)
            {       //create inner row 
                var innerRow = document.createElement('tr');
                var innerTD = document.createElement('td');

                //WE MUST GO DEEPER!!!
                var innerTable = document.createElement('table');
                var superInnerTD = document.createElement('td');
                var secondSuperInnerTD = document.createElement('td');

                //row 1
                var nameTR = document.createElement('tr');
                var nameHead = document.createElement('td');
                var name = document.createTextNode('Name:');
                nameHead.appendChild(name);
                nameTR.appendChild(nameHead);

                var nameTD = document.createElement('td');
                var nameText = document.createTextNode(ajaxResult[i][1]);
                nameTD.appendChild(nameText);
                nameTR.appendChild(nameTD);
                superInnerTD.appendChild(nameTR);

                //row 2
                var descTR = document.createElement('tr');          
                var descHead = document.createElement('td');
                var desc = document.createTextNode('Description:');
                descHead.appendChild(desc);
                descTR.appendChild(descHead);

                var descTD = document.createElement('td');
                var descText = document.createTextNode(ajaxResult[i][8]);
                descTD.appendChild(descText);
                descTR.appendChild(descTD);
                superInnerTD.appendChild(descTR);

                //row 3
                var addTR = document.createElement('tr');   
                var addressHead = document.createElement('td');
                var address = document.createTextNode('Address:');
                addressHead.appendChild(address);
                addTR.appendChild(addressHead);

                var addTD = document.createElement('td');
                var addressText = document.createTextNode(ajaxResult[i][2]);
                addTD.appendChild(addressText);
                addTR.appendChild(addTD);
                superInnerTD.appendChild(addTR);

                //row 4
                var subTR = document.createElement('tr');
                var suburbHead = document.createElement('td');
                var suburb = document.createTextNode('Suburb:');
                suburbHead.appendChild(suburb);
                subTR.appendChild(suburbHead);

                var subTD = document.createElement('td');
                var subText = document.createTextNode(ajaxResult[i][3]);
                subTD.appendChild(subText);
                subTR.appendChild(subTD);
                superInnerTD.appendChild(subTR);

                //row 5
                var postTR = document.createElement('tr');
                var postcodeHead = document.createElement('td');
                var postcode = document.createTextNode('Postcode:');
                postcodeHead.appendChild(postcode);
                postTR.appendChild(postcodeHead);

                var postTD = document.createElement('td');
                var postText = document.createTextNode(ajaxResult[i][4]);
                postTD.appendChild(postText);
                postTR.appendChild(postTD);
                superInnerTD.appendChild(postTR);

                //row 6
                var phoneTR = document.createElement('tr');
                var phoneHead = document.createElement('td');
                var phone = document.createTextNode('Phone:');
                phoneHead.appendChild(phone);
                phoneTR.appendChild(phoneHead);

                var phoneTD = document.createElement('td'); 
                var phoneText = document.createTextNode(ajaxResult[i][5]);
                phoneTD.appendChild(phoneText); 
                phoneTR.appendChild(phoneTD);
                superInnerTD.appendChild(phoneTR);

                //The divContainer requires an id
                //ID IS AUTOMATICALLY GENERATED BY CONACTENATING THE NAME AND ADDRESS TOGETHER
                var mapID = ajaxResult[i][1]+ajaxResult[i][2];
                var divContainer =  document.createElement("div");
                divContainer.setAttribute("id", mapID);
                secondSuperInnerTD.appendChild(divContainer);

                initializeMap(ajaxResult[i][6],ajaxResult[i][7],mapID); 

                innerTable.appendChild(superInnerTD);
                innerTable.appendChild(secondSuperInnerTD);             

                innerTD.appendChild(innerTable);
                innerRow.appendChild(innerTD);

                tableArea.appendChild(innerRow);

            }
            tableLocation.appendChild(tableArea);
        }
      }
   }
}

An example of a completed table looks like:

We want to put the map in the <td> on the right.
To reiterate, the map generation works when we are trying to build 1 map in a <div> that is coded in html on the page. When we try to create several maps inside <div>s that are dynamically created it fails.

A:

The call to initialize the map happens before the div is added to the DOM.
initializeMap(ajaxResult[i][6],ajaxResult[i][7],mapID); 

The above line is called before the following line : 
tableLocation.appendChild(tableArea);

The map divs that you create dynamically are added to the page when this line is executed. Due to this you are getting the error.
One workaround would be to use settimeout so that the initialize function is called after the map divs are added to the DOM. 
setTimeout(function(){  initializeMap(ajaxResult[i][6],ajaxResult[i][7],mapID); }, 500);  

Another option is to push the data into an array and iterate that array after the tableLocation.appendChild(tableArea); line and then call the intializeMap function using that data

