Невозможно получить значение свойства 'offsetWidth': объект имеет значение null или неопределенная ошибка

Question

Я разрабатываю страницу, которая в основном настраивается как таблица с тремя строками. Верхняя строка - это заголовок, средняя строка - это основная часть страницы, а нижняя строка - это навигация. Каждая кнопка в строке навигации запускает функцию javascript, которая использует значение innerHTML в средней строке и помещает необходимый HTML-код для отображения содержимого страницы. На главной странице у меня есть:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false"></script>

В главном разделе у меня есть:

var myOptions = {center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP };

В секции body, чтобы она запускалась сразу, а затем в функции, вызываемой кнопкой MAP, которую я имею:

var mapString;
var w = document.getElementById("mainwindow");
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
mapString = '<table width="1024" cellpadding="0" cellspacing="0"><tr>';
mapString += '<td> <div id="map_canvas" width="1024" height="350"></div></td>';
mapString += '</tr></table>';
w.innerHTML = mapString;

Теперь, когда я нажимаю кнопку карты, я получаю сообщение об ошибке:

Unable to get value of the property 'offsetWidth': object is null or undefined
main.js Line 29
Code 0 char:1385
URI: http://maps.gstatic.com/intl/en_us/mapfiles/api-2/3/2/main.js

Не уверен, что эта ошибка пытается сказать мне. Любая помощь будет принята с благодарностью.

Answer 1

сделать

   var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

последний, потому что map_canvas div не существует, когда Google Maps пытается загрузить карту в этот div.

должно читаться так

var mapString;
var w = document.getElementById("mainwindow");
mapString = '<table width="1024" cellpadding="0" cellspacing="0"><tr>';
mapString += '<td> <div id="map_canvas" width="1024" height="350"></div></td>';
mapString += '</tr></table>';
w.innerHTML = mapString;

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);