Thursday, May 31, 2012

Add Google Maps to website using jQuery

jQuery Google maps has become extremely popular among the internet users and widely used. You must have seen Google maps on Contact us page of many website. Now you can also integrate Google Maps in your website with the help of jQuery Google Map Plugin called "GMap.js". There are many jQuery Google maps plugin available but I liked this one because it is very easy to integrate. Add google maps api with less pain and more fun....


GMaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

Features

  • Very easy to integrate with less line of codes.
  • Have options to display direction.
  • You can highlight or create overlay on Map.
  • Various useful events to handle.
  • Option for drawing Routes on the map.
  • Provides Context menu.
  • Display static maps using Marker or Polylines.

How to use it?


Well, download the plugin and include its library on your page. And the very basic use of this plugin is below jQuery code.
var map;
$(document).ready(function() {
    map = new GMaps({
        div: '#map',
        lat: -12.043333,
        lng: -77.028333
    });
});​
This plugin also comes with various events like click event and drag event. This is useful if you want to record how many users have clicked on map as that helps you to determine use of Google map on your website.
Feel free to contact me for any help related to jQuery, I will gladly help you.