Question

我有一个页面会显示一个包含联系人列表的popover，其中一个列表是一个地图位置（谷歌地图）。调用popover时会显示所有列表，但谷歌地图除外。谷歌地图只显示灰色背景，但是当我检查它时，它显示了我的协调我的输入。当我把它移到pop的外面时，它没有问题。

当使用shown.bs.popover函数显示弹出窗口时，我尝试重新点亮/调整地图大小，但它失败了。

这里是plunkr http://plnkr.co/edit/VWiCzhpiOyEMmfRoxaIy?p=preview

这是我的代码段

// Code goes here

$(function() {
    //show popover
    $('[data-toggle="popover"]').popover({
        html: true,
        container: 'body',
        content: function() {
            var getID = $(this).attr("id");
            switch (getID) {
                case "contact-us":
                    return $('#list-popover').html();
            }

        }
    });
});
$(document).ready(function() {
    $("[data-toggle='popover']").on('shown.bs.popover', function() {
        reignitMap();
        // console.log(popo);
    });
});

//variable used to try reignite map when popover is shown
var googleMap = {};

function initMap() {
    // console.log("initiating map");
    googleMap.myPosition = {
        lat: -6.2126170,
        lng: 106.8228290
    };
    googleMap.map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: googleMap.myPosition
    });
    googleMap.marker = new google.maps.Marker({
        position: googleMap.myPosition,
        map: googleMap.map
    });
};

function reignitMap() {
    // console.log("reignit map");
    google.maps.event.trigger(googleMap.map, "resize");
    googleMap.map.setCenter(googleMap.myPosition);
};

/* Styles go here */

#map {
    width: 110%;
    height: 15em;
    background-color: grey;
}

.popover {
    max-width: 600px;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
    <h3>My Google Maps Demo</h3>
    <div class="formLabelRight displayTable col-xs-2 col-md-2 ">
        <div class="alignMiddle">
            <a href="javascript:;" id="contact-us" class="linkFont" data-toggle="popover" data-placement="bottom">
                <span> Contact Us</span>
            </a>
        </div>
    </div>
    <div class="container">
        <div id="list-popover" class="hide col-xs-12 col-md-12" style="width:100px;">
            <div class="col-xs-12 col-md-12" style="display: block;">
                <div class="row">
                    <p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah
                        kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun.</p>
                </div>
                <!-- 
        
      <a href="#">View Branch Locator</a> -->
                <div id="map" class="col-xs-10 col-md-10"></div>
            </div>

        </div>
    </div>
    <!-- <div id="map" class="col-xs-10 col-md-10"></div> -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4MzPKw9W1RlCgQcctcWmlktTfqQLhMC8&callback=initMap"></script>
</body>

</html>

谷歌地图没有显示在Bootstrap Popover上

0 个答案: