<div class="container my-5">

​

  <!-- Section: Block Content -->

  <section class="mb-4">

​

    <style>

      .map-container {

        overflow: hidden;

        position: relative;

        height: 0;

      }

​

      .map-container iframe {

        left: 0;

        top: 0;

        height: 100%;

        width: 100%;

        position: absolute;

      }

    </style>

​

    <div class="card">

​

      <div class="row my-md-5 py-md-4 p-3">

        <div class="col-md-10 mx-auto">

​

          <!-- Google Maps -->

          <div id="map-within-card" class="map-container" style="height: 400px">

            <iframe src="https://maps.google.com/maps?q=chicago&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"

              style="border:0" allowfullscreen></iframe>

          </div>

          <!-- Google Maps -->

​

        </div>

      </div>

​

    </div>

​

  </section>

  <!-- Section: Block Content -->

​

</div>