GMAP3 – A jQuery Google Maps Plugin For The Developers

GMAP3 is one of the finest Google Maps jQuery Plugin which uses Google Map API version 3 to create maps with the advanced features available in it. Google themselves has simplified the efforts in adding the maps in any website, but still applying some advance features are tricky sometimes. Unlike the other Google Maps plugin, GMAP3 aims to allows many manipulation of the google map API version 3.

Let me take a look on the integration part.

As I said, integration Google Maps with GMAP3 is simple and all you need is adding few things to get start with it

Step 1: Add the Google Maps script before closing </head>

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

Step 2: Download the GMAP3 jQuery Plugin and upload it to your server

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

Now in order to embed the Google Maps, do the following

$(function(){ // or $(document).ready(function(){

  $("#examplediv").gmap3();
});

According to Google Maps you need to define height and width with the div which can be achieved either by using CSS or by inline HTML

CSS based:

#examplediv {
  height: 350px;
  width: 600px;
  margin: 20px auto; //optional
}

Inline HTML

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

If you have any issue with this plugin, let us know.