Google Map not Showing on Bootstrap Popover

Question

I have a page that will show up a popover that has contact list, one of the list is a map location (google map). All the lists are shown when popover is called, except google map. Google map only show gray background, but when I inspected it, it shows my coordinated I've input. And when I move it to the outside of pop over it shows no problem.

I've tried to reignite/resize the map when the popover is shown using shown.bs.popover function, but it failed.

here is the plunkr http://plnkr.co/edit/VWiCzhpiOyEMmfRoxaIy?p=preview

here is my code snippet

// 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>

Your code snippet doesn't work at all, it has javascript errors. — geocodezip, Aug 01 '17 at 05:06
i dunno to close it yet. but i've found the solution. i add function time out to init map when popover is shown — Gde Panut Wijaya, Aug 01 '17 at 06:15

Google Map not Showing on Bootstrap Popover

0 Answers0