Step 1

Let's start from Google Map. To make it works we have to do 3 things.

Firstly link Google Maps script to our project.

Just before closing </body> tag and below MDB Script place Google Maps 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>

</body>

Step 2

Now we have to add a small piece of javascript code to set a localization and settings for our map.

Below linked Google Maps library place a snippet with Google Maps settings.

 <!--Google Maps-->
 <script src="https://maps.google.com/maps/api/js"></script>   

 <!--Google Maps Settings-->
 <script>
        function init_map() {
            var var_location = new google.maps.LatLng(40.725118, -73.997699);

            var var_mapoptions = {
                center: var_location,
                zoom: 14
            };

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

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

            var_marker.setMap(var_map);

        }

        google.maps.event.addDomListener(window, 'load', init_map);
 </script>

To set a localization:

I. Go to Google Maps

II. Right click on the place where you want to set as a default place for our map

III. Select "what's here?"

IV. Copy the coordinates at the bottom of the card

V. Paste it into our script into the localization variable

var var_location = new google.maps.LatLng(40.725118, -73.997699);

To set an appropriate zoom change the zoom's number:

zoom: 14

Step 3

Place the map's container inside the first column of our Contact section.

<!--First column-->
<div class="col-md-8">

    <!--Map container-->
    <div id="map-container" class="z-depth-1" style="height: 300px"></div>

</div>
<!--/First column-->
            

#map-container displays the map and our map's settings.

You can manipulate the height of the map by changing the height value: style="height: 300px"

Class.z-depth-1 is optional and just gives map's container a nice shadow

Save the file and refresh your browser. You will see our map is ready.

Now we can add a few additional contact information to make our website more trustworthy.

In the second column of the Contact Section place a following code:

<!--Second column-->
<div class="col-md-4">

    <ul>
        <li><i class="fa fa-map-marker"></i>
            <p>New York, NY 10012, USA</p>
        </li>

        <li><i class="fa fa-phone"></i>
            <p>+ 01 234 567 89</p>
        </li>

        <li><i class="fa fa-envelope"></i>
            <p>contact@mdbootstrap.com</p>
        </li>
    </ul>

</div>
<!--/Second column-->
            

After saving and refreshing the browser you will notice new icons in the Contact Section. But there are few things to fix.

Step 4

We don't need bullets in our unordered list (<ul>)

Add class .list-unstyled to <ul> to remove them.

<ul class="list-unstyled">
            

Step 5

If you want you change icons you can use one of over 600 available icons.

Go to ICONS DOCUMENTATION and grab the icon you like. Then replace the code within our project.

Step 6

We should to make our icons a little bit bigger. To do it add class .fa-2x to each icon.

To learn more about manipulating icons' size read ICONS USAGE DOCUMENTATION.

We'll also use bootstrap spacing utilities to add a proper margins to each icon and each <li> element.

After all your Unordered List should look like this:

<ul class="list-unstyled">
    <li class="mb-4"><i class="fa fa-2x mb-3 fa-map-marker"></i>
        <p>New York, NY 10012, USA</p>
    </li>

    <li class="mb-4"><i class="fa fa-2x mb-3 fa-phone"></i>
        <p>+ 01 234 567 89</p>
    </li>

    <li class="mb-4"><i class="fa fa-2x mb-3 fa-envelope"></i>
        <p>contact@mdbootstrap.com</p>
    </li>
</ul>
            

Save the file and refresh the browser. Our Contact Section is ready.