Would you like to show a Google Maps map on your website using jQuery in just a few minutes? It’s possible with Gmap3. In this article, I will show you how to add a map with a marker on it thanks to this jQuery plugin.

Let’s check the demo of the result you will get if you follow this tutorial :

See Demo

As you can see, we just show a simple map with a marker and we position this marker at some given coordinates. So now, let’s start the tutorial 😉

Getting a Google Maps API Key

For using Google Maps on your website, we will use the Google Maps Javascript API. To make it work, you absolutely need to get an API key from your Google Developer Console. I won’t show you how to get this key in this tutorial because Google already have a nice step-by-step documentation on how to generate this key. You can read this documentation here.

Once you have your key, we can move to the next step.

Integrating GMap3 on your website

To show the map on your website, we need 3 different JS files :

  • jQuery since GMap3 is a jQuery plugin
  • The Google Maps JS API
  • GMap3

First of all, download GMap3 from its author’s website. Extract the ZIP you get and transfer the file gmap3.min.js to your website.

Now, import the 3 files in this order :

<script src="js/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR KEY]"></script>
<script src="js/gmap3.min.js"></script>

Replace [YOUR KEY] by your generated Google API key from the previous part.

Once you have imported the JS files, we can write the HTML container of your map.

Creating the HTML Map Container

To do that, just add a simple empty div to your page with a class or an ID on it, like this :

<div class="map"></div>

Make sure to give a width and height in CSS to your HTML container otherwise, the map won’t show up :

.map {
	width: 80%;
	height: 300px;
	margin: auto;
}

Perfect! Now everything is in place for us to write our jQuery code!

Calling Gmap3 and generating the Map

Now the fun part! Let’s call the jQuery plugin GMap3 to generate our Google Maps map. Here is the code I use in the demo :

$('.map').gmap3({
	center:[48.8620722, 2.352047],
	zoom:4
}).marker([
	{position:[48.8620722, 2.352047]}
]);

Basically, we call the plugin on our HTML .map class and we pass some parameters which is the zoom position and the default coordinates of our map. Then, once the map is created, we add a marker and we reference the same position again.

Easy, isn’t it?

If you refresh your page, the map should show up. If it’s not the case, make sure to check your browser’s developer console which may be a good help to find where the error is. For example, Google will show you an error message if your API key is not valid or not well configured.

There are many other parameters that can be passed to this jQuery plugin, to really make a unique map, add more markers etc. You can find all of them in the author’s API documentation.

Feel free to download the sources behind this tutorial here :

Download Sources

(Make sure to replace the API key of the demo with yours)

… and don’t forget to subscribe if you want to receive new unique tutorials and source codes directly on your email :