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.

How to configure it

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="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.js"></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);

In conclusion

It is quite easy to do this, even though it might seem hard. Getting a map to your website is a must so that your customers can find your location much easier. Something to add? Leave a comment below!