gMap for V3 Google Maps API

Getting started...

...with gMap is very easy. Simply follow these steps and you're ready to go!

Requirements

To use jquery.gMap simply include jQuery and Google Maps scripts. Using CDN versions sounds like good idea:

			
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
			
		

Installation

Download the latest version of gMap and include the Google Maps API along with jQuery and gMap at the page bottom, just before </body> tag (it is good for page loading process).

			
<script src="/scripts/jquery.gmap.min.js" type="text/javascript"></script>
			
		

HTML structure

The HTML structure is quite simple too. Just place a <div> somewhere on your page, style it with CSS (don't forget to assign a fixed width & height) and give it a unique ID or class. If you need a placeholder for browsers not supporting google maps, place any text in div. It will be removed if load succeeds.

			
<div id="map">Placeholder in case of loading failure</div>
			
		

Creating a map

Select the new div element using jQuery's selectors and call the gMap() function on it. I recommend to call the function as soon as the DOM is ready. Please refer to jQuery Events/ready for further infomation.

			
$(window).ready(function () {
$('#map').gMap();
});
			
		

Customizing

gMap can be customized in many different ways. All you need to do is to pass aJSON object to the gMap() function. Please see other tabs for a complete list of properties that can be passed. Options marked red are highly recommended.

Features

gMap allows you to:

  • Set initial position and type of map
  • Set minimum, maximum and initial zoom level
  • Add multiple markers with custom icons, popups and titles
  • Position marker by latitude/longitude as well as by its address (Using Google Geocoding API)
  • Set your customized map controls
  • Retrieve map object and use it for even most complex tasks

Purpose of gMap is to help you keep your code clean and to create Google Map in very easy way, without learning its API. In future versions gMap will be improved with functions that are hard to achieve with Google Maps. Hopefully it will turn into great data visualisation tool, while still maintaining its simplicity.

Demo Download

About The Massive Technolab

Avatar
Who We Are

Massive Technolab is a Leading IT services Company in India that expertise in web Development, Web Design and SEO at affordable rates.

Leave a Comment

comments powered by Disqus