Maps using JQuery Plugin

Use Google Map API with jQuery with the help of gmaps3.js

1.First, you need to include the google script in the <head> section of your page as you do it for including scripts in a Html component .

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

2.gmaps3 plugin should be included

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

3.Just as we invoke a plugin invoke it using a small piece of code snippet .

$("#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 :

<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 absolutely not requirement of this kind.