Info Bulle
Créer une fenêtre ou info-bulle que l'on peut agrandir ou rétrécir.
Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
Que faire lorsque votre info-bulle, qui regorge d'informations, est incapable de tout contenir ?
Offrez, tout simplement, à votre visiteur la possibilité d'agrandir votre info-bulle. Depuis la version 2.93, l'équipe de Google Maps a ajouté plusieurs options, vous permettant d'imiter le comportement des info-bulles présentent sur Google Maps. Ces info-bulles peuvent s'agrandir, par un simple clique sur un bouton, pour afficher de nouvelles informations, plus précises, sur une entreprise, comme par exemple, ses coordonnées, ses horaires d'ouverture ou son logo.
En précisant maxContent et maxTitle dans GInfoWindowOptions, votre info-bulle sera automatiquement dotée d'un bouton permettant de l'agrandir/rétrécir.
Dans cet exemple, nous allons créer une carte :
Celle-ci comporte un marqueur :
Au départ on dispose d'une carte sur laquelle est affiché un marqueur.
En cliquant sur le marqueur, une info-bulle (ou fenêtre) s'ouvre pour afficher un descriptif succinct du lieu.
En cliquant sur
En cliquant sur
Le bouton
Le bouton
Le contenu de l'info-bulle agrandie est construit à partir du fichier LogisRoyalLoches.htm dont vous trouverez le code ci-dessous.
Les styles CSS sont insérés directement dans chaque balise. C'est le seul moyen d'obtenir un rendu identique de l'info-bulle agrandie dans tous les navigateurs (tests effectués avec : FireFox, Opéra, Internet Explorer, Chrome, Safari)
Code source du fichier 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>La cité royale de Loches</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div style="margin:1em 1em 1em 0;padding:0;"> <div style="float: left; margin: 0 1em 1em 0; width: 220px;height: 163px;"><img src="http://www.touraineverte.com/code/64/photo_monument-loches.jpg" title="La cité royale de Loches" /></div> <p style="margin:1em 0 1em 0; padding:0; text-indent:0; text-align:center;"><b>Cité Royale de Loches : Royale et imprenable</b></p> <p style="margin:1em 0 1em 0; padding:0; text-indent:2em; text-align:justify;">Remontez le temps pour découvrir l'une des plus belles cités fortifiées de France.</p> <p style="margin:1em 0 1em 0; padding:0; text-indent:2em; text-align:justify;">Le <b>DONJON</b>, 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 style="margin:1em 0 1em 0; padding:0; text-indent:2em; text-align:justify;">Le <b>LOGIS ROYAL</b> 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> </div> </body> </html>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte.com : Exemples et tutoriels sur l'API Google Maps</title>
<!-- Chargement du script Google AJAX APIs en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici"></script>
<script type="text/javascript">
//<![CDATA[
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* Déclaration des variables globales */
var maCarte;
var monMarqueur;
/* url : adresse de la page devant s'afficher dans l'info-bulle agrandie :
var url = "http://www.monsite.fr/repertoire/contenu_info_bulle_agrandie.htm"; */
var azar = new Date();
var url = "http://www.touraineverte.com/code/64/LogisRoyalLoches.htm?"+azar.getTime();
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new google.maps.LatLng(47.341571,0.514233), 13);
/* Création d'un nouveau marqueur nommé "monMarqueur" ancré au centre de la carte nommée "maCarte" */
monMarqueur = new google.maps.Marker(maCarte.getCenter());
/* Ajout d'un observateur d'événement au marqueur nommé "monMarqueur" */
/* L'événement détecté est le "click" */
/* Lorsqu'un "click" est détecté sur le marqueur nommé "monMarqueur" */
/* On exécute le code contenu dans function(){ ... } */
google.maps.Event.addListener(monMarqueur, 'click', function() {
/* maxContentDiv : Création d'une nouvelle balise <div /> */
var maxContentDiv = document.createElement('div');
/* On définit la variable "html" */
var html = "<div style='width:280px; height: 80px;'><b>Le Donjon et Le logis royal à Loches</b><br /><br />Jeanne d\'Arc vient débusquer Charles VII à Loches pour l\'inciter à délivrer Reims !</div>";
/* On définit la variable "titre" */
var titre = "<b>Le Donjon et Le logis royal de Loches</b>";
/* Le contenu, au format HTML, de la balise <div /> est égal à 'Chargement en cours...' */
maxContentDiv.innerHTML = 'Chargement en cours...';
/* Ouvre sur la carte une info-bulle, dont le contenu est au format HTML, au-dessus du marqueur nommé "monMarqueur" */
monMarqueur.openInfoWindowHtml(
/* "html" : Contenu de l'info-bulle au format html */
html,
{
/* maxContent : permet de définir le contenu devant s'afficher dans l'info-bulle lorsque celle-est agrandie */
/* Ici le contenu sera "maxContentDiv" */
maxContent: maxContentDiv,
/* maxTitle : permet de définir le titre devant s'afficher dans l'info-bulle lorsque celle-est agrandie */
/* Ici le titre sera "titre" */
maxTitle: titre
}
);
/* Récupère la ressource ( = data) à partir de l'URL ( = url) fournie */
/* codeReponse : code réponse de la requête envoyée à l'url */
google.maps.DownloadUrl(url, function(data, codeReponse) {
/* Si le codeReponse est égal à 200 (c'est à dire que tout s'est bien déroulé) */
if(codeReponse==200){
/* On affiche "data" ( format HTML ) dans "maxContentDiv" */
maxContentDiv.innerHTML = data;
/* Sinon */
}else{
/* On affiche, au format HTML, dans "maxContentDiv" le message d'erreur */
maxContentDiv.innerHTML = "Echec de votre requête. Code erreur : "+codeReponse;
}
});
});
/* On affiche sur la carte nommée "maCarte" le marqueur nommé "monMarqueur" */
maCarte.addOverlay(monMarqueur);
/* 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");
}
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
//]]>
</script>
</head>
<body>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte.com : Exemples et tutoriels sur l'API Google Maps</title>
<!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Déclaration des variables globales */
var maCarte;
var monMarqueur;
/* url : adresse de la page devant s'afficher dans l'info-bulle agrandie :
var url = "http://www.monsite.fr/repertoire/contenu_info_bulle_agrandie.htm"; */
var azar = new Date();
var url = "http://www.touraineverte.com/code/64/LogisRoyalLoches.htm?"+azar.getTime();
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new GLatLng(47.341571,0.514233), 13);
/* Création d'un nouveau marqueur nommé "monMarqueur" ancré au centre de la carte nommée "maCarte" */
monMarqueur = new GMarker(maCarte.getCenter());
/* Ajout d'un observateur d'événement au marqueur nommé "monMarqueur" */
/* L'événement détecté est le "click" */
/* Lorsqu'un "click" est détecté sur le marqueur nommé "monMarqueur" */
/* On exécute le code contenu dans function(){ ... } */
GEvent.addListener(monMarqueur, 'click', function() {
/* maxContentDiv : Création d'une nouvelle balise <div /> */
var maxContentDiv = document.createElement('div');
/* On définit la variable "html" */
var html = "<div style='width:280px; height: 80px;'><b>Le Donjon et Le logis royal à Loches</b><br /><br />Jeanne d\'Arc vient débusquer Charles VII à Loches pour l\'inciter à délivrer Reims !</div>";
/* On définit la variable "titre" */
var titre = "<b>Le Donjon et Le logis royal de Loches</b>";
/* Le contenu, au format HTML, de la balise <div /> est égal à 'Chargement en cours...' */
maxContentDiv.innerHTML = 'Chargement en cours...';
/* Ouvre sur la carte une info-bulle, dont le contenu est au format HTML, au-dessus du marqueur nommé "monMarqueur" */
monMarqueur.openInfoWindowHtml(
/* "html" : Contenu de l'info-bulle au format html */
html,
{
/* maxContent : permet de définir le contenu devant s'afficher dans l'info-bulle lorsque celle-est agrandie */
/* Ici le contenu sera "maxContentDiv" */
maxContent: maxContentDiv,
/* maxTitle : permet de définir le titre devant s'afficher dans l'info-bulle lorsque celle-est agrandie */
/* Ici le titre sera "titre" */
maxTitle: titre
}
);
/* Récupère la ressource ( = data) à partir de l'URL ( = url) fournie */
/* codeReponse : code réponse de la requête envoyée à l'url */
GDownloadUrl(url, function(data, codeReponse) {
/* Si le codeReponse est égal à 200 (c'est à dire que tout s'est bien déroulé) */
if(codeReponse==200){
/* On affiche "data" ( format HTML ) dans "maxContentDiv" */
maxContentDiv.innerHTML = data;
/* Sinon */
}else{
/* On affiche, au format HTML, dans "maxContentDiv" le message d'erreur */
maxContentDiv.innerHTML = "Echec de votre requête. Code erreur : "+codeReponse;
}
});
});
/* On affiche sur la carte nommée "maCarte" le marqueur nommé "monMarqueur" */
maCarte.addOverlay(monMarqueur);
/* 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>
<!-- Une fois la page chargée la fonction initialize() est exécutée. -->
<!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
<body onload="initialize()" onunload="GUnload()">
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
Attention :
Lorsque la fênetre adopte sa taille maximale, les différents contrôles (Zoom, mini carte, bouton [Plan] - [Satellite] - [Mixte] - [Relief] , échelle) sont masqués. Ils réapparaîtront lorsque l'info-bulle sera à nouveau rétrécie.
En lieu et place de info_bulle_agrandie.htm, vous pouvez tout à fait mettre une page .php en lui passant des paramètres ( info_bulle_agrandie.php?departement=37&categorie=chateau ) permettant ainsi d'adapter le contenu de l'info-bulle agrandie en fonction de ceux-ci.
