如何在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>元素具有属性显示：没有，它不起作用。