使用javascript动态创建google地图

我有一个网站，可以从MySQL数据库中获取位置，并将其作为JSON对象传递给JavaScript函数。JavaScript函数为数据库返回的每一行动态创建表。返回的每个location对象都包含一个纬度和经度，我想为每个对象创建一个Google地图。我可以使用从数据库返回的数据在页面上成功创建1个映射，但当我将映射创建代码添加到构建表的循环中时，它开始抛出以下错误：

TypeError: Cannot read property 'offsetWidth' of null

我已经讨论了人们发布的关于这个错误的其他问题。它可能有两个原因：（1）我试图将地图添加到的

不存在，或者（2）我试图在创建地图之前显示地图。我知道当页面显示时，

s就存在于页面中。我不知道如何检查或修复其他问题

这是我的JavaScript，用于检索数据和构建表：

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);
        }
      }
   }
}

google.maps.event.addDomListener（窗口，“加载”）；
//此函数用于构建地图
//通过横向、纵向和纵向的DIV ID
函数初始化映射（纬度、经度、mapID）
{
var myCenter=new google.maps.LatLng（纬度、经度）；
var mapProp=
{
中心：迈森特，
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（mapID），mapProp）；
var marker=new google.maps.marker({
职位：迈森特，
});
marker.setMap（map）；
}
函数可移除（）
{
$（“#tableID”）.remove（）；
}
/*
ajaxRequest变量接收JSON对象并将其解析为二维数组
返回的单行的示例如下：[“2”、“Alexandra”、“33 GRANT STREET”、“Alexandra”、“3714”、“57721040”、“-37.18859863281250000000”、“145.70799255371094000000”、“security”]]
尝试使用循环访问数组中的元素时，列如下所示：
ajaxRequest[i][0]=数据库id
ajaxRequest[i][1]=名称
ajaxRequest[i][2]=地址
ajaxRequest[i][3]=郊区
ajaxRequest[i][4]=邮政编码
ajaxRequest[i][5]=电话
ajaxRequest[i][6]=纬度
ajaxRequest[i][7]=经度
ajaxRequest[i][8]=说明
ajaxRequest[i][9]=服务类型
*/
功能搜索（选项）
{
var ajaxRequest；
试一试{
//Opera 8.0+、Firefox、Safari
ajaxRequest=新的XMLHttpRequest（）；
}捕获（e）{
//Internet Explorer浏览器
试一试{
ajaxRequest=newActiveXObject（“Msxml2.XMLHTTP”）；
}捕获（e）{
试一试{
ajaxRequest=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}捕获（e）{
//出了点问题
警告（“你的浏览器坏了！”）；
返回false；
}
}
}
/*
1=不安全
2=凹陷
3=悲伤
*/
如果（选项==1）
{ajaxRequest.open（“GET”，“securitymodel.php”，true）；}
如果（选项==2）
{ajaxRequest.open（“GET”，“depresedModel.php”，true）；}
如果（选项==3）
{ajaxRequest.open（“GET”，“sadmodel.php”，true）；}
ajaxRequest.send（空）；
//创建一个将接收数据的函数
//从服务器发送并将更新
//同一页中的div部分。
var ajaxResult=1；
ajaxRequest.onreadystatechange=函数（）
{
if（ajaxRequest.readyState==4）
{
var ajaxDisplay=document.getElementById（'ajaxDiv'）；
//ajaxDisplay.innerHTML=ajaxRequest.responseText；
ajaxResult=JSON.parse（ajaxRequest.responseText）；
如果（ajaxResult.length>0）
{
//如果有东西被退回，就开始建桌子
var tableLocation=document.getElementById（'suggestionTable'）；
var tableArea=document.createElement（'table'）；
tableArea.id='tableID'；
对于（var i=0；iinitializeMap(ajaxResult[i][6],ajaxResult[i][7],mapID); 

tableLocation.appendChild(tableArea);

setTimeout(function(){  initializeMap(ajaxResult[i][6],ajaxResult[i][7],mapID); }, 500);