Google map does not load when load inline content using jquery load <p>I have an issue with google map. I load inline content (including content map) with jquery .load() and the map is doesn't load or it won't show. it just display blank.</p> <p>My code to load inline content with jquery load()</p> <pre><code>$('#content').load(' #content &gt; *', function(){ function initialize(address, num, zoom) { var geo = new google.maps.Geocoder(), latlng = new google.maps.LatLng(-34.397, 150.644), myOptions = { 'zoom': zoom, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }, map = new google.maps.Map(document.getElementById("map_canvas_" + num), myOptions); geo.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { // status } }); }}); </code></pre> <p>As you can see, I have re-initialize the map but it still produce blank map not rendering map content.</p> <p>Here the map code in the html content that loaded.</p> <pre><code>&lt;script type="text/javascript"&gt; jQuery(document).ready(function() { initialize("'.$address.'",'.$num.','.$zoom.'); }); &lt;/script&gt; &lt;div class="shortcode map"&gt; &lt;div id="map_canvas_'.$num.'" style="display: block;width:'.$width.';height:'.$height.';" class="map-container"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Any workaround would be great.</p> <p>Regards,</p>