Javascript 位置选择器在google map初始化中不工作

我需要在点击链接后在bootstrap 3模式框中加载google map.js api，并使用google map initialize方法打开模式框，如下所示：

HTML:

<input id="lat" class="text-input form-control" type="text" size="24" name="lat">
<input id="lon" class="text-input form-control" type="text" size="24" name="lon">
<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>

在modalbox中单击SaveChanges之后，我添加了两个用于保存经度和纬度的输入。在第一次工作时为真，但在单击保存更改并返回modalbox位置后，选择器不工作，在拖动长且lat未更改后

你怎么解决这个问题

---

DEMO

因为每次显示模式时都调用

loadScript

，所以每次都会包含Google Maps API。这将在您的页面上产生不可预测的结果

您需要做的是包含Google Maps API一次（使用一个标志以避免多次加载），然后在显示引导模式时调整Google Map的大小

使用此问题的答案：

然后，您可以使用以下代码执行所需操作：

var googleMapsLoaded = false;

function loadScript() {
    if (!googleMapsLoaded) {
        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);
        googleMapsLoaded = true;
    }
}

$(function() {
    $('#myModal').on('shown.bs.modal', function (e) {
        loadScript();
        var map = $('#us2').locationpicker('map').map;
        var currentCenter = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(currentCenter); 
    });
});

---

单击链接后，我需要加载谷歌地图api。谷歌地图是一个很大的

.js

文件，这不适合加载页面。我需要加载到模式框谷歌地图后点击链接。在你的小提琴谷歌地图加载页面。

var googleMapsLoaded = false;

function loadScript() {
    if (!googleMapsLoaded) {
        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);
        googleMapsLoaded = true;
    }
}

$(function() {
    $('#myModal').on('shown.bs.modal', function (e) {
        loadScript();
        var map = $('#us2').locationpicker('map').map;
        var currentCenter = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(currentCenter); 
    });
});