Api Google Maps - Info-bulle - Créer une fenêtre ou info-bulle que l'on peut agrandir ou rétrécir

CRÉER UNE INFO-BULLE MODULABLE
OUVRIR - AGRANDIR - RÉTRÉCIR- FERMER

Article créé le : 18/05/2009

Présentation

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 :

appelée "maCarte",
avec un niveau de zoom égal à 13
centrée sur le point ayant pour :
- Latitude : 47.127268
- Longitude : 0.998905.

Celle-ci comporte un marqueur :

désignant le logis royal à Loches :
- Latitude : 47.127268
- Longitude : 0.998905

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

, situé en haut à droite de l'info-bulle, celle-ci va se déployer de façon à couvrir la quasi-totalité de la surface de la carte. De nouvelles informations, plus détaillées, viennent peupler l'intérieur de l'info-bulle. Celles-ci sont issues d'un fichier HTML ou PHP etc...

En cliquant sur

situé en haut à droite de l'info-bulle, celle-ci va se rétrécir lentement et afficher les informations initiales plus synthétiques.

Le bouton

a été remplacé par

. En cliquant dessus, l'info-bulle va s'agrandir à nouveau pour atteindre sa taille maximale.

Le bouton

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.

Explications

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)

GDownloadUrl ou google.maps.DownloadUrl : permettent de charger, de façon asynchrone, des ressources identifiées par une URL.

Le fichier générant votre carte ( macarte.htm ), et le fichier permettant l'affichage des informations contenues dans l'info-bulle agrandie ( info_bulle_agrandie.htm ), doivent être hébergés sur le même serveur/URL. Privilégiez donc les adresses relatives.

Pour plus d'infos consultez : GDownloadUrl.

Exemple correct :

Adresse du fichier générant votre carte :
http://www.touraineverte.com/macarte.htm

Adresse du fichier pour l'info-bulle agrandie :
http://www.touraineverte.com/info_bulle_agrandie.htm

ou si info_bulle_agrandie.htm est situé à la racine de http://www.touraineverte.com/ :

info_bulle_agrandie.htm

Exemple erroné :

Adresse du fichier générant votre carte :
http://www.touraineverte.com/macarte.htm

Adresse du fichier pour l'info-bulle agrandie :
http://www.monsite.fr/info_bulle_agrandie.htm

Dans ce cas, votre info-bulle va s'agrandir et son contenu ne s'affichera pas comme vous le souhaitiez. Si vous utilisez FireBug pour Firefox vous allez obtenir le message d'erreur suivant :

Access to restricted URI denied" code: "1012"

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>

Carte

Cliquez sur le marqueur ci-dessus pour faire apparaître l'info-bulle.
Puis amusez-vous à l'agrandir, la réduire, la fermer et la ré-ouvrir.

Code

Code : Avec Google Ajax API Loader

<?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>
<script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_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>
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<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>

Code : Sans Google Ajax API Loader

<?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>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Insérez_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>
<body onload="initialize()" onunload="GUnload()">
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<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>

Remarque(s)

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.

Api Google Maps
Info-bulle
CRÉER UNE INFO-BULLE MODULABLE
OUVRIR - AGRANDIR - RÉTRÉCIR- FERMER

CRÉER UNE INFO-BULLE MODULABLE
OUVRIR - AGRANDIR - RÉTRÉCIR- FERMER

Présentation

Explications

Carte

Code

Code : Avec Google Ajax API Loader

Code : Sans Google Ajax API Loader

Remarque(s)

Rechercher

Navigation

Forum

Traduction - Translate

Géo Web Actu

Evolutions et Bugs

Groupe d'Aide Blog Anglais

Api Google MapsInfo-bulleCRÉER UNE INFO-BULLE MODULABLE OUVRIR - AGRANDIR - RÉTRÉCIR- FERMER

CRÉER UNE INFO-BULLE MODULABLE OUVRIR - AGRANDIR - RÉTRÉCIR- FERMER

Présentation

Explications

Carte

Code

Code : Avec Google Ajax API Loader

Code : Sans Google Ajax API Loader

Remarque(s)

Rechercher

Navigation

Forum

Traduction - Translate

Géo Web Actu

Evolutions et Bugs

Groupe d'Aide Blog Anglais

Api Google Maps
Info-bulle
CRÉER UNE INFO-BULLE MODULABLE
OUVRIR - AGRANDIR - RÉTRÉCIR- FERMER

CRÉER UNE INFO-BULLE MODULABLE
OUVRIR - AGRANDIR - RÉTRÉCIR- FERMER