google-maps-api-3 - Google マップ API がマップの一部のみを取得または表示するのはなぜですか?

Question

私は symfony2 を使用しており、ページ上で Google マップを初期化しようとしています。

これは私の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% 動作します。

初めて初期化したときになぜそれが起こるべきなのですか?