<div class="card">
  <div class="card-header bg-none fw-bold">Google Map</div>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d960.5886473867613!2d-122.41743634015282!3d37.776451983493104!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085809c6c8f4459%3A0xb10ed6d9b5050fa5!2sTwitter+HQ!5e0!3m2!1sen!2s!4v1495935122933" style="border:0; width: 100%; height: 10rem;" allowfullscreen></iframe>
  <div class="list-group list-group-flush">
    <div class="list-group-item d-flex align-items-center">
      <div class="w-30px h-40px d-flex align-items-center justify-content-center">
        <i class="bi bi-pin-map fa-2x text-body text-opacity-25"></i>
      </div>
      <div class="flex-fill px-3 py-1">
        <div class="fw-semibold">via Road I-88E</div>
        <div class="fs-12px">Fastest route, the usual traffic</div>
      </div>
      <div class="text-nowrap py-1">
        <div class="text-success fw-semibold">3h 54min</div>
        <div class="fs-12px">393km</div>
      </div>
    </div>
  </div>
</div>