-1
나는 MySQL 데이터베이스에서 위치 정보를 가져 와서 JavaScript 기능인 JSON 객체로 전달하는 웹 사이트를 운영하고 있습니다. JavaScript 함수는 데이터베이스에서 리턴 된 각 행에 대해 테이블을 동적으로 작성합니다. 반환되는 각 위치 객체에는 위도와 경도가 포함되어 있으며 각 객체에 대해 Google지도를 만들고 싶습니다. 나는 성공적 데이터베이스에서 반환 된 데이터를 사용하여 페이지에 1 개지도를 만들 수 있습니다하지만 난 테이블을 빌드 루프 맵 생성 코드를 추가 할 때이 오류가 던지는 시작 :자바 스크립트를 사용하여 동적으로 Google지도 만들기
TypeError: Cannot read property 'offsetWidth' of null
내가 다른 질문 사람들이 겪었을 이 오류에 대해 게시했습니다. 두 가지 원인은 다음 중 하나 일 수 있습니다. (1) <div> 존재하지 않는지도를 추가하려고합니다. 또는 (2)지도를 작성하기 전에 표시하려고합니다. 나는 <div>이 페이지에 표시 될 때 존재한다는 것을 알고 있습니다. 다른 문제를 확인하거나 수정하는 방법을 모르겠습니다.
이
은 데이터를 검색하고 테이블을 빌드 내 자바 스크립트입니다 :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);
}
}
}
}
처럼 완성 된 테이블의 예를 보인다 : 우리는 오른쪽에있는 <td>의지도를 넣을 
.
다시 말해서 페이지에서 html로 코딩 된 <div>에 1 개의지도를 만들려고 할 때지도 생성이 작동합니다. 우리가 동적으로 생성 된 <div> 안에 여러 개의 맵을 만들려고 할 때 실패합니다.