Mariage entre l'API de Google Maps, Prototype.js et OpenRico, permettant un effet "Accordéon ".
Nous allons créer une fenêtre comportant 4 "accordéons" :
En tapant sur le titre d'un "accordéon", la fenêtre correspondante va s'ouvrir et vous présenter une vue aérienne du château selectionné.
Les types de carte, de contrôles, ainsi que leur emplacement, sont différents pour chaque château.
Le Château de Villandry :Cliquez sur l'un des titres bleus pour voir apparaître le contenu correspondant.
Voici une fenêtre comportant 4 "accordéons" :
En tapant sur le titre d'un "accordéons", la fenêtre correspondante va s'ouvrir et vous présenter une vue aérienne du château selectionné. Le type de carte, de contrôles ainsi que leur emplacement sont différents pour chaque château.
Remarques :
Le Château de Villandry :Il vous faut télécharger et installer prototype.js et rico.js
Prototype.js est une bibliothèque JavaScript ( Site internet consacré à prototype.js )
Rico est également une bibliothèque JavaScript, qui vient se superposer àPrototype.js.
Rico dispose de plusieurs fonctionnalités permettant d'ajouter des effets spéciaux et des techniques de gisser-déposer ( Site internet consacré à rico.js ).
[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>Le mariage Google Maps, Prototype.js et Rico : Accordéons</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] <link href='http://www.touraineverte.com/Google-Maps/Rico-Prototype/rico.css' media='all' rel='Stylesheet' type='text/css' /> [8] <script src='http://www.touraineverte.com/Google-Maps/javascript/prototype.js' type='text/javascript'></script> [9] <script src='http://www.touraineverte.com/Google-Maps/javascript/rico/src/rico.js' type='text/javascript'></script> [10] <script language='JavaScript' type='text/JavaScript'> [11] function load (){ [12] if (GBrowserIsCompatible()) { [13] Création de la Carte du château de Villandry [14] var Villandry = new GMap2(document.getElementById('EmplacementDeVillandry'), {mapTypes:[G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP]}); [15] Villandry.addControl(new GLargeMapControl()); [16] Villandry.addControl(new GMapTypeControl()); [17] Villandry.setCenter(new GLatLng(47.341571,0.514233), 16); [18] [19] Création de la Carte du château de Chenonceau [20] var Chenonceau = new GMap2(document.getElementById('EmplacementDeChenonceau'), {mapTypes:[G_SATELLITE_MAP,G_HYBRID_MAP,G_NORMAL_MAP]}); [21] Chenonceau.addControl(new GSmallMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(10,10))); [22] Chenonceau.setCenter(new GLatLng(47.32524, 1.069965), 15); [23] [24] Création de la Carte du château de Chinon [25] var Chinon = new GMap2(document.getElementById('EmplacementDeChinon'), {mapTypes:[G_HYBRID_MAP,G_NORMAL_MAP]}); [26] Chinon.addControl(new GSmallZoomControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT,new GSize(10,30))); [27] Chinon.addControl(new GScaleControl(), new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(10,10))); [28] Chinon.setCenter(new GLatLng(47.168076,0.235895), 17); [29] var point = new GLatLng(47.168076,0.235895); [30] var Marqueur = CreerUnMarqueur(point, "Le château de Chinon en Indre et Loire (37) - France"); [31] Chinon.addOverlay(Marqueur); [32] } [33] } [34] Création d'un Marqueur [35] function CreerUnMarqueur(point,html) { [36] var Marqueur = new GMarker(point); [37] GEvent.addListener(Marqueur, "click", function() { [38] Marqueur.openInfoWindowHtml(html); [39] }); [40] return Marqueur; [41] } [42] </script> [43] </head> [44] [45] <body onload="load()" onunload="GUnload()"><center> [46] <script src="http://www.touraineverte.com/Google-Maps/javascript/rico/src/ricoCommon.js" type="text/javascript"></script> [47] <script src="http://www.touraineverte.com/Google-Maps/javascript/rico/src/ricoEffects.js" type="text/javascript"></script> [48] <script src="http://www.touraineverte.com/Google-Maps/javascript/rico/src/ricoBehaviors.js" type="text/javascript"></script> [49] <script src="http://www.touraineverte.com/Google-Maps/javascript/rico/src/ricoDragDrop.js" type="text/javascript"></script> [50] <script src="http://www.touraineverte.com/Google-Maps/javascript/rico/src/ricoComponents.js" type="text/javascript"></script> [51] <h3>RESULTAT</h3> [52] <div align="center"> [53] [54] <p style="display:inline">Cliquez sur l'un des titres bleus pour voir apparaître [55] le contenu correspondant.</p> [56] <br /> [57] <div style="margin-top:6px; border-top-width:1px; border-top-style:solid;" id="accordionExample"> [58] [59] <div id="panel1Header" class="accordionTabTitle">La Présentation : Un p'tit [60] truc rigolo avec OpenRico et Google Maps</div> [61] <div id="panel1Content" class="accordionTabContent" style="width: 498px; height: 400px; margin: 0; padding: 0; overflow:scroll; text-align:left;"> [62] [63] <p>Voici une fenêtre comportant 4 "accordéons" :</p> [64] <ul class="simple"> [65] [66] <li>La Présentation,</li> [67] [68] <li>Le Château de Villandry,</li> [69] [70] <li>Le Château de Chenonceau,</li> [71] [72] <li>Le Château de Chinon.</li> [73] </ul> [74] [75] <p>En tapant sur le titre d'un "accordéons", la fenêtre correspondante [76] va s'ouvrir et vous présenter une vue aérienne du château selectionné. [77] Le type de carte, de contrôles ainsi que leur emplacement sont différents [78] pour chaque château.</p> [79] <ul> [80] <li><a href="http://www.google.com/apis/maps/documentation/">Cliquez ici pour lire La documentation Google Maps en Anglais</a></li> [81] <li><a href="http://openrico.org/rico/home.page">Cliquez ici pour lire La documentation OpenRico en Anglais</a></li> [82] <li><a href="http://www.prototypejs.org/">Cliquez ici pour lire La documentation Prototype.js en Anglais</a></li> [83] </ul> [84] <p><u>Remarques</u> :</p> [85] [86] <u>Le Château de Villandry : </u> [87] <ul class="simple"> [88] <li>Type de carte : Plan</li> [89] [90] <li>Bouton : Plan - Satellite - Mixte - En haut à droite (emplacement [91] par défaut) </li> [92] <li>Contrôle : Grand + Zoom - En haut à gauche (emplacement par défaut)</li> [93] <li>Marqueur : Aucun</li> [94] <li>Echelle : Non</li> [95] <li>Zoom : 16</li> [96] </ul> [97] [98] <u>Le Château de Chenonceau : </u> [99] <ul class="simple"> [100] <li>Type de carte : Satellite</li> [101] <li>Bouton : Aucun</li> [102] [103] <li>Contrôle : Petit + Zoom - En haut à droite</li> [104] <li>Marqueur : Aucun</li> [105] <li>Echelle : Non</li> [106] <li>Zoom : 15</li> [107] </ul> [108] [109] <u>Le Château de Chinon : </u> [110] <ul class="simple"> [111] <li>Type de carte : Mixte</li> [112] [113] <li>Bouton : Plan - Mixte - Satellite (Bouton personnalisés) - En bas [114] à gauche</li> [115] <li>Contrôle : Zoom - En bas à droite</li> [116] <li>Marqueur : Oui - Apparition d'une info-bulle en cliquant dessus</li> [117] [118] <li>Echelle : Oui - En haut à gauche</li> [119] <li>Zoom : 17</li> [120] </ul> [121] <br /> [122] </div> [123] [124] <div id="panel2"> [125] [126] <div id="panel2Header" class="accordionTabTitle">Le Château de Villandry [127] (France)</div> [128] <div id="panel2Content" class="accordionTabContent"> [129] <div id="EmplacementDeVillandry" style="width: 498px; height: 400px; margin: 0; padding: 0; z-index: 100"></div> [130] </div> [131] </div> [132] [133] <div id="panel3"> [134] [135] <div id="panel3Header" class="accordionTabTitle">Le Château de Chenonceau [136] (France)</div> [137] <div id="panel3Content" class="accordionTabContent"> [138] <div id="EmplacementDeChenonceau" style="width: 498px; height: 400px; margin: 0; padding: 0; z-index: 100"></div> [139] </div> [140] </div> [141] [142] <div id="panel4"> [143] [144] <div id="panel4Header" class="accordionTabTitle">Le Château de Chinon (France)</div> [145] <div id="panel4Content" class="accordionTabContent"> [146] <div id="EmplacementDeChinon" style="width: 498px; height: 400px; margin: 0; padding: 0; z-index: 100"></div> [147] </div> [148] </div> [149] </div> [150] <br /> [151] </div> [152] <script type="text/javascript"> [153] //<![CDATA[ [154] Event.observe(window, 'load', function(){ new Rico.Accordion('.accordionTabTitle', '.accordionTabContent', {panelHeight:400}) }) [155] //]]> [156] </script> [157] </body> [158] </html>
Néant
Néant