Have a project ? Need support ?

Fork on Github

Basic Setup

Include Google Map API

First, you need to include the google script in the <head> section of your page

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Include gmap3 jQuery plugin

Now include gmap3 file as below

<script type="text/javascript" src="gmap3.min.js"></script>

Example

You are good to go now. gmap3 is really simple and tiny to use, this tiny line of code below is being used to embed the map as shown below. Super simple, isn't it?

$("#example").gmap3();

Of course, like others JQuery manipulations, you have to wait the dom is ready before using gmap3 (the dom, or the div you will use)

$(function(){ // or $(document).ready(function(){
  
  $("#example").gmap3();
  
});

Important: Google Map needs a non-null height and width of your <div> tag. So you need to define the "HEIGHT" and "WIDTH" of your div element.
It can be done using differents ways :

CSS version (used in this example)

 
#page.index #example{
  height: 350px;
  width: 600px;
  margin: 20px auto;
}

Inline version 

<div style="height:350px; width:600px"></div>

Important: Some people think that there are some requirements in class or id name because of my examples always use map or test, but of course not !
You're free to use names that you want, there are absolutly not requirement of this kind.