Les caractéristiques de gmap3
gmap3 est un plugin jQuery qui permet de nombreuses manipulations de l'API Google Maps JavaScript version 3.
Multi-instances
Vous pouvez insérer et utiliser plusieurs cartes Google dans une même page web.
Chaînable
Vous pouvez utiliser gmap3 comme tout autre plugin JQuery.
$('#test').show().gmap3().css('border', '1px solid #000000');
Full JQuery
Tous les sélecteurs CSS peuvent être utilisés.
Dans la balise <body/> ...
<body> <div id="test1" class="gmap3 top"></div> <div id="test2" class="gmap3 middle"></div> <div id="test3" class="gmap3 bottom"></div> </body>
... ce code, dans un premier temps, initialise toutes les cartes, puis ajoute un marqueur sur les deux premières en utilisant 2 sélecteurs différents.
$('.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]
});
Exemple de cartes gmap3
<div id="test1" class="gmap3 top"></div>
<div id="test2" class="gmap3 middle"></div>
<div id="test3" class="gmap3 bottom"></div>
Exemple de code complet gmap3
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="UTF-8" />
<title>Titre de votre page</title>
<style type="text/css">
html{height: 100%}
body{height:100%;margin:0px;padding:0px}
.gmap3{height:100%}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
<script type="text/javascript">
$(function(){
$('.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]
});
});
</script>
</head>
<body>
<div id="test1" class="gmap3 top"></div>
<div id="test2" class="gmap3 middle"></div>
<div id="test3" class="gmap3 bottom"></div>
</body>
</html>
Full Google Maps
Même si gmap3 simplifie l'utilisation de l'API Google Maps JavaScript version 3, il permet néanmoins d'en utiliser toutes les fonctionnalités natives.
Cet exemple vous montre comment afficher un marqueur sur la carte en utilisant la technique des sprites CSS. Cette technique consiste à charger une seule image comportant tous les marqueurs susceptibles d'être affichés. Puis, à l'aide de règles CSS on sélectionne la portion de l'image comportant le marqueur que l'on souhaite afficher.
$('#maCarte').gmap3(
{
action: 'addMarker',
address: "Haltern am See, Weseler Str. 151",
marker:{
options:{
icon:new google.maps.MarkerImage("http://jquery-ui.googlecode.com/svn-history/r3145/branches/labs/assets/theme/images/ui-icons_222222_256x240.png", new google.maps.Size(16, 16), new google.maps.Point((14.5*1), (14.5*10)))
}
},
map:{
center: true,
zoom: 14,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
}
);
Image utilisée pour le sprite CSS : http://jquery-ui.googlecode.com/svn-history/r3145/branches/labs/assets/theme/images/ui-icons_222222_256x240.png
Exemple de cartes gmap3
Exemple de code complet gmap3
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="UTF-8" />
<title>Titre de votre page</title>
<style type="text/css">
html{height: 100%}
body{height:100%;margin:0px;padding:0px}
#maCarte{height:100%}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
<script type="text/javascript">
$(function(){
$('#maCarte').gmap3(
{
action: 'addMarker',
address: "Haltern am See, Weseler Str. 151",
marker:{
options:{
icon:new google.maps.MarkerImage("http://jquery-ui.googlecode.com/svn-history/r3145/branches/labs/assets/theme/images/ui-icons_222222_256x240.png", new google.maps.Size(16, 16), new google.maps.Point((14.5*1), (14.5*10)))
}
},
map:{
center: true,
zoom: 14,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
}
);
});
</script>
</head>
<body>
<div id="maCarte"></div>
</body>
</html>
Contextuel
this se réfère à la balise <div/> invoquant gmap3, pour les événements et fonctions de rappel.
Dans la fonction de rappel (callback) de cet exemple, $(this) correspond à $('#test')
$('#test').gmap3(
{
action: 'addMarker',
latLng: [-33, 151],
map:{
center: true,
zoom: 8
},
callback: function(){
$(this).css('border', '1px solid red');
}
}
);
Exemple de cartes gmap3
Exemple de code complet gmap3
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="UTF-8" />
<title>Titre de votre page</title>
<style type="text/css">
html{height: 100%}
body{height:100%;margin:0px;padding:0px}
#test{height:100%}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
<script type="text/javascript">
$(function(){
$('#test').gmap3(
{
action: 'addMarker',
latLng: [-33, 151],
map:{
center: true,
zoom: 8
},
callback: function(){
$(this).css('border', '1px solid red');
}
}
);
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>