Google map
Bootstrap Google Map
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
As of July 16, 2018, an API Key is required to use the Google Maps feature. Click here to get an API Key
Bootstrap Google Map is a component which displays a map of an area defined by a user. Maps can be used in components like forms and modals.
They are mostly used on Contact and About pages to increase awareness of your location.
It's quite easy to implement a Google map in your project since all it requires is a small piece of JS code.
Examples of Bootstrap Google Maps use:
- Traveling blog with a map of every journey
- A Contact page
- An About section with your location
See the following Bootstrap Google maps examples:
Regular map
This example creates a Google Map.
<!--Google map-->
<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>
<!--Google Maps-->
.map-container{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
Custom map
With following example you can choose custom position.
<!--Google map-->
<div id="map-container-google-2" class="z-depth-1-half map-container" style="height: 500px">
<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-->
.map-container-2{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container-2 iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
Satellite map
Use the following example to view satellite map.
<!--Google map-->
<div id="map-container-google-3" class="z-depth-1-half map-container-3">
<iframe src="https://maps.google.com/maps?q=warsaw&t=k&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
style="border:0" allowfullscreen></iframe>
</div>
.map-container-3{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container-3 iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
Full page map
Click the button below to see a full page Google map live preview.
<!--Main layout-->
<main class=" m-0 p-0">
<div class="container-fluid m-0 p-0">
<!--Google map-->
<div id="map-container-google-4" class="z-depth-1-half map-container-4" 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>
</main>
<!--Main layout-->
.map-container-4{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container-4 iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
Map within card MDB Pro component
Use following example to add map to card.
Regular map
Custom map
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view view-cascade gradient-card-header blue-gradient">
<h5 class="mb-0">Regular map</h5>
</div>
<!--/Card image-->
<!--Card content-->
<div class="card-body card-body-cascade text-center">
<!--Google map-->
<div id="map-container-google-8" class="z-depth-1-half map-container-5" style="height: 300px">
<iframe src="https://maps.google.com/maps?q=Barcelona&t=&z=13&ie=UTF8&iwloc=&output=embed"
frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<!--Card-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view view-cascade gradient-card-header peach-gradient">
<h5 class="mb-0">Custom map</h5>
</div>
<!--/Card image-->
<!--Card content-->
<div class="card-body card-body-cascade text-center">
<!--Google map-->
<div id="map-container-google-9" class="z-depth-1-half map-container-5" style="height: 300px">
<iframe src="https://maps.google.com/maps?q=Madryt&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
style="border:0" allowfullscreen></iframe>
</div>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
.map-container-5{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container-5 iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
Map within a contact form MDB Pro component
Use the example below to add a map next to your contact form to help people reach your location.
Contact us
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.
<!--Section: Contact v.1-->
<section class="section pb-5">
<!--Section heading-->
<h2 class="section-heading h1 pt-4">Contact us</h2>
<!--Section description-->
<p class="section-description pb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error
amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a
pariatur accusamus veniam.</p>
<div class="row">
<!--Grid column-->
<div class="col-lg-5 mb-4">
<!--Form with header-->
<div class="card">
<div class="card-body">
<!--Header-->
<div class="form-header blue accent-1">
<h3><i class="fas fa-envelope"></i> Write to us:</h3>
</div>
<p>We'll write rarely, but with only the best content.</p>
<br>
<!--Body-->
<div class="md-form">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form-name" class="form-control">
<label for="form-name">Your name</label>
</div>
<div class="md-form">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="text" id="form-email" class="form-control">
<label for="form-email">Your email</label>
</div>
<div class="md-form">
<i class="fas fa-tag prefix grey-text"></i>
<input type="text" id="form-Subject" class="form-control">
<label for="form-Subject">Subject</label>
</div>
<div class="md-form">
<i class="fas fa-pencil-alt prefix grey-text"></i>
<textarea id="form-text" class="form-control md-textarea" rows="3"></textarea>
<label for="form-text">Icon Prefix</label>
</div>
<div class="text-center mt-4">
<button class="btn btn-light-blue">Submit</button>
</div>
</div>
</div>
<!--Form with header-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-7">
<!--Google map-->
<div id="map-container-google-11" class="z-depth-1-half map-container-6" style="height: 400px">
<iframe src="https://maps.google.com/maps?q=new%20delphi&t=&z=13&ie=UTF8&iwloc=&output=embed"
frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<br>
<!--Buttons-->
<div class="row text-center">
<div class="col-md-4">
<a class="btn-floating blue accent-1"><i class="fas fa-map-marker-alt"></i></a>
<p>San Francisco, CA 94126</p>
<p>United States</p>
</div>
<div class="col-md-4">
<a class="btn-floating blue accent-1"><i class="fas fa-phone"></i></a>
<p>+ 01 234 567 89</p>
<p>Mon - Fri, 8:00-22:00</p>
</div>
<div class="col-md-4">
<a class="btn-floating blue accent-1"><i class="fas fa-envelope"></i></a>
<p>info@gmail.com</p>
<p>sale@gmail.com</p>
</div>
</div>
</div>
<!--Grid column-->
</div>
</section>
<!--Section: Contact v.1-->
.map-container-6{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container-6 iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
A full-width map within a contact form MDB Pro component
Use following example to get full-width map with contact form below it.
Contact us
<!--Section: Contact v.2-->
<section class="section">
<!--Section heading-->
<h2 class="section-heading h1 pt-4 mb-5">Contact us</h2>
<div class="card">
<div class="card-body">
<!--Google map-->
<div id="map-container-google-12" class="z-depth-1-half map-container-7" style="height: 200px">
<iframe src="https://maps.google.com/maps?q=Miami&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
style="border:0" allowfullscreen></iframe>
</div>
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<form>
<div class="md-form">
<input type="text" id="contact-name" class="form-control">
<label for="contact-name" class="">Your name</label>
</div>
<div class="md-form">
<input type="text" id="contact-email" class="form-control">
<label for="contact-email" class="">Your email</label>
</div>
<div class="md-form">
<input type="text" id="contact-Subject" class="form-control">
<label for="contact-Subject" class="">Subject</label>
</div>
</form>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<div class="md-form primary-textarea">
<textarea id="contact-message" class="md-textarea form-control mb-0" rows="5" style="padding-bottom: 1.2rem;"></textarea>
<label for="contact-message">Your message</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-12">
<div class="text-center">
<a class="btn btn-mdb-color btn-block">Send Message</a>
</div>
</div>
<!--Grid column-->
</div>
</div>
</div>
</section>
<!--Section: Contact v.2-->
.map-container-7{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container-7 iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
Map within modal
Use modal example to view map after viewing the modal.
<div class="text-center">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalRegular">Regular map modal</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSatellite">Satellite map
modal</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalCustom">Custom map
modal</button>
</div>
<!--Modal: Name-->
<div class="modal fade" id="modalRegular" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<!--Google map-->
<div id="map-container-google-16" class="z-depth-1-half map-container-9" style="height: 400px">
<iframe src="https://maps.google.com/maps?q=new%20delphi&t=&z=13&ie=UTF8&iwloc=&output=embed"
frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-info btn-md">Save location <i class="fas fa-map-marker-alt ml-1"></i></button>
<button type="button" class="btn btn-outline-info btn-md" data-dismiss="modal">Close <i class="fas fa-times ml-1"></i></button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Name-->
<!--Modal: Name-->
<div class="modal fade" id="modalSatellite" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<!--Google map-->
<div id="map-container-google-17" class="z-depth-1-half map-container-10" style="height: 400px">
<iframe src="https://maps.google.com/maps?q=new%20york&t=k&z=13&ie=UTF8&iwloc=&output=embed"
frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-default btn-md">Save location <i class="fas fa-map-marker-alt ml-1"></i></button>
<button type="button" class="btn btn-outline-default btn-md" data-dismiss="modal">Close <i class="fas fa-times ml-1"></i></button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Name-->
<!--Modal: Name-->
<div class="modal fade" id="modalCustom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Body-->
<div class="modal-body mb-0 p-0">
<!--Google map-->
<div id="map-container-google-18" class="z-depth-1-half map-container-11" style="height: 400px">
<iframe src="https://maps.google.com/maps?q=los%20angeles&t=&z=13&ie=UTF8&iwloc=&output=embed"
frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-secondary btn-md">Save location <i class="fas fa-map-marker-alt ml-1"></i></button>
<button type="button" class="btn btn-outline-secondary btn-md" data-dismiss="modal">Close <i class="fas fa-times ml-1"></i></button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Name-->
.map-container-9,
.map-container-10,
.map-container-11 {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-container-9 iframe,
.map-container-10 iframe,
.map-container-11 iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}