The Simplest Way to Add Google Maps to Your Site

In this quick tutorial we show you how to configure Google Maps with the help of the gMaps library.

Spread the love

When building a website, you often need to include a map to give people a better sense of direction. Google Maps is the most popular mapping service today and it offers a wide variety of tools and services that you can use.

In this tutorial we will show you how to easily add a map to your website and customize it using the gMaps.js library. It is a simple and easy to use library, that allows you to use the full potential of Google Maps without using large amount of code.

Project Overview

To demonstrate the usage of Google Maps, we have created a simple design using HTML and Bootstrap 4. You can check the image below for the final result.



Our design consists of a Bootstrap row and two columns. In the left column we show the Google map and in the right column we have headings, with some text, font-awesome icons and a small image gallery.

<div class="map-example"> <div class="row"> <div class="col-lg-6"> <div id="map"></div> </div> <div class="col-lg-6"> <div class="heading"> <h3>Lorem Ipsum Dolor</h3> <div class="rating"> <i class="fa fa-star icon"></i> <i class="fa fa-star icon"></i> <i class="fa fa-star icon"></i> <i class="fa fa-star icon"></i> <i class="fa fa-star-o icon"></i> </div> </div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare leo porta cursus porttitor. Proin quis tempor lectus. Cras sodales nisi ut felis tincidunt suscipit. Nullam consectetur odio et lacus tempor vestibulum.</p> <p>Aenean convallis, tortor eget vehicula vestibulum, sem nibh rutrum sem, vel sodales nisl velit eu ex. Sed hendrerit efficitur sollicitudin. Maecenas tempus augue lacus.</p> </div> <div class="gallery"> <h4>Photos</h4> <div class="row"> <div class="col-md-4"> <a href="assets/img/image2.jpg"><img class="img-fluid image" src="assets/img/image2.jpg"></a> </div> <div class="col-md-4"> <a href="assets/img/image3.jpg"><img class="img-fluid image" src="assets/img/image3.jpg"></a> </div> <div class="col-md-4"> <a href="assets/img/image4.jpg"><img class="img-fluid image" src="assets/img/image4.jpg"></a> </div> </div> </div> </div> </div>

Map Configuration

In order to use Google Maps, you need to import the gMaps.js library and the Google Maps API. It requires an API key, so if you already have one you can use it, otherwise you can go to this link to learn how to create one. When you have your key ready, simply replace the “YOUR_API_KEY” part of the script.

<script src=""></script>
<script src=""></script>

Now we need to generate the map. We create a new map object and as parameters we set the selector (‘#map’), and the latitude and longitude of the point we want to show on the map.

Next we need to add a marker on the map. To do so, use the addMarker() method with the latitude and longitude where you want to place it. We can also set the initial zoom at which the map is displayed using the setZoom() method with an integer number as parameter. The lower the number, the more “zoomed in” the map is.

var map = new GMaps({ el: '#map', lat: 40.730610, lng: -73.935242
}); map.addMarker({ lat: 40.700610, lng: -73.997242, title: 'New York'
}); map.setZoom(8);


The styles are located in a separate CSS file. Since we are using Bootstrap, most of the styling is done by the framework. We have added some margin and padding tweaks, font colors and box-shadows. { box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);
} .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav, .navbar-light .navbar-nav, .navbar-light .navbar-nav .show > .nav-link { font-weight:bold;
} .nav-item.item { padding-right:2rem;
} .navbar-nav:last-child .item:last-child, .navbar-nav:last-child .item:last-child a { padding-right:0;
} .map-example .heading .icon { color:#ffb526;
} .map-example { margin-top:50px; padding-bottom:100px;
} .map-example .heading { margin-bottom:20px; border-bottom:1px solid #e4e4e4; padding-bottom:30px;
} .map-example .info { margin-bottom:20px; border-bottom:1px solid #e4e4e4; padding-bottom:20px; color:#636363;
} .map-example .gallery h4 { margin-bottom:30px;
} .map-example .gallery .image { margin-bottom:15px; box-shadow:0px 2px 10px rgba(0, 0, 0, 0.15);
} .map-example #map { height: 300px; margin-bottom: 20px;
} .page-footer { padding-top:32px; border-top:1px solid #ddd; text-align:center; padding-bottom:20px;
} .page-footer a { margin:0px 10px; display:inline-block; color:#282b2d; font-size:18px;
} .page-footer .links { display:inline-block;
} @media(min-width: 992px){ .map-example #map{ height: 500px; }

Google Maps in Bootstrap Studio

The Bootstrap Studio app offers a fast and easy way to configure Google Maps without having to write a single line of code. You can find detailed instructions on how to add Google Maps in your projects in the Bootstrap studio tutorials section.


You can get the full source code for this tutorial, from the Download button near the top of the page. You are free to customize and use it in all your projects, for commercial or personal use, no attribution required (our license).

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Facebook Comments

More Stuff

How to Create Beautiful WordPress Charts and Graphs Whether you’re a researcher compiling data about a local election or a teacher sharing data about the local wildlife population with your class, there...
WordPress 5.0 Beta Available, Gutenberg Not Accessible, New Defaul...  This is the November 2018 edition of “This Month in WordPress with CodeinWP.”  Hello friends, welcome to our November 2018 WordPress news roundup! ...
Get Inspiration With These Awesome App Landing Page Designs It’s almost impossible to imagine a successful tech business without a beautiful website. No matter what sort of digital business you run, it’s import...
How To Make Your WordPress Site Conversion Friendly (A Series) Part 1 – Defining Your Conversions and Calls To Action Mastering the use of WordPress is just one step in making your online presence effective and s...
Spread the love

Posted by News Monkey