加载获取远程链接到引导模态框

Question

打开模态框后，我需要加载google map链接（远程）。

HTML：

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body">Location:
                <input type="text" id="us2-address" style="width: 200px" />Radius:
                <input type="text" id="us2-radius" />
                <div id="us2" style="height: 400px;"></div>Lat.:
                <input type="text" id="us2-lat" />Long.:
                <input type="text" id="us2-lon" />
            </div>
            <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
 <a href="#" class="btn btn-primary" id="save-changes">Save changes</a>

            </div>
        </div>
    </div>
</div>

JS：

var stillPresent = false;
$('#myModal').on('shown.bs.modal', function (e) {
       if(stillPresent == false){
               $('#us2').locationpicker({
            location: {
                latitude: 46.15242437752303,
                longitude: 2.7470703125
            },
            radius: 300,
            inputBinding: {
                latitudeInput: $('#us2-lat'),
                longitudeInput: $('#us2-lon'),
                radiusInput: $('#us2-radius'),
                locationNameInput: $('#us2-address')
            }
        });
            stillPresent = true;
        }
    })

google map链接： http : //maps.google.com/maps/api/js?sensor=false&libraries=places

演示： http : //jsfiddle.net/Lzv7w/9/

如果我添加谷歌地图链接到外部资源jsfiddle工作。 但我需要在打开模式后加载google map链接。

如何加载呢？

Answer 1

Google 在这里有一个不错的教程，可能会对您有所帮助。 下面的代码应该可以解决您的问题。 请注意，它可能无法在jsfiddle中使用，但应该可以在您的实际页面上使用。

var stillPresent = false;
function initialize() {
    if (stillPresent == false) {
        $('#us2').locationpicker({
            location : {
                latitude : 46.15242437752303,
                longitude : 2.7470703125
            },
            radius : 300,
            inputBinding : {
                latitudeInput : $('#us2-lat'),
                longitudeInput : $('#us2-lon'),
                radiusInput : $('#us2-radius'),
                locationNameInput : $('#us2-address')
            }
        });
        stillPresent = true;
    }
}

function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://maps.google.com/maps/api/js?sensor=false&libraries=places&callback=initialize';
    document.body.appendChild(script);
}
$('#myModal').on('shown.bs.modal', function(e) {
    loadScript();
});

此外， 这是指向类似问题的链接。