Google
 

AGRANDIR UNE INFO-BULLE DES L'OUVERTURE DE LA PAGE

PRESENTATION

Dans cet exemple, nous allons créer une carte :

  • appelée "MaCarte",
  • de 740 pixels de large et 400 pixels de haut,
  • avec un niveau de zoom égal à 16
  • centrée sur le point ayant pour :
    • Latitude : 47.127268
    • Longitude : 0.998905.

Elle comporte un marqueur :

  • Celui-ci cible le logis royal à Loches :
    • Latitude : 47.127268
    • Longitude : 0.998905

Dès l'ouverture de la page, l'info-bulle (ou fenêtre) s'ouvre au maximum de façon à couvrir la quasi-totalité de la surface de la carte. Les informations détaillées contenues à l'intérieur sont issues d'un fichier HTML ou PHP etc... (voir capture d'écran ci-dessous)

Ceci est une capture d'écran

En cliquant sur Ceci est une capture d'écran situé en haut à droite de l'info-bulle, celle-ci va rétrécir lentement et afficher de nouvelles informations, plus synthétiques (voir capture d'écran ci-dessous) .

Ceci est une capture d'écran

Le bouton Agrandir l'info-bulle a été remplacé par Réduire l'info-bulle . En cliquant dessus , l'info-bulle va s'agrandir à nouveau pour atteindre sa taille maximale.

Le bouton Fermer l'info-bulle permet quant à lui de fermer l'info-bulle. Dès lors un click sur le marqueur va déclencher l'ouverture maximale de l'info-bulle.

 

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 - Fenêtre agrandissable - Le Logis Royal à Loches</title>
   [5] <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   [6] 
   [7] <script src="http://maps.google.com/maps?file=api&v=2.89&key= Mettez Votre Clef API Ici " type="text/javascript"></script>
   [8] <link rel="stylesheet" type="text/css" href="http://www.touraineverte.com/Google-Maps/style.css"></link>
   [9] <link rel="alternate" type="application/rss+xml" href="http://www.touraineverte.com/Google-Maps/rss.xml" title="Google Maps : Exemples et Tutoriels"></link>
  [10] </head>
  [11] 
  [12] <body onunload="GUnload()">
  [13] <div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div>
  [14] <p></p>
  [15] <div id="cadre">
  [16] 	15 secondes après l'affichage de cette page, l'info-bulle va s'agrandir automatiquement.<br />
  [17] 	Vous pouvez également cliquer sur les boutons ci-dessous pour agrandir ou rétrécir l'info-bulle<br />
  [18] 	<br />
  [19] 	<div align="center">
  [20] 		<input type="button" value="Agrandir" onClick="Macarte.getInfoWindow().maximize();" />
  [21] 		<input type="button" value="Rétrécir" onClick="Macarte.getInfoWindow().restore();" />
  [22] 	</div>
  [23] </div>
  [24] <script type="text/javascript">
  [25] 	//<![CDATA[
  [26] 		if (GBrowserIsCompatible()) { 
  [27] 		  _mFlags = {};
  [28] 		  var Macarte = new GMap(document.getElementById("EmplacementDeMacarte"));
  [29] 		  Macarte.addControl(new GLargeMapControl());
  [30] 		  Macarte.addControl(new GMapTypeControl());
  [31] 		  Macarte.setCenter(new GLatLng(47.127268,0.998905),16);
  [32] 		  var point = new GLatLng(47.127268,0.998905);
  [33] 		  var Marqueur = new GMarker(point);
  [34] 		  var html = "<b>Le logis royal à Loches</b><br />Jeanne d\'Arc vient débusquer Charles VII à Loches pour l\'inciter à délivrer Reims !";
  [35] 		  var infoUrl = "http://www.touraineverte.com/Google-Maps/openinfowindowhtml/maxUrl/exemple2/LogisRoyalLoches.htm";
  [36] 			GEvent.addListener(Marqueur, "click", function() { 
  [37] 				Marqueur.openInfoWindowHtml(html, {maxUrl:infoUrl}); 
  [38] 				setTimeout("Macarte.getInfoWindow().maximize()",0);
  [39] 			});
  [40] 		  Macarte.addOverlay(Marqueur);
  [41] 		  GEvent.trigger(Marqueur,"click");
  [42] 		}
  [43] 		else {
  [44] 		  alert("Désolé, l'API Google Maps n'est pas compatible avec votre navigateur.");
  [45] 		}
  [46] 	//]]>
  [47] </script>
  [48] </body>
  [49] </html>
Pour télécharger / copier le code cliquez ici, et n'oubliez pas de remplacer la clef API par la vôtre.

EXPLICATIONS

Ligne [7] :
N'oubliez pas de remplacer Votre_Clef_API_Ici par la clé API que google maps vous a fourni pour votre site.

Lignes [20] - [21] :
Création de deux boutons pour [ Agrandir ] ou [ Rétrécir ] la info-bulle sur la carte.

Lignes [32] - [41] :
Créé un nouveau marqueur ( Marqueur ) aux latitude et longitude du point (Lat : 47.127268 - Lng : 0.998905).

Ligne [34] :
html : C'est le texte, au format HTML, apparaissant dans la petite info-bulle :

  • html : <b>Le logis royal à Loches</b><br />Jeanne d\'Arc vient débusquer Charles VII à Loches pour l\'inciter à délivrer Reims !

Ligne [35] :
infoUrl : C'est le nom du fichier dont le contenu va apparaître dans la info-bulle, une fois celle-ci agrandie :

http://www.touraineverte.com/Google-Maps/openinfowindowhtml/maxUrl/exemple2/LogisRoyalLoches.htm,

  • infoUrl : dans cet exemple il s'agit du fichier LogisRoyalLoches.htm
  • LogisRoyalLoches.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" xml:lang="fr">
<head>
<title>Google Maps - Statue de François Rabelais à Chinon</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<link href="http://www.touraineverte.com/Google-Maps/openinfowindowhtml/maxUrl/exemple2/LogisRoyalLoches.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<p><span id="photo"><img src="http://www.touraineverte.com/Google-Maps/openinfowindowhtml/maxUrl/exemple2/photo_monument-loches.jpg" alt="Le logis royal à Loches" /></span>
Cité Royale de Loches : Royale et imprenable<br />
Remontez le temps pour découvrir l'une des plus belles cités fortifiées de France<br />
Le DONJON, haut de 36 mètres, a été construit par un comte d'Anjou, Foulques 
Nerra, au début du XIe siècle. S'il figure parmi les plus imposants de son 
époque en Europe, il est aussi l'un des mieux conservés. Modèle d'architecture 
militaire, il est transformé en prison royale par Louis XI.<br />
</p>
<p>Le LOGIS ROYAL se trouve à proximité. Ce joyau de la Renaissance 
française, haut lieu de l'Histoire de France, a été une résidence de prédilection 
de la dynastie des Valois. Sa façade ouverte en terrasse domine la ville 
et la vallée de l'Indre. Le logis a accueilli notamment Jeanne d'Arc, Agnès 
Sorel et Anne de Bretagne.</p>
<p>Dès le pavillon d'entrée du donjon, au-delà de la barbacane, le 
visiteur est plongé dans l'univers carcéral du Moyen-Âge : la tour Louis 
XI, le martelet, la salle de la question, la salle des graffiti, les cachots, 
les fortifications et les souterrains... Non loin du logis du gouverneur, 
le jardin médiéval avec sa pergola, ses banquettes de pelouse et ses barrières 
d'osier vivant offre un contraste singulièrement serein dans cet environnement 
oppressant.</p>
<p>Pour en savoir plus : <a href="http://www.cg37.fr/index.php?media=106" 
title="La cité royale de Loches" target="_parent">La 
cité royale de Loches</a></p>
</body>
</html>

Ligne [36] :
Détecte si un click est effectué sur le marqueur ( Marqueur ). Les Lignes [37] et [38] sont alors exécutées.

Ligne [37] :
Overture 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 = Rabelais.htm : nom du fichier contenant les informations à afficher au format HTML).

Ligne [38] :
Après une délai d'attente de 0 millisecondes, l'ouverture de la grande info-bulle est déclenchée et le contenu du fichier infoUrl ( LogisRoyalLoches.htm ) s'affiche à l'intérieur de celle-ci.

Ligne [40] :
Ajoute le marqueur "Marqueur" à la carte "MaCarte".

Ligne [41] :
Déclenche l'événement lié au click sur le marqueur ( Marqueur ).

REMARQUES

Attention :

Lorsque la fênetre 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 la info-bulle sera à nouveau rétrécie

 

Astuce :

Il est possible de retarder l'ouverture de la grande info-bulle, lors de l'affichage de la carte, en remplaçant 0 par le délais souhaité en millisecondes dans setTimeout :

Ligne [38] : setTimeout("Macarte.getInfoWindow().maximize()",0);

à remplacer par (pour un délais d'attente de 15 secondes)

Ligne [38] : setTimeout("Macarte.getInfoWindow().maximize()",15000);

 

Il faut fixé la version de l'api à 2.89, sinon cela ne fonctionne pas :

Ligne   [7] <script src="http://maps.google.com/maps?file=api&v=2.89&key= Mettez Votre Clef API Ici " type="text/javascript"></script>

|  http://www.touraineverte.com  |  © 2008  |  fadamaps37arobasegmailpointcom