CRÉER UNE INFO-BULLE MODULABLE
OUVRIR - AGRANDIR - RÉTRÉCIR- FERMER
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
En cliquant sur
Le bouton
Le bouton
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)
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
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>
- <!-- Chargement du script Google AJAX APIs en précisant votre clé -->
- <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>
- <!-- 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>
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>
- <!-- 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=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>
- <!-- 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>
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.
