Showing google map on bootstrap popover

<!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-3 col-md-3 ">
    <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>

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