如何在jQuery對話框中初始化Google的地圖？

Question

我正在開發一個Web應用程序。我需要與IE8及以上版本兼容。我正在使用knockout.js進行MVVM模式。

<!-- Dialog Customer Geolocalization --> 
<div id="geolocalization-customer-dialog" class="dialog" data-bind="template: { name: 'geolocalization-template', data: BasicViewModel.CustomerViewModel }"></div> 

<!-- Dialog supplier Geolocalization --> 
<div id="geolocalization-supplier-dialog" class="dialog" data-bind="template: { name: 'geolocalization-template', data: BasicViewModel.SupplierViewModel }"></div> 

<!-- Geolocalization template --> 
<script type="text/html" id="geolocalization-template"> 
    <div id="mapsAddress"> 
     <table> 
      <tr class="ucTitle"> 
       <td>Zip Code</td> 
       <td>District</td> 
       <td>City</td> 
       <td>Street</td> 
      </tr> 
      <tr> 
       <td><input id="txZipCode" type="text" data-bind="value: ZipCode"/></td> 
       <td><input id="txProvince" type="text" data-bind="value: Province"/></td> 
       <td><input id="txCity" type="text" data-bind="value: City"/></td> 
       <td><input id="txStreet" type="text" data-bind="value: Street"/></td> 
      </tr> 
     </table> 
    </div> 
    <div id="maps" class="maps"></div> 
</script> 

我初始化與下面的JavaScript代碼的地圖：

$(document).ready(function() { 
    try { 
     initMap(); 
     ko.applyBindings(BasicViewModel); 
    } catch (ex) { 
     WriteToConsole("Error code:" + ex.ErrorNumber + " Error message:" + ex.message); 
    } 
} 

function initMap() 
    try { 
     map = new google.maps.Map($("#geolocalization-customer-dialog div#maps")[0], { 
      center: { 
       lat: -34.397, 
       lng: 150.644 
      }, 
      zoom: 8 
     }); 
    } catch (ex) { 
     WriteToConsole("Error on initializing Google Maps:" + ex.ErrorNumber + " Error message:" + ex.message); 
    } 
} 

我得到這個錯誤：

"Impossible retrieve the property 'offsetWidth' of null reference"

注意，id爲geolocalization-customer-dialog和geolocalization-supplier-dialog股利與jQuery的對話框中使用。

請幫助我嗎？

Answer 1

我解決了這個代碼的問題：

$("#geolocalization-customer-dialog").dialog(
     { 
      width: 800, 
      height: 600, 
      create: initMap(), // <-- Here must be initializated the maps 
      buttons: [ 
       { 
        text: "OK" 
       }, 
       { 
        text: "Geolocalize" 
       } 
      ] 
     }); 

的地圖必須在創建對話框來initializated。我不知道爲什麼，我認爲如果<div>元素具有屬性顯示：沒有，它不起作用。