Getting started

Downloading GMAP3

There are several ways to download gmap3. You can either download the full package which includes both minified and development version and all standalone demo files on the download page or use directly the latest development version available on github.

Requirements

GMAP3 requires both jQuery and google maps libraries.

Minimal jQuery version required is 1.4 but we recommend the latest version.

You can grab the latest version here.

You also need to include the Google Maps library :

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

Installation

Just include the javascript file into your html page.

Let's Rock

Once you have includes all the libraries, you also need a div target to display a map.

$("#my_map").gmap3();

Important: Google Map needs a non-null height and width div.

So you need to define the "HEIGHT" and "WIDTH" of your div element.

It can be done using different ways :

The CSS way (prefer this one !) :

#my_map{
 height: 350px;
 width: 600px;
}

The jQuery way:

$("#my_map").width("600px").height("350px").gmap3();

The bad way:

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

JQuery features

Multi-instance

You can use several google maps in the same page.

Stackable

you can use gmap3 as others jquery plugins.

$('#test').show().gmap3().css('border', '1px solid #000000');

CSS Selector

With this html code :

<div id="test1" class="gmap3 top"></div>
<div id="test2" class="gmap3 middle"></div>
<div id="test3" class="gmap3 bottom"></div>

... this code first initializes all maps, and then adds a marker on the two first using 2 differents selectors.

$('.gmap3').gmap3({
 map:{
    options:{
     center:[22.49156846196823, 89.75802349999992],
     zoom:2,
     mapTypeId: google.maps.MapTypeId.SATELLITE,
     mapTypeControl: true,
     mapTypeControlOptions: {
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
     },
     navigationControl: true,
     scrollwheel: true,
     streetViewControl: true
    }
 }
});

$('#test2').gmap3({
 marker:{
    latLng:[29.132318972825445,81.32052349999992]
 }
});

$('.gmap3.top').gmap3({
 marker:{
    latLng:[29.132318972825445,81.32052349999992]
 }
});

Contextual

The div element which invokes gmap3 is the this context of the callback and event functions. In the callback function of this example, $(this) is $('#test')

$('#test').gmap3({
 map:{
    options:{
     center: [-33, 151],
     zoom: 8
    }
 },
 marker:{
    latLng: [-33, 151],
    callback: function(){
     $(this).css('border', '1px solid red');
    }
 }
});

Google Maps Features

Native objects

Even if gmap3 simplifies the use of the google map API, it allows to use all the google map API natively. This example show how to add a marker using an icon.

$('#test').gmap3({
 map: {
    options: {
      maxZoom: 14 
    }  
 },
 marker:{
    address: "Haltern am See, Weseler Str. 151",
    options: {
     icon: new google.maps.MarkerImage(
       "http://gmap3.net/skin/gmap/magicshow.png",
       new google.maps.Size(32, 37, "px", "px")
     )
    }
 }
},
"autofit" );

LatLng

The google.maps.LatLng can be simplified by :

• {lat:float, lng:float} : object of 2 floats
• [lat, lng] : array of 2 floats

LatLngBounds

The google.maps.LatLngBounds can be simplified by :

• {ne:LatLng, sw:LatLng} : object of 2 LatLng
• [ne, sw] : array of 2 LatLng
• {n:float, e:float, s:float, w:float} : object of 4 floats
• [n, e, s, w] : array of 4 floats

Address

Most functions automatically solve address through address parameter instead of using latLng.

For example, the function Marker uses a latLng to set a new marker, it is possible to use an address instead of the latLng.

The address will be automatically converted into a latLng.

Please notice that the address resolution is asynchronised because of the exchange with the google service.

Results are cached, so, you can use many times an address string (ie to center a map, and add a marker).

address can be : string : the address as string GeocoderRequest : a complete google object