Google map
Bootstrap Google Map
As of July 16, 2018, an API Key is required to obtain 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 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 map of every journey
- Contact page
- 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 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 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="fa fa-envelope"></i> Write to us:</h3>
</div>
<p>We'll write rarely, but only the best content.</p>
<br>
<!--Body-->
<div class="md-form">
<i class="fa 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="fa 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="fa 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="fa fa-pencil prefix grey-text"></i>
<textarea type="text" 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="fa fa-map-marker"></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="fa 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="fa 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;
}
Full width map within 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 type="text" 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="fa fa-map-marker ml-1"></i></button>
<button type="button" class="btn btn-outline-info btn-md" data-dismiss="modal">Close <i class="fa 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="fa fa-map-marker ml-1"></i></button>
<button type="button" class="btn btn-outline-default btn-md" data-dismiss="modal">Close <i class="fa 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="fa fa-map-marker ml-1"></i></button>
<button type="button" class="btn btn-outline-secondary btn-md" data-dismiss="modal">Close <i class="fa 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 the components and features are part of MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.
Click the button below to go to Download Page, where you can download MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires MDB Pro package.
Click the button below to learn more about MDBbootstrap Pro package
MDBootstrap ProTutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.
Map 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
Compilation & Customization tutorial
If you need additional help to compile your custom package, use our Compilation & Customization tutorial
Compilation & Customization tutorialIntegrations with Angular, React or Vue
Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.
About MDB Angular About MDB React About MDB Vue