AGRANDIR UNE INFO-BULLE - LE CONTENU VARIE EN FONCTION DE LA TAILLE
PRESENTATION
Dans cet exemple, nous allons créer une carte :
- appelée "MaCarte",
- de 710 pixels de large et 400 pixels de haut,
- avec un niveau de zoom égal à 9
- centrée sur le point ayant pour :
- Latitude : 47.327654
- Longitude : 0.690765.
Elle comporte quatre marqueurs :
- Le premier cible Savonnières :
- Latitude : 47.346965
- Longitude : 0.536399
- Le second cible Le pont de Langeais :
- Latitude : 47.32076
- Longitude : 0.402718
- Le troisième cible un barrage à aiguilles :
- Latitude : 47.345351
- Longitude : 0.893862
- Le quatrième cible un Moulin sur le Cher :
- Latitude : 47.334489
- Longitude : 0.94302
En cliquant sur chacun de ces marqueurs, une fenêtre (ou info-bulle) s'ouvre, contenant des informations sommaires (voir les captures d'écran ci-dessous).
En cliquant sur 
situé en haut à droite de l'info-bulle, celle-ci va s'agrandir pour couvrir
la totalité de la surface de la carte et afficher de nouvelles informations
plus détaillées (voir capture d'écran ci-dessous).
Le bouton
a été remplacé par 
.
En cliquant dessus , l'info-bulle va se rétrécir pour retrouver sa taille et les informations initiales.
RESULTAT
CODE
[1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> [2] <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr"> [3] <head> [4] <title>Google Maps - Comment agrandir une fenêtre ou info-bulle.</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.89&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] _mFlags = {}; [15] [16] Fonction "CreerUnMarqueur()" permettant la création d'un marqueur ( Coordonnées, texte figurant dans la mini info-bulle, Chemin-Nom vers le fichier de la Maxi info-bulle, titre apparaissant au survol sur marqueur par la souris ) ... [17] function CreerUnMarqueur(point,html,infoUrl,titre) { [18] [19] Création d'un nouveau marqueur appelé "Marqueur" ayant pour coordonnées celles de "point" et pour titre "titre" ... [20] var Marqueur = new GMarker(point,{title:titre}); [21] [22] ... Un premier observateur d'événement est ajouté au marqueur appelé "Marqueur". L'évenement détecté est "click" (Détecte si un click est effectué sur le marqueur appelé "Marqueur"). Si un click a été effectué sur le marqueur appelé "Marqueur", la fonction située entre les {} sera alors executée ... [23] GEvent.addListener(Marqueur, "click", function() { [24] [25] ... [26] Marqueur.openInfoWindowHtml(html, {maxUrl:infoUrl}); [27] }); [28] [29] ... Un second observateur d'événement est ajouté au marqueur appelé "Marqueur". L'évenement détecté est "infowindowclose" (Détecte la fermeture de l'info-bulle liée au marqueur appelé "Marqueur"). Si la fermeture de l'info-bulle (qu'elle soit maxi ou mini) liée au marqueur appelé "Marqueur" a été détectée, la fonction située entre les {} sera alors executée ... [30] GEvent.addListener(Marqueur, "infowindowclose", function() { [31] [32] On recentre, avec un effet visuel de glissement (panTo), la carte appelée "MaCarte" sur le point ayant pour Latitude : 47.327654 et Longitude : 0.690765 et avec un niveau de zoom égal à 9 ... [33] Macarte.panTo(new GLatLng(47.327654,0.690765), 9); [34] }); [35] [36] On retourne les propriétés du marqueur appelé "Marqueur"... [37] return Marqueur; [38] } [39] [40] Création de la carte nommée "Macarte" [41] [42] ... 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" ... [43] var Macarte = new GMap2(document.getElementById("EmplacementDeMacarte")); [44] [45] ... La carte "CarteZoom" est centrée sur la Latitude 47.327654, la Longitude 0.690765, avec un niveau de zoom égal à 9 .... [46] Macarte.setCenter(new GLatLng(47.327654,0.690765), 9); [47] [48] Ajout de controles : bouton et zoom [49] Macarte.addControl(new GLargeMapControl()); [50] Macarte.addControl(new GMapTypeControl()); [51] [52] Le Cher à vélo : Savonnières [53] [54] [55] Création d'un point ayant pour Latitude : 47.346965 et Longitude : 0.536399 [56] var point = new GLatLng(47.346965,0.536399); [57] Création du Marqueur par appel de la fonction CreerUnMarqueur( Coordonnées, texte figurant dans la mini info-bulle, Chemin-Nom vers le fichier de la Maxi info-bulle, titre apparaissant au survol sur marqueur par la souris ) [58] var Marqueur = CreerUnMarqueur(point, "<b>Marqueur 1</b><br /><br />Le Cher à vélo : Savonnières.", "le-cher-a-velo-savonnieres.htm", "Marqueur 1 : Savonnière"); [59] Ajout du marqueur à la carte "MaCarte" [60] Macarte.addOverlay(Marqueur); [61] [62] [63] Le pont de Langeais [64] [65] [66] Création d'un point ayant pour Latitude : 47.32076 et Longitude : 0.402718 [67] var point = new GLatLng(47.32076,0.402718); [68] Création du Marqueur par appel de la fonction CreerUnMarqueur( Coordonnées, texte figurant dans la mini info-bulle, Chemin-Nom vers le fichier de la Maxi info-bulle, titre apparaissant au survol sur marqueur par la souris ) [69] var Marqueur = CreerUnMarqueur(point, "<b>Marqueur 2</b><br /><br />Le pont de Langeais.", "le-pont-de-langeais.htm", "Marqueur 2 : Langeais"); [70] Ajout du marqueur à la carte "MaCarte" [71] Macarte.addOverlay(Marqueur); [72] [73] [74] Le barrage a aiguilles [75] [76] Création d'un point ayant pour Latitude : 47.345351 et Longitude : 0.893862 [77] var point = new GLatLng(47.345351,0.893862); [78] Création du Marqueur par appel de la fonction CreerUnMarqueur( Coordonnées, texte figurant dans la mini info-bulle, Chemin-Nom vers le fichier de la Maxi info-bulle, titre apparaissant au survol sur marqueur par la souris ) [79] var Marqueur = CreerUnMarqueur(point, "<b>Marqueur 3</b><br /><br />Une barrage à aiguilles.", "le-barrage-a-aiguilles.htm", "Marqueur 3 : Barrage"); [80] Ajout du marqueur à la carte "MaCarte" [81] Macarte.addOverlay(Marqueur); [82] [83] [84] Le Moulin au bord du Cher [85] [86] [87] Création d'un point ayant pour Latitude 47.334489 : et Longitude : 0.943022 [88] var point = new GLatLng(47.334489,0.943022); [89] Création du Marqueur par appel de la fonction CreerUnMarqueur( Coordonnées, texte figurant dans la mini info-bulle, Chemin-Nom vers le fichier de la Maxi info-bulle, titre apparaissant au survol sur marqueur par la souris ) [90] var Marqueur = CreerUnMarqueur(point, "<b>Marqueur 4</b><br /><br />Le Moulin Vallet en bord de Cher.", "le-moulin.htm", "Marqueur 3 : Moulin"); [91] Ajout du marqueur à la carte "MaCarte" [92] Macarte.addOverlay(Marqueur); [93] [94] [95] Si le navigateur n'est pas compatible avec l'API de Google Maps ... [96] }else{ [97] [98] ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". [99] alert("Désolé, l'API Google Maps n'est pas compatible avec votre navigateur"); [100] } [101] //]]> [102] } [103] </script> [104] </head> [105] [106] Au chargement de la page, la fonction load() est executée. A la fermeture de la page, la fonction GUnload() est exécutée [107] <body onload="load()" onunload="GUnload()"><center> [108] [109] 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". [110] <div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div> [111] </body> [112] </html>
EXPLICATIONS
Clef API Google Maps
Ligne [6] :
n'oubliez pas de remplacer Votre_Clef_API_Ici par
la clé API que google maps vous a fourni pour votre site.
Fonction CreerUnMarqueur ( point, html, infoUrl, titre )
Ligne [16] à [37] :
La fonction CreerUnMarqueur ( point, html, infoUrl, titre)
permet la création des marqueurs. Elle utilise trois paramètres :
- point : Point auquel est rattaché le marqueur,
- html : C'est le texte, au format HTML, apparaissant dans la petite fenêtre,
- infoUrl : C'est le chemin-nom du fichier, ici "le-pont-de-langeais.htm", dont le contenu apparaît dans la fenêtre, une fois celle-ci agrandie,
- titre : Titre s'affichant au survol du marqueur par la souris.
Ligne [20] :
Créé un nouveau marqueur ( Marqueur ) aux latitude et longitude
du point.
Ligne [23] :
Détecte si un click est effectué sur le marqueur ( Marqueur
). La Ligne [26] est alors exécutée.
Ligne [26] :
Ouverture d'une info-bulle associée au marqueur ( Marqueur
) affichant au :
- Format réduit, le contenu de html,
- Format agrandi, le contenu de infoUrl (infoUrl = chemin-nom du fichier contenant les informations au format HTML).
Ligne [30] :
Détecte la fermeture de l'info-bulle liée au marqueur ( Marqueur
). La Ligne [33] est alors exécutée.
Ligne [33] :
On recentre, avec un effet visuel de glissement (panTo), la
carte appelée "MaCarte" sur le point ayant pour Latitude :
47.327654 et Longitude : 0.690765 et avec
un niveau de zoom égal à 9.
Ligne [37] :
Retourne le marqueur ( marker ).
Détails du marqueur localisant Le pont de Langeais
Ligne [63] à [71] :
Paramétrage du marqueur "Marqueur" localisant Le
pont de Langeais.
Ligne [67] :
Création d'un "point" ayant pour latitude 47.32076
et longitude 0.402718.
Ligne [69] :
Appel de la fonction CreerUnMarqueur ( point, html, infoUrl, titre ).
- point : correspond au point créé par new GLatLng(47.32076,0.402718)
- html : Code au format HTML figurant dans la petite info-bulle
: <b>Marqueur 2</b><br /><br />Le pont de Langeais.
- infoUrl : Chemin - Nom du fichier contenant les informations
devant être affichées dans l'info-bulle agrandie :
le-pont-de-langeais.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Google Maps - Le pont de Langeais</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p><span id="photo"><img src="le-pont-de-langeais.jpg" alt="Le pont de Langeais" width="400px" height="299" /></span> <b>Le pont de Langeais :</b><br /><br />avec ses tours et ses châtelets interpelle les touristes. C’est un des monuments les plus photographiés de la ville. Au risque de décevoir les visiteurs, le pont n’est pas contemporain du Château. La décision de construire un pont remonte à 1839 (ordonnance de Louis Philippe). La première pierre est posée en 1846 et l’inauguration a lieu en grande pompe en 1849. En 1859, la foudre détruit une partie du pont. Reconstruit, il est une nouvelle fois inauguré en 1861. Pendant la guerre de 1870, les câbles sont coupés par décision militaire et voilà le pont suspendu encore une fois hors d’usage. Il sera reconstruit et remis en service en 1874. Jusqu’en 1888, un droit de péage est exigé des passants.</p> <p>Remanié, transformé dans son aspect extérieur, il sera ànouveau inauguré en 1936. L’ouvrage est partiellement miné en 1940 et le tablier du pont s’écroule. Il sera réparé en 1946 au moyen d’une passerelle posée par-dessus. Entre temps on utilisait le bac pour traverser. Après 11 mois de travail assidu, le pont est remis en service le 8 novembre 1950. Ce pont impressionnant et majestueux a connu en 150 ans bien des vicissitudes de l’histoire et reste un Géant aux pieds d’argile.</p> <p>Découvrez Langeais via le site internet <a href="http://www.langeais.fr/" title="Le site internet de Langeais">http://www.langeais.fr/</a></p> <p> </p> </body> </html>
- titre : Marqueur 2 : Langeais
Ligne [71] :
Ajoute le marqueur "Marqueur" à la carte "MaCarte".
REMARQUES
Attention :
Lorsque l'info-bulle adopte sa taille maximale, les différents contrôles (Zoom, mini carte, bouton [Plan/Carte] - [Satellite] - [Mixte] , échelle) sont masqués. Ils réapparaitront lorsque l'info-bulle sera à nouveau rétrécie
Il faut fixé la version de l'api à 2.89, sinon cela ne fonctionne pas :
Ligne [6] <script src="http://maps.google.com/maps?file=api&v=2.89&key= Mettez Votre Clef API Ici " type="text/javascript"></script>