Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Contact Google Maps

Contact section and Google Maps


Written by Michal Szymanski ,

1. Google Maps

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


Step One: Link Google Maps script to our project.

Just before closing </body> tag paste the following code:


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


</body>

Step two: Add a small piece of javascript code to set a localization and settings for our map.

Put the following code below linked Google Maps library:


 <!--Google Maps-->
 <script src="http://maps.google.com/maps/api/js"></script>   
    
 <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 three 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 wow fadeInUp" 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.

Paste the following code into the second column of the contact section:


<!--Second column-->
<div class="col-md-4">
    <ul class="text-xs-center">
        <li class="wow fadeInUp" data-wow-delay="0.2s"><i class="fa fa-map-marker"></i>
            <p>New York, NY 10012, USA</p>
        </li>

        <li class="wow fadeInUp" data-wow-delay="0.3s"><i class="fa fa-phone"></i>
            <p>+ 01 234 567 89</p>
        </li>

        <li class="wow fadeInUp" data-wow-delay="0.4s"><i class="fa fa-envelope"></i>
            <p>contact@mdbootstrap.com</p>
        </li>
    </ul>
</div>
<!--/Second column-->

Contact date requires some css modifications. In the style.css put the code:


#contact .fa {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

That makes our icons bigger ang gives them a proper margin.

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


If something doesn’t work as expected, you can download a final code for this lesson here:

Download Live preview Next lesson

Do you want to share?


About author


User avatar

Michal Szymanski

UI/UX designer, entrepreneur, web developer, marketing analyst. In love with javascript, material design, big data and marketing automation.

Comments 9

  • User avatar

    nrod31792

    How can I activate the email button so that when you click it, it opens up your email client?

  • Dawid Adach

    Dear nrod31792, You can use "mailto:emailaddress@domain.com" as a href target element. I.e.

    <a href=":mailto:d.adach@mdbootstrap.com" class="btn-floating btn-small waves-effect waves-light blue-grey" rel="nofollow"> <i class="material-icons">email</i></a> 

  • User avatar

    rhuankarlus

    Michal Szymanski I'm really glad you provide us this tutorial. Thanks. I'm trying to understand what's the "wow" class for... Can you explain it? In the "free development" package we don't have this css class.

  • User avatar

    rhuankarlus

    Oh, I saw the result on the last tutorial lesson. Man, sorry for asking before. And thanks again.

  • User avatar

    agungmyusuf

    Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details. How to fix sir ?

  • User avatar

    Michal Szymanski

    If you did everything the same like in the tutorial it will works fine. Check your code again.

  • User avatar

    Venktesh Guttedar

    Even i got the same map issue as "agungmyusuf," Maps isn't Loading, Error : Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys How to fix this?

  • User avatar

    Michal Szymanski

    It should load the map even without ApiKeys. Are you sure you use exactly the same code as in the tutorial?

  • User avatar

    Robert Larouche

    Looks like Google now request an API key for its Maps service, just add your key at the end of the javascript url like this: http://maps.google.com/maps/api/js?key=YOUR-KEY-HERE&callback=init_map You can get a key here: https://developers.google.com/maps/documentation/javascript/get-api-key#key

Leave a reply

Card image cap

Create advanced websites and apps


With MDB Pro you can create easily and fast the most advanced projects.

2000+ stunning premium components, 50+ sections, 20+ templates, 30 plugins, direct contact with our team to help you with any questions and unlimited future updates.