Google
 

AGRANDIR / RETRECIR UNE INFO-BULLE - LE CONTENU VARIE AVEC LA TAILLE

PRESENTATION

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

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

Elle comporte un seul marqueur :

  • Ciblant Le logis royal de Loches :
    • Latitude : 47.127268
    • Longitude : 0.998905

En cliquant sur le marqueurs, une fenêtre (ou info-bulle) s'ouvre, contenant des informations sommaires (voir les captures 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 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).

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 se rétrécir pour retrouver sa taille et les informations initiales.

RESULTAT


CODE

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Google Maps - Max Infowindow API Example</title>
		<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=Votre_Clef_API_Ici" type="text/javascript"></script>
		<script type="text/javascript">
			/* Fonction initialize() */
			function initialize() {
				/* Si le navigateur est compatible avec l'API de Google Maps ... */
				if (GBrowserIsCompatible()) {
					/* ... 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" ... */
					var MaCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
					/* ... La carte nommée "MaCarte" est centrée sur la Latitude 47.127268, la Longitude 0.998905, avec un niveau de zoom égal à 13 ... */
					MaCarte.setCenter(new GLatLng(47.127268,0.998905), 13);
					/* ... Création d'un nouveau marqueur nommé "MonMarqueur" au centre de la carte nommée "MaCarte" ... */
					var MonMarqueur = new GMarker(MaCarte.getCenter());
					/* ... Affichage du marqueur nommé "MonMarqueur" sur la carte nommée "MaCarte" ... */
					MaCarte.addOverlay(MonMarqueur);
					/* ... Un observateur d'événement est ajouté au marqueur nommé "MonMarqueur" ... */
					/* ... L'évenement détecté est "click" (Détecte si un click sur le marqueur nommé "MonMarqueur" ... */
					/* ... Lorsqu'un click sur le marqueur nommé "MonMarqueur" est détecté, la fonction située entre les {} est alors executée ... */
					GEvent.addListener(MonMarqueur, 'click', function() {
						/* "maxContentDiv" est destiné à contenir le code devant s'afficher dans l'info-bulle agrandie */
						/* Création d'un objet nommé "maxContentDiv" correspondant à une balise <div></div> ... */
						var maxContentDiv = document.createElement('div');
						/* Le contenu de l'objet nommé "maxContentDiv", au format HTML, sera 'Chargement en cours. Ce qui nous donne : <div>Chargement en cours ...</div>. ... */
						maxContentDiv.innerHTML = 'Chargement en cours...'
						/* Ouvre une info-bulle sur la carte de l'icône du marqueur. Le contenu de la fenêtre d'informations sont données à une chaîne qui contient du texte HTML. */
						MonMarqueur.openInfoWindowHtml(
							/* Contenu de la fenêtre lorsque celle-ci est rétrécie. Le contenu peut être, soit une chaîne HTML, soit, un élément HTML DOM. */
							"<div style='padding:5px'><b>Le logis royal à Loches</b><br />Jeanne d\'Arc vient débusquer Charles VII à Loches pour l\'inciter à délivrer Reims !</div>",
							{
								/* maxContent: Contenu de la fenêtre lorsque celle-ci est agrandie (=maxContentDiv). Le contenu peut être, soit, une chaîne HTML, soit, un élément HTML DOM. */
								maxContent: maxContentDiv, 
								/* maxContent: Titre de la fenêtre lorsque celle-ci est agrandie(="<b>Titre de la fenêtre une fois agrandie</b>"). Le contenu peut être, soit, une chaîne HTML, soit, un élément HTML DOM. */
								maxTitle: "<b>Titre : Le logis royal de Loches</b>"
							}
						);
						var infoBulle = MaCarte.getInfoWindow();
						/* ... Un observateur d'événement est ajouté à l'info-bulle nommé "infoBulle" ... */
						/* ... L'événement détecté est "maximizeclick" (Détecte si l'info-bulle est sur le point d'être agrandie) ... */
						/* ... Lorsque l'info-bulle nommée "infoBulle" est sur le point d'être agrandie, la fonction située entre les {} est alors executée ... */
						GEvent.addListener(infoBulle, "maximizeclick", function() {
							/* ... Charge la page "LogisRoyalLoches.htm" à partir du Web et appelle la fonction "function(data, codeReponse)" avec le code du document ""ajax_content.html"" en premier argument, et le code d'état de la réponse HTTP en second argument. ... */
							GDownloadUrl("LogisRoyalLoches.htm", function(data, codeReponse) {
								/* ... Si le code d'état de la réponse est égal à 200 (c'est à dire que le fichier "LogisRoyalLoches.htm" a été chargé avec succès), on affiche "ajax_content.html" dans l'info-bulle agrandie ... */
								if(codeReponse==200){
									maxContentDiv.innerHTML = data;
								/* ... Sinon on affiche une message d'erreur dans l'info-bulle agrandie : Echec de votre requète. Code erreur : 2 par exemple". ... */
								}else{
									maxContentDiv.innerHTML = "Echec de votre requête. Code erreur : "+codeReponse;
								}
							});
						});
					});
				/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
				}else{
					/* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
					alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
				}
			}
		</script>
	</head>
	<body onload="initialize()" onunload="GUnload()">
		<div id="EmplacementDeMaCarte" style="width: 740px; height: 310px;"></div>
	</body>
</html>
Vous pouvez copier ou télécharger le code en cliquant ici

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

Contenu du fichier LogisRoyalLoches.htm

<p style="float: right;	margin: 0 0.5em 0.5em 0.5em;padding: 0;text-align: justify;">
	<img src="http://www.touraineverte.com/Google-Maps/openinfowindowhtml/maxUrl/exemple2/photo_monument-loches.jpg" alt="Le logis royal à Loches" style="margin:0; padding:0;" />
</p>
<p style="margin: 1em;text-align: justify;"><em>Cité Royale de Loches : Royale et imprenable</em>.</p>
<p>Remontez le temps pour découvrir l'une des plus belles cités fortifiées de France. 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.</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. 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>

 

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

Retrouvez toutes les informations concernant GInfoWindowOptions à cette adresse http://code.google.com/apis/maps/documentation/reference.html#GInfoWindowOptions et GInfoWindow à celle-ci http://code.google.com/apis/maps/documentation/reference.html#GInfoWindow


|  http://www.touraineverte.com  |  © 2007  |  contact  |