谷歌地图无法使用自定义插件正确呈现

Question

  

可能重复：
  Google Maps v3 Shifting After Loading in Wordpress

我正在尝试使用自定义wordpress插件嵌入谷歌地图。

这是我使用的代码：

//Embed the GM Code
    function gm_sc($atts, $content=null) {  
    extract(  
        shortcode_atts(array(    
            'w' => '500px',  
            'h' => '500px'  
        ), $atts)  
    );  

    return '<div id="gmaps" style="width: ' .$w . '; height: ' .$h. '";></div> 
<script>
    var map;

    jQuery(document).ready(function() {
        var mapOptions = {
            zoom: 8,  //zoomlevel
            center: new google.maps.LatLng(52.5, 5.291266),  //start coordinates Map
            mapTypeId: google.maps.MapTypeId.ROADMAP  // type of Map
            };
        map = new google.maps.Map(document.getElementById("gmaps"), mapOptions);
    });
</script>

<script>google.maps.event.trigger(map, "resize");</script>';
}  
add_shortcode('gmaps','gm_sc');

虽然它有效但谷歌地图的渲染变得很奇怪：

我无法弄清楚我做错了什么。有谁看到了这个问题？提前谢谢。