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