bootstrap模式中的Locationpicker无法正常工作

Question

我在角度应用程序中使用JQuery Location Picker。如果不使用模态，它就会起作用。但是当我使用模态时，它没有显示地图。以下是我的代码 HTML模态代码：

<script type="text/ng-template" id="usemaps">
<link rel="stylesheet" href="css/about-list.css">
<div class="modal-header">
    <h1 class="modal-header">Locate</h1>
    <a href="#" class="setLocationBtn">Set Location</a>
    <a href="" class="backBtn">Back</a>
</div>
<div class="modal-body">
<div class="locMapWrapper">
    <div id="googleMap" style="display: block; height: 400px;"></div>
</div>
</div>
</script>

打开模态功能和模态控制器

$scope.openMaps = function (size) {

        var modalInstance = $modal.open({
            templateUrl: 'usemaps',
            controller: UseMapsCtrl,
            backdrop: 'static',
            keyboard: false,
            size: size
        });

        modalInstance.result.then(function () {
            console.log("Item selected");
        }, function () {
            console.log('Modal dismissed at: ' + new Date());
        });
    };

    var UseMapsCtrl = function ($scope, $modalInstance) {

        $modalInstance.opened.then(function(){

            $('#googleMap').locationpicker();
        })
    };

有谁能建议我做错了什么？