gmap3

Features of gmap3

gmap3 is a jquery plugin which allows many manipulation of the google map API version 3.

http://gmap3.net/index.html

Multi-instance

You can use several google map in the same page

Stackable

you can use gmap3 as others jquery plugin

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

Full JQuery

All css selectors can be used

With this html body …

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

… this code first initialize all maps, and then add a marker on two first using 2 differents selectors

$('.gmap3').gmap3(
{action: 'init',
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({
action:'addMarker',
latLng:[29.132318972825445,81.32052349999992]
});
 
$('.gmap3.top').gmap3({
action:'addMarker',
latLng:[29.132318972825445,81.32052349999992]
});

Full google map

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 from a sprite

$('#test').gmap3(
{ action: 'addMarker',
address: "Haltern am See, Weseler Str. 151",
marker:{
options:{
icon:new google.maps.MarkerImage("ui-icons_222222_256x240.png", new google.maps.Size(16, 16), newgoogle.maps.Point((14.5*1), (14.5*10)))
}
},
map:{
center: true,
zoom: 14,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
}
);

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(
{
action: 'addMarker',
latLng: [-33, 151],
map:{
center: true,
zoom: 8
},
callback: function(){
$(this).css('border', '1px solid red');
}
);