Javascript 地图在我的引导模式下不能100%显示

我手机上的地图显示得不完美。我已在以下链接上搜索解决方案： 但我不能实现它，因为我是谷歌地图的新手

我的模式html：

    <div id="locateModal" class="modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="blue bigger">Please fill the following form fields</h4>
                </div>

                <div class="modal-body overflow-visible">
                </div>
            </div>
        </div>
    </div>

---

请帮帮我…

您的html页面中没有名为mapCanvas的div。尝试在模态体中添加mapCanvas div，如下所示。这可能是地图显示不完美的原因。请检查并让我知道它是否有效

<div id="locateModal" class="modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="blue bigger">Please fill the following form fields</h4>
            </div>

            <div class="modal-body overflow-visible">
               <div id="mapCanvas"></div>
            </div>
        </div>
    </div>
</div>

&时代；
请填写以下表单字段
感谢Joyson完成了html。
但是我关于地图的目的并没有100%显示在BootstrapV3的模态对话框上。我已经用javascript自己修复了它：

        var myLatlng;
        var map;
        function initialize() {
            myLatlng = new google.maps.LatLng(-6.905270, 107.645368);
            var mapOptions = {
                zoom: 4,
                center: myLatlng
            }
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Hello World!'
            });
        }
        $('.modal').on('shown', function () {
              google.maps.event.trigger(map, 'resize');
        });
        google.maps.event.addDomListener(window, 'load', initialize);

        var map;        
        var myCenter=new google.maps.LatLng(53, -1.33);
        var marker=new google.maps.Marker({
            position:myCenter
        });

        function initialize() {
          var mapProp = {
              center:myCenter,
              zoom: 14,
              draggable: false,
              scrollwheel: false,
              mapTypeId:google.maps.MapTypeId.ROADMAP
          };

          map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
          marker.setMap(map);

          google.maps.event.addListener(marker, 'click', function() {

            infowindow.setContent(contentString);
            infowindow.open(map, marker);

          }); 
        };
        google.maps.event.addDomListener(window, 'load', initialize);

        google.maps.event.addDomListener(window, "resize", resizingMap());

        $('#locateModal').on('show.bs.modal', function() {
           //Must wait until the render of the modal appear, thats why we use the resizeMap and NOT resizingMap!! ;-)
           resizeMap();
        })

        function resizeMap() {
           if(typeof map =="undefined") return;
           setTimeout( function(){resizingMap();} , 400);
        }

        function resizingMap() {
           if(typeof map =="undefined") return;
           var center = map.getCenter();
           google.maps.event.trigger(map, "resize");
           map.setCenter(center); 
        }

谢谢您的帮助：）
您是直接将此尺寸加载到您的已加载页面上，还是使用一些俯冲按钮从较小尺寸弹出较大尺寸的地图。我无法在html中找到地图画布div