Google maps api 3 为什么谷歌地图api只获取或显示地图的一部分？

我正在使用symfony2，我试图在一个页面上初始化一个谷歌地图

这是我的js

<script type="text/javascript">
      function initialize(address) {
        var geoCoder = new google.maps.Geocoder(address)
        var request = {address:address};
        geoCoder.geocode(request, function(result, status){
            var latlng = new google.maps.LatLng(result[0].geometry.location.lat(), result[0].geometry.location.lng());
            var myOptions = {
              scrollwheel: false,
              zoom: 15,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var image = '{{ asset('/images/map_marker.png') }}';
            var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
            var marker = new google.maps.Marker({position:latlng,map:map,title:'title',icon:image});
            var input = document.getElementById('inputCity');
            var options = {
              types: ['(cities)'],
            };
            autocomplete = new google.maps.places.Autocomplete(input, options);

        })
      }

</script>

这就是我初始化地图的方式

<script>
    $(document).ready(function(){
        initialize('Athens Greece');
        })

       google.maps.event.trigger(map, "resize"); 

</script> 

这就是我显示地图的方式

<div style="height:100%; width:100%;">
    <div class="svmMap" id="map_canvas" ></div>
    <!-- tried this also <script> initialize('Athens,Greece'); </script> -->
</div>

这就是它的显示方式

我附加了一个带有初始化功能的按钮，可以刷新地图并从输入框中显示地址。它100%有效

你知道为什么第一次初始化时会发生这种情况吗？

检查