1

モーダル ウィンドウ内で Google マップを読み込むときに問題が発生します。基本的に、モーダル ウィンドウを開いたときにマップをロードしますが、完全にはレンダリングされません。

問題をよりよく理解できるように、例を含めています。誰かがこれを修正する方法を知っていますか?

<html>

<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
    <script>
        $(document).ready(function(){
            $("#link").colorbox({
                inline:true, 
                width:"50%", 
                onOpen: function(){
                    $('#cboxClose').remove();
                    var script = document.createElement("script");
                        script.type = "text/javascript";
                        script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=showMapsStep1";
                        document.body.appendChild(script);
                }
            });


            window.showMapsStep1 = function(){


                var mapOptions = {
                    zoom: 8,
                    center: new google.maps.LatLng(-34.397, 150.644),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);

                $('#canvas').show();
            }
        });
    </script>
</head>

<body>
    <a href="#box" id="link">Open modal <a/>

    <div style='display:none'>
        <div id='box' style='height: 300px; width: 500px;' >
            <div id="canvas" style="height: 100%; width: 100%;"></div>
        </div>
    </div>
</body>

</html>

編集：これはGoogle Chromeでテストされました。ウィンドウのサイズを変更すると、マップが正しくレンダリングされます

4

1 に答える 1