Dans cet exemple, nous allons créer une carte :
[1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [2] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> [3] <head> [4] <title>Google Maps - GMap2 - Créer une carte simple</title> [5] <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> [6] <script src="http://maps.google.com/maps?file=api&v=2.x&key= Mettez Votre Clef API Ici " type="text/javascript"></script> [7] <script type="text/javascript"> [8] //<![CDATA[ [9] Fonction load() [10] function load() { [11] [12] Si le navigateur est compatible avec l'API de Google Maps ... [13] if (GBrowserIsCompatible()) { [14] [15] ... Création d'une nouvelle carte ayant pour nom "MaCarte" et qui se situera en lieu et place de la <div> ayant pour identifiant (id) "EmplacementDeMacarte" ... [16] var Macarte = new GMap2(document.getElementById('EmplacementDeMacarte')); [17] [18] ... La carte "Macarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13. [19] Macarte.setCenter(new GLatLng(47.341571,0.514233), 13); [20] [21] Si le navigateur n'est pas compatible avec l'API de Google Maps ... [22] }else{ [23] [24] ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". [25] alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps'); [26] } [27] } [28] //]]> [29] </script> [30] </head> [31] [32] Au chargement de la page, la fonction load() est executée. A la fermeture de la page, la fonction GUnload() est exécutée --> [33] <body onload="load()" onunload="GUnload()"><center> [34] [35] La <div> ayant pour id "EmplacementDeMacarte" fait 740 pixels de largeur et 400 pixels de haut. C'est à cet endroit que va venir s'afficher la carte "MaCarte". --> [36] <div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div> [37] </body> [38] </html>
Ligne [06] :
n'oubliez pas de remplacer Votre_Clef_API_Ici par
la clé API que google maps vous a fourni pour votre site
Ligne [33] :
Lorsque votre navigateur va charger cette page, il va exécuter la fonction située
à l'intérieur des guillements de onload : c'est à dire la fonction
load().
Lorsque vous allez quitter cette page il va exécuter la fonction située à l'intérieur
des guillements de onunload : c'est à dire la fonction GUnload()
contenue dans l'API de Google Maps.
Il est très important de ne pas omettre la fonction GUnload()
car elle permet
d'éliminer des fuites de mémoire d'Internet Explorer.
Ligne [10] à [27] :
Ces lignes définissent la fonction load().
Ligne [13] :
vérifie que le navigateur est compatible avec l'API de Google Maps. Si votre
navigateur est compatible alors les lignes [16]
et [19] seront exécutées. Sinon la ligne [25]
sera exécutée, un message d'alerte vous informera que votre navigateur n'est
pas compatible avec Google Maps et aucune carte n'apparaîtra à l'écran..
Ligne [16] :
création d'une nouvelle carte, appelée "MaCarte"
qui sera positionnée dans la <div> ayant pour identifiant
"EmplacementDeMacarte" (c'est à dire dans la <div> située
en ligne [36]).
Ligne [19] :
La carte, appelée "MaCarte", sera centrée sur le
point ayant pour latitude 47.341571, longitude 0.514233,
et avec un niveau de zoom égal à 13.
Ligne [36] :
C'est la <div> ayant pour identifiant "EmplacementDeMacarte"
qui va contenir "MaCarte". Ses dimensions sont fixées à 740
pixels de largeur et 400 pixels de hauteur
En conclusion, pour créer votre propre carte, il vous suffit de copier ce code est de changer la :
Pour connaître la Latitude et la Longitude d'un point ou d'une adresse, sans GPS, veuillez consulter :
ou
Par défaut, la carte générée par Google Maps a les caractéristiques suivantes :