Google Maps

Note: As of July 16, 2018, an API Key is required to obtain Google Maps feature. Click here to get an API Key

Step 1

To finish our Contact Section we need to use Google Maps.

Place the following snippet inside the second column:

<!--Google map-->
<div id="map-container" class="z-depth-1-half map-container mb-5" style="height: 400px"></div>


This is a container for our map. We set its height to 400px. If you want, you can change that.

Step 2

To make the map work we need to link a Google Maps script and and then set it up.

In the script section, below the linked MDB files, add a link to the Google Maps script.

<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>

<!--Google Maps-->
<script src=""></script>


Step 3

The last step in creating a map is setting options.

Immediately below the Google Maps script paste the following code:

<!-- Google Maps settings -->
  // Regular map
  function regular_map() {
    var var_location = new google.maps.LatLng(40.725118, -73.997699);

    var var_mapoptions = {
      center: var_location,
      zoom: 14

    var var_map = new google.maps.Map(document.getElementById("map-container"),

    var var_marker = new google.maps.Marker({
      position: var_location,
      map: var_map,
      title: "New York"

  // Initialize maps
  google.maps.event.addDomListener(window, 'load', regular_map);


After saving the file and refreshing your browser, your map should work. It shows the center of Manhattan, in New York. Let's change the location and settings.

Take a look at var var_location. This is a variable which holds the coordinates of the map.

In your browser open Google and in the search type the location of where you live. Then click on Google Maps and find the exact place you want to show on our map.

Click "What's here?" and on the bottom of the page you will notice a small pop-up with the coordinates of the given location.

Now you can use it in our project and replace existing coordinates of New York.

The next thing we can modify is the zoom. Right now it's 14. The bigger the number the greater the zoom. You can adjust it to your needs.

The last option we'll talk about in this lesson is a title for the pin. As you can see it's still New York. Replace it with the name of the city where you live.

If you want to learn more about Google Maps read our Google Maps Docs

Step 4

At the end of this lesson we'll add a few basic pieces of information to our Contact Section.

In the second column, above the map-container place this snippet:

<!--Grid row-->
<div class="row text-center">

  <!--Grid column-->
  <div class="col-lg-4 col-md-12 mb-3">

      <p><i class="fas fa-map fa-1x mr-2 grey-text"></i>New York, NY 10012</p>

  <!--Grid column-->

  <!--Grid column-->
  <div class="col-lg-4 col-md-6 mb-3">

      <p><i class="fas fa-building fa-1x mr-2 grey-text"></i>Mon - Fri, 8:00-22:00</p>

  <!--Grid column-->

  <!--Grid column-->
  <div class="col-lg-4 col-md-6 mb-3">

      <p><i class="fas fa-phone fa-1x mr-2 grey-text"></i>+ 01 234 567 89</p>

  <!--Grid column-->

<!--Grid row-->


If you have followed the previous lesson there is nothing extra to explain here.

Adjust the content to your needs and consider your Contact Section done!

Previous lesson Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.