Téléchargement et installations préliminaires
Dans un premier temps vous devez télécharger ces deux fichiers :
puis les transférer sur votre serveur. Dans toutes les pages qui suivent, on suppose que ces deux fichiers sont accessibles depuis les adresses suivantes :
/** * Pour le framework JQuery * on suppose qu'il est accessible depuis * votre domaine à l'adresse suivante : */ www.votredomaine.fr/js/jquery.js /** * Pour le plugin JQuery GMap3 * on suppose qu'il est accessible depuis * votre domaine à l'adresse suivante : */ www.votredomaine.fr/js/gmap3.js
Une autre solution consiste à utiliser les CDN jQuery. Dans ce cas, il n'est pas nécessaire de télécharger et d'installer jQuery sur votre serveur.
/** * Pour le framework JQuery * vous pouvez utiliser * l'adresse des CDN jQuery : */ code.jquery.com/jquery-1.6.4.min.js /** * Pour le plugin JQuery GMap3 * on suppose qu'il est accessible depuis * votre domaine à l'adresse suivante : */ www.votredomaine.fr/js/gmap3.js
Charger JQuery
Tout d'abord, votre page doit comporter dans la section <head/>, une balise <script/> pointant vers l'URL permettant de charger JQuery :
<script type="text/javascript" src="http://www.votredomaine.fr/js/jquery.js"></script>
ou si vous utilisez les CDN jQuery :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
Charger l'API Google Maps JavaScript V3
Puis, toujours dans la section <head/>, une balise <script/> pointant vers l'URL permettant de charger l'API Google Maps JavaScript version 3 :
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Charger le plugin jQuery gmap3
Enfin, on fait de même pour charger le plugin JQuery nommé gmap3 :
<script type="text/javascript" src="http://www.votredomaine.fr/js/gmap3.js"></script>
Attention : Vous devez impérativement respecter l'ordre indiqué ci-dessus.
Exemple
Vous êtes désormais prêt pour vous lancer à corps perdu dans l'utilisation du plugin JQuery gmap3.
Grâce à la simplicité de gmap3, la minuscule ligne de code ci-dessous vous permet d'intégrer une carte Google dans votre page web. Super simple, n'est-ce pas ?
$(function(){
$('#maCarte').gmap3();
});
Important : Google Maps a besoin d'une balise <div/> dont la hauteur et la largeur soient non nulles. Vous devez donc définir la largeur (width) et la hauteur (height) de votre balise <div/>.
Cela peut se faire de deux façons :
La version CSS (utilisée dans cet exemple)
#maCarte{
height: 350px;
width: 100%;
}
La version en ligne
<div id="maCarte" style="height:350px; width:100%"></div>
Important : Vous êtes libre d'utiliser n'importe quel nom pour désigner votre carte et identifier la balise <div/> destinée à la contenir. il n'y a absolument aucune obligation de nommage.
Exemple de carte 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>Votre titre de 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();
});
</script>
</head>
<body>
<div id="maCarte"></div>
</body>
</html>