Landing Page – lesson 8


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 it.

Step 2

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

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


<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.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="https://maps.google.com/maps/api/js"></script>
                            

Step 3

The last step to create a map is setting options.

Immediately below Google Maps script paste the following code:


<!-- Google Maps settings -->
<script>
  // 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_mapoptions);

      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);
</script>  
                            

After saving the file and refreshing your browser your map should be working. It shows center of Manhattan, in New York. Let's change the locations 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 your living. Then click on Google Maps and find an 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 a zoom. Right now it's 14. The bigger number the bigger zoom. You can adjust it to your needs.

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

That's it about the map.

Step 4

At the end of this lesson we'll add a few basic 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="fa fa-map fa-1x mr-2 grey-text"></i>New York, NY 10012</p>

    </div>
    <!--Grid column-->

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

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

    </div>
    <!--Grid column-->

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

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

    </div>
    <!--Grid column-->

</div>
<!--Grid row-->
                            

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

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


Previous lesson Download Live preview Next lesson

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

About author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits