Google map
Bootstrap Google Map
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
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
<!--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
<!--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
<!--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
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
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
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
<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;
}
Getting started: download & setup
Download
All of the components and features are a part of the MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.
It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.
Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 10,000 components, dozens of plugins and much more cool features.
Click the button below to learn more about the MDBootstrap Pro package.
MDBootstrap ProTutorials
If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.
5 min Quick Start Full Bootstrap TutorialCompilation & Customization
To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.
If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.
Compilation & Customization tutorialMap of dependencies of SCSS files in MDBootstrap:
Legend:
'-->' means 'required'
All free and pro files require files from 'core' catalog
'none' means 'this component doesn't require anything except core files'
A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working
All PRO components require 'pro/_variables.scss' file
scss/
|
|-- core/
| |
| |-- bootstrap/
| | |-- _functions.scss
| | |-- _variables.scss
| |
| |-- _colors.scss
| |-- _global.scss
| |-- _helpers.scss
| |-- _masks.scss
| |-- _mixins.scss
| |-- _typography.scss
| |-- _variables.scss
| |-- _waves.scss
|
|-- free/
| |-- _animations-basic.scss --> none
| |-- _animations-extended.scss --> _animations-basic.scss
| |-- _buttons.scss --> none
| |-- _cards.scss --> none <_buttons.scss>
| |-- _dropdowns.scss --> none <_buttons.scss>
| |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
| |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
| |-- _pagination.scss --> none
| |-- _badges.scss --> none
| |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
| |-- _carousels.scss --> <_buttons.scss>
| |-- _forms.scss --> none
| |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
| |-- _footers.scss none <_buttons.scss> (PRO: )
| |-- _list-group.scss --> none
| |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
| |-- _depreciated.scss
|
|-- pro/
| |
| |-- picker/
| | |-- _default.scss --> none
| | |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
| | |-- _default-date.scss --> _default.scss, free/_forms.scss
| |
| |-- sections/
| | |-- _templates.scss --> _sidenav.scss
| | |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
| | |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
| | |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
| | |-- _magazine.scss --> _badges.scss
| | |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
| | |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
| |
| |-- _variables.scss
| |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
| |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
| |-- _tabs.scss --> _cards.scss
| |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
| |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
| |-- _navbars.scss --> free/_navbars.scss (PRO: )
| |-- _scrollspy.scss --> none
| |-- _lightbox.scss --> none
| |-- _chips.scss --> none
| |-- _msc.scss --> none
| |-- _forms.scss --> none
| |-- _radio.scss --> none
| |-- _checkbox.scss --> none
| |-- _material-select.scss --> none
| |-- _switch.scss --> none
| |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
| |-- _range.scss --> none
| |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
| |-- _autocomplete.scss --> free/_forms.scss
| |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
| |-- _parallax.scss --> none
| |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
| |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
| |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss
| |-- _steppers.scss --> free/_buttons.scss
| |-- _blog.scss --> none
| |-- _toasts.scss --> free/_buttons.scss
| |-- _animations.scss --> none
| |-- _charts.scss --> none
| |-- _progress.scss --> none
| |-- _scrollbar.scss --> none
| |-- _skins.scss --> none
| |-- _depreciated.scss
|
`-- _custom-skin.scss
`-- _custom-styles.scss
`-- _custom-variables.scss
`-- mdb.scss
Map of dependencies of JavaScript modules in MDBootstrap:
Legend:
'-->' means 'required'
All files require jQuery and bootstrap.js
js/
├── dist/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
├── _intro-mdb-pro.js
├── modules.js
├── src/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
└── vendor/
├── addons/
│ ├── datatables.js
│ └── datatables.min.js
├── chart.js
├── enhanced-modals.js
├── hammer.js
├── jarallax.js
├── jarallax-video.js --> vendor/jarallax.js
├── jquery.easing.js
├── jquery.easypiechart.js
├── jquery.hammer.js --> vendor/hammer.js
├── jquery.sticky.js
├── lightbox.js
├── picker-date.js --> vendor/picker.js
├── picker.js
├── picker-time.js --> vendor/picker.js
├── scrollbar.js
├── scrolling-navbar.js
├── toastr.js
├── velocity.js
├── waves.js
└── wow.js
Integrations with Angular, React or Vue
Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.
About MDB Angular About MDB React About MDB VueExclusive resources
MDBootstrap is a platform for web creators and MDB packages are only a part of it.
If you sign up you'll gain free access to other useful tools & resources including:
- Community developed components & design projects
- Technical support & community forum
- CLI interface & free project hosting
- Helpful articles & news agregators
...and much more!
Don't hesitate and sign up now!
Sign up now