How to initialize Google's maps inside jquery dialog?
<p>I'm developing a web application. I need compatibility with IE8 and above. I'm using knockout.js for MVVM pattern.</p>

<pre class="lang-html prettyprint-override"><code>&lt;!-- Dialog Customer Geolocalization --&gt;
&lt;div id="geolocalization-customer-dialog" class="dialog" data-bind="template: { name: 'geolocalization-template', data: BasicViewModel.CustomerViewModel }"&gt;&lt;/div&gt;

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

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

<p>I initialize the maps with the JavaScript code below:</p>

<pre><code>$(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);
    }
}
</code></pre>

<p>I obtain this error: </p>

<blockquote>
  <p>"Impossible retrieve the property 'offsetWidth' of null reference"</p>
</blockquote>

<p>Note that the div with id <code>geolocalization-customer-dialog</code> and <code>geolocalization-supplier-dialog</code> are used with jQuery dialog.</p>

<p>Please can you help me?</p>