Smashinglabs

Getting started...

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

Requirements

			
<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 a JSON 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.

Warning! Geocoding (address option) is intended for only few markers and basic setup. Since every marker needs a request, Google allows only limited (probably 10) geocodings. To improve performance always store lat/lng in your database (preferably in numeric(15,12) format).

Main

These are most general options affecting the whole map.

Controls

Route finder

Warning! Geocoding (address option) is intended for only few markers and basic setup. Since every marker needs a request, Google allows only limited (probably 10) geocodings. To improve performance always store lat/lng in your database (preferably in numeric(15,12) format).

Marker specific

Global

Callbacks

Additional functions

Additional functions may be called on gMap enabled element. Use syntax:

                  
 $("#map").gmap("function name", argument1, argument2, ...); 
                  
                

                  
// you may pass even more complex marker
 $("#map").gmap("addMarker", {latitude: 50.083, longitude: 19.917}); 
                  
                

                  
 $("#map").gmap("addMarkers", [{latitude: 50.083, longitude: 19.917}, {latitude: 50.283, longitude: 19.717}]); 
                  
                

                  
$("#map").gmap("removeAllMarkers");
                  
                

                  
$("#map").gMap('getMarker', 'key5');
                  
                

                  
$("#map").gMap('fixAfterResize', true);
                  
                

                  
map.gMap('setZoom',"fit");
                  
                

                  
map.gMap('changeSettings', {
	latitude: 50.20917,
	longitude: 19.75435,
	zoom: 'fit'
});
                  
                

                  
map.gMap('mapclick',function(latlng){console.log(latlng);});
                  
                

                  
map.gMap('geocode',"Kraków, Poland", function(latlng){console.log(latlng);});
                  
                

                  
var data = $('#map').data('gmap');
$("#map").gMap("getRoute", {from: data.markers[0].getPosition(), to: data.markers[1].getPosition(), routeDisplay: $("#routeDisplay")});
                  
                

Handling gmap after initialisation

I understand that this plugin is best for initial displaying of markers and stuff. If you want to manipulate map later by yourself, simply call:

			  
var gmap = $("#map").data("gmap");

gmap === {
	'opts': opts, // plugin options, used internally
	'gmap': $gmap, // google map object
	'markers': [], // array of markers
	'infoWindow': null // currently opened infowindow
};
			  
			

Map centering rules

In 3.0.0 map is centered based on following points:

• address in options
• latitude & longitude in options
• address of marker[0]
• latitude & longitude of marker[0]
• failsafe (0,0)

• latitude & longitude in options
• address in options
• latitude & longitude of first marker having it
• address of first marker
• failsafe (0,0)

API V2

Google Maps API V2 is no longer supported in 3.0.0 version. Following documentation is for V3 version only. If you need V2 docs please visit http://gmap.nurtext.de/documentation.html.
If you need migration help please visit guide.