Maps

Angular Bootstrap 5 Maps

Responsive maps with Angular Bootstrap 5. A collection of Vue Bootstrap templates for Google maps, vector maps, maps with contact us sections, maps with address & more.

With Bootstrap you can use Google Maps as well as dedicated vector maps. You can select certain regions, subcontinents, continents countries & cities. Maps are also a great way to present data or set up a country filter.

Basic examples

Google Map in Bootstrap grid

You have to add class .w-100 to the iframe element in order to make sure that your Google Map embeds are fully responsive. You should also delete the fix height & width that Google adds to Map embeds by default. Learn more about the w-100 class in the Sizing Utilities documentation.

This map is embedded in a 6 column layout

Try to resize your browser window - you will see that it starts to take up 12 columns on screens smaller than 992px.

This useful feature helps to make your embedded map responsive (mobile friendly). You can customize responsive behavior with the use of breakpoints.

This text looks so nice because it's vertically centered you can achieve this effect using the vertical alignment layout option.

Edit in sandbox 
<div class="row w-100">
  <div class="col-lg-6 my-4">
    <iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d115681.29592731265!2d-77.47713270775661!3d25.0326996781907!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x892f7c99b981dbc9%3A0x2aef01d3485e50d2!2sNassau%2C%20Bahamy!5e0!3m2!1spl!2spl!4v1624445118063!5m2!1spl!2spl"
      class="w-100" height="400" allowfullscreen="" loading="lazy"></iframe>
  </div>
  <div class="col-lg-6 my-4 d-flex align-items-center">
    <div>
      <h6>This map is embedded in a 6 column layout</h6>
      <p>Try to resize your browser window - you will see that it starts to take up 12 columns on
        screens smaller than 992px.</p>
      <p>This useful feature helps to make your embedded map responsive (<strong>mobile
          friendly</strong>). You can customize responsive behavior with the use of <a
          href="https://mdbootstrap.com/docs/angular/layout/breakpoints/">breakpoints</a>.</p>
      <p>This text looks so nice because it's <strong>vertically centered</strong> you can achieve
        this effect using the <a
          href="https://mdbootstrap.com/docs/angular/layout/vertical-alignment/">vertical
          alignment</a> layout option.</p>
    </div>
  </div>
</div>

Custom Google Maps

Different styles & use cases of Google Maps embedded in your projects - you can customize them even more.

Bootstrap "Contact us" section with a map

Including a map in your contact us section is a great way to present your company address. You can also include a map preview in an address form i.e. during a checkout, to confirm a delivery address.

Contact us

  • New York, NY 10012, USA

  • + 01 234 567 89

  • contact@gmail.com

Edit in sandbox 
<section class="text-center">

  <h3 class="mb-5">Contact us</h3>

  <div class="row">
    <div class="col-lg-5">
      <iframe
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12094.57348593182!2d-74.00599512526003!3d40.72586666928451!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2598f988156a9%3A0xd54629bdf9d61d68!2sBroadway-Lafayette%20St!5e0!3m2!1spl!2spl!4v1624523797308!5m2!1spl!2spl"
        class="h-100 w-100" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>

    <div class="col-lg-7">
      <form>
        <div class="row">
          <div class="col-md-9">
            <div class="row mb-4">
              <div class="col-md-6 mb-4 mb-md-0">
                <mdb-form-control>
                  <input mdbInput type="text" id="form3Example1" class="form-control" />
                  <label mdbLabel class="form-label" for="form3Example1">First name</label>
                </mdb-form-control>
              </div>
              <div class="col-md-6">
                <mdb-form-control>
                  <input mdbInput type="email" id="form3Example2" class="form-control" />
                  <label mdbLabel class="form-label" for="form3Example2">Email Address</label>
                </mdb-form-control>
              </div>
            </div>
            <mdb-form-control class="mb-4">
              <input mdbInput type="text" id="form3Example3" class="form-control" />
              <label mdbLabel class="form-label" for="form3Example3">Subject</label>
            </mdb-form-control>
            <mdb-form-control class="mb-4">
              <textarea mdbInput class="form-control" id="form4Example3" rows="4"></textarea>
              <label mdbLabel class="form-label" for="form4Example3">Message</label>
            </mdb-form-control>
            <div class="text-center text-md-start">
              <button type="submit" class="btn btn-primary mb-5 mb-md-0">
                Send
              </button>
            </div>
          </div>
          <div class="col-md-3">
            <ul class="list-unstyled">
              <li>
                <i class="fas fa-map-marker-alt fa-2x text-primary"></i>
                <p><small>New York, NY 10012, USA</small></p>
              </li>
              <li>
                <i class="fas fa-phone fa-2x text-primary"></i>
                <p><small>+ 01 234 567 89</small></p>
              </li>
              <li>
                <i class="fas fa-envelope fa-2x text-primary"></i>
                <p><small>contact@gmail.com</small></p>
              </li>
            </ul>
          </div>
        </div>
      </form>

    </div>
  </div>

</section>

Google map in a Bootstrap card

A Google map can easily be embedded inside of a Bootstrap card with the use of iframe.

Central Park Zoo
A place to relax
25 min

Call

Love

Smile

East 64th Street, New York, NY 10021, US
Closed Opens 10 AM
Sunny weather tomorrow
Edit in sandbox 
<div class="container">
  <section class="mx-auto my-5" style="max-width: 23rem;">

    <div class="card map-card">
      <div id="map-container-google-1" class="z-depth-1-half map-container" style="height: 500px">
        <iframe src="https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed"
          frameborder="0" style="border:0" allowfullscreen></iframe>
      </div>
      <div class="card-body closed px-0">
        <div class="button px-2 mt-3">
          <a class="btn btn-floating btn-lg living-coral text-white float-end"
            style="margin-right: .75rem;"><i class="fas fa-bicycle"></i></a>
        </div>
        <div class="bg-white px-4 pb-4 pt-3-5">
          <h5 class="card-title h5 living-coral-text">Central Park Zoo</h5>
          <div class="d-flex justify-content-between living-coral-text">
            <h6 class="card-subtitle font-weight-light">A place to relax</h6>
            <h6 class="font-small font-weight-light mt-n1">25 min</h6>
          </div>
          <hr>
          <div
            class="d-flex justify-content-between pt-2 mt-1 text-center text-uppercase living-coral-text">
            <div>
              <i class="fas fa-phone fa-lg mb-3"></i>
              <p class="mb-0">Call</p>
            </div>
            <div>
              <i class="fas fa-cat fa-lg mb-3"></i>
              <p class="mb-0">Love</p>
            </div>
            <div>
              <i class="far fa-grin-beam-sweat fa-lg mb-3"></i>
              <p class="mb-0">Smile</p>
            </div>
          </div>
          <hr>
          <table class="table table-borderless">
            <tbody>
              <tr>
                <th scope="row" class="px-0 pb-3 pt-2">
                  <i class="fas fa-map-marker-alt living-coral-text"></i>
                </th>
                <td class="pb-3 pt-2">East 64th Street, New York, NY 10021, US</td>
              </tr>
              <tr class="mt-2">
                <th scope="row" class="px-0 pb-3 pt-2">
                  <i class="far fa-clock living-coral-text"></i>
                </th>
                <td class="pb-3 pt-2"><span class="deep-purple-text me-2"> Closed</span> Opens 10
                  AM
                </td>
              </tr>
              <tr class="mt-2">
                <th scope="row" class="px-0 pb-3 pt-2">
                  <i class="fas fa-cloud-moon living-coral-text"></i>
                </th>
                <td class="pb-3 pt-2">Sunny weather tomorrow</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </section>
</div>
body {
  background-color: #f5f7fa;
  }

  .card.map-card .living-coral {
  background-color: #fa7268;
  }

  .card.map-card .living-coral-text {
  color: #fa7268;
  }

  .card.map-card .table th {
  width: 2rem;
  }

  .card.map-card .pt-3-5 {
  padding-top: 1.25rem;
  }

  .card.map-card .card-body {
  position: absolute;
  width: 100%;
  height: 80%;
  top: 20%;
  overflow: hidden;
  background-color: transparent;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  -webkit-border-radius: 0 !important;
  border-radius: 0 !important;
  }

  .card.map-card .card-body.closed {
  top: 100%;
  height: 7.5rem;
  margin-top: -7.5rem;
  }

  .card.map-card .map-container {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
  }

  .card.map-card .map-container iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  }

  .card.map-card .button .btn-floating {
  margin-top: -1.5rem;
  }
...
AI Chat