Google Map无法使用javascript进行第二次加载

Question

I've seen a couple of questions in regards to a similar issue, but none of them solved my problem, so I'll go ahead. 关于类似问题，我已经看到了几个问题，但是没有一个问题解决了我的问题，所以我继续。

I have a following issue with Google maps: I try to load a modal dialog with a Google map calling it using javascript: 我在使用Google地图时遇到以下问题：我尝试通过使用javascript调用的Google地图加载模式对话框：

<html>
    <body>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

        <a onclick="locationDetail(76)" id="76" data-toggle="modal" data-target="#myModalLocationDetails">Edit</a>

        <div id="myModalLocationDetails" class="modal modal modal-metro border-mauve fade in" aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" style="display: none;">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <div id="locationEdit" class="col-md-12">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </body>
</html>

JavaScript function: JavaScript函数：

function locationDetail(locId) {
    $("#locationEdit").load('/Home/LocationEdit/' + locId, function () {
            initialize(44.7862, 20.45345);
        }
    );
}

Code that loads in #locationEdit(LocationEdit.html) is: 在#locationEdit（LocationEdit.html）中加载的代码为：

<html>
<head></head>
<body>
<script type="text/javascript">

function initialize(latitude, longitude) {

    var myLatlng = new google.maps.LatLng(latitude, longitude);

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 12,
        center: myLatlng,
        //mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: true,
        panControl: true
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
}

</script>

<div id="map-canvas">
</div>
<button type="button" class="btn btn-primary" onclick="initialize(44.7862, 20.45345)">Update</button>
</body>
</html>

When I click on Edit, modal dialog shows up (style turns from display="none" to display="block") and map shows up ok. 当我单击“编辑”时，将显示模式对话框（样式从display =“ none”变为display =“ block”），地图显示为ok。 When I close the modal dialog clicking Close and load modal dialog again with a click on Edit, my map shows broken, as on the image on the question: Google Maps Api v3 Maps in Ui-Tabs are cut 当我关闭模式对话框时，单击“关闭”并再次单击“编辑”以再次加载模式对话框，我的地图显示为损坏，如问题图像所示： Ui-Tabs中的Google Maps Api v3地图被剪切

When I click Update map loads well! 当我单击更新时，地图加载良好！ It seems to be the problem with calling initialize() function in .load()...or not...i don't know. 这似乎是在.load（）中调用initialize（）函数的问题...还是不...我不知道。

I tried this solution: - Google Maps Api v3 Maps in Ui-Tabs are cut also this: - jquery click doesn't work on ajax generated content 我尝试了以下解决方案： -Ui-Tabs中的Google Maps Api v3地图也被切掉了： -jquery单击不适用于ajax生成的内容

These solutions didn't work for me. 这些解决方案对我不起作用。 Thanks a lot for your sugestions! 非常感谢您的建议！

EDIT: I solved the issue calling bootstrap event: 编辑：我解决了调用引导事件的问题：

$(function() {
    $('#myModalLocationDetails').on('shown.bs.modal', function () {
        initialize(44.7862, 20.45345);
    });
});

There is documentation for this event call at http://getbootstrap.com/javascript/#modals-usage . 有关此事件调用的文档，请参见http://getbootstrap.com/javascript/#modals-usage 。

Do you know some other way of doing this not using bootstrap but some other jquery event? 您知道不使用引导程序但使用其他jquery事件的其他方法吗？ Thanks! 谢谢！

Answer 1

Try cleaning up the #locationEdit div before .load() -- something like 尝试在.load（）之前清理#locationEdit div-类似

function locationDetail(locId) {
    $("#locationEdit").html(''); // or $("#locationEdit").empty();
    $("#locationEdit").load('/Home/LocationEdit/' + locId, function () {
            initialize(44.7862, 20.45345);
        }
    );
}

Google Map无法使用javascript进行第二次加载

问题描述

1 个解决方案

解决方案1
0 2014-03-13 16:28:50

Google Map无法使用javascript进行第二次加载

问题描述

1 个解决方案

解决方案1 0 2014-03-13 16:28:50

解决方案1
0 2014-03-13 16:28:50