Api Google Maps flèche Info Bulle flèche Créer une Info-bulle avec onglets - GInfoWindowTab - openInfoWindowTabsHtml.

CREER UNE INFO-BULLE AVEC ONGLETS
GInfoWindowTab - openInfoWindowTabsHtml

Article créé le : 12/02/2009
 

Présentation

Dans cet exemple, nous allons utiliser openInfoWindowTabsHtml afin de créer une info-bulle comportant six onglets.

Chaque onglet peut contenir des informations différentes, au format HTML, comme du texte, des photos, ou des vidéos.

Carte

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 - Google Maps Api - Info-bulle - Créer une info-bulle avec 6onglets</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">
  • /* Chargement du module "maps" dans sa version "2" */
  • google.load("maps","2");
  • /* Déclaration des variables globales */
  • var maCarte;
  • /* 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 à 9 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.341571, 0.514233), 9);
  • /* ... Ajout à la carte nommée "maCarte" du bouton "LargeMapControl" : Déplacement et Zoom ... */
  • maCarte.addControl(new google.maps.LargeMapControl());
  • /* ... Ajout à la carte nommée "maCarte" du bouton "MenuMapTypeControl" : Menu Type de carte ... */
  • maCarte.addControl(new google.maps.MenuMapTypeControl());
  • /* infoTabs : est un tableau qui contient les informations ( Titre et Contenu ) relatives à chaque onglet */
  • var infoTabs = [
  • /* Création d'un nouvel onglet dont le titre est "Onglet 1" et le contenu au format HTML est "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 1</div>" */
  • new google.maps.InfoWindowTab("Onglet 1", "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 1</div>"),
  • /* Création d'un nouvel onglet dont le titre est "Onglet 2" et le contenu au format HTML est "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 2</div>" */
  • new google.maps.InfoWindowTab("Onglet 2", "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 2</div>"),
  • /* Création d'un nouvel onglet dont le titre est "Onglet 3" et le contenu au format HTML est "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 3</div>" */
  • new google.maps.InfoWindowTab("Onglet 3", "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 3</div>"),
  • /* Création d'un nouvel onglet dont le titre est "Onglet 4" et le contenu au format HTML est "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 4</div>" */
  • new google.maps.InfoWindowTab("Onglet 4", "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 4</div>"),
  • /* Création d'un nouvel onglet dont le titre est "Onglet 5" et le contenu au format HTML est "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 5</div>" */
  • new google.maps.InfoWindowTab("Onglet 5", "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 5</div>"),
  • /* Création d'un nouvel onglet dont le titre est "Onglet 6" et le contenu au format HTML est "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 6</div>" */
  • new google.maps.InfoWindowTab("Onglet 6", "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 6</div>")
  • ];
  • /* ... Création d'un marqueur nommé "monMarqueur" ancré au centre de la carte nommée "maCarte" ... */
  • var monMarqueur = new google.maps.Marker(maCarte.getCenter());
  • /* ... Ajout, au marqueur nommé "monMarqueur", d'un observateur d'événement ... */
  • /* ... L'événement observé est "click". Dès qu'un click sera effectué sur ... */
  • /* ... le marqueur nommé "monMarqueur" alors, ... */
  • google.maps.Event.addListener(monMarqueur, "click", function() {
  • /* ... On déclenche l'ouverture de l'info-bulle à onglet liée au marqueur ... */
  • /* ... nommé "monMarqueur" et dont le contenu est précisé dans "infoTabs" ... */
  • monMarqueur.openInfoWindowTabsHtml(infoTabs);
  • });
  • /* ... Affichage sur la carte nommée "maCarte" du marqueur nommé "monMarqueur" ... */
  • maCarte.addOverlay(monMarqueur);
  • /* ... Ouverture de l'info-bulle à onglet liée au marqueur nommé "monMarqueur" ... */
  • /* ... et dont le contenu est précisé dans "infoTabs" ... */
  • monMarqueur.openInfoWindowTabsHtml(infoTabs);
  • /* 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>
  • </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 - Google Maps Api - Info-bulle - Créer une info-bulle avec 6onglets</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"></script>
  • <script type="text/javascript">
  • /* Déclaration des variables globales */
  • var maCarte;
  • /* 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 à 9 ... */
  • maCarte.setCenter(new GLatLng(47.341571, 0.514233), 9);
  • /* ... Ajout à la carte nommée "maCarte" du bouton "LargeMapControl" : Déplacement et Zoom ... */
  • maCarte.addControl(new GLargeMapControl());
  • /* ... Ajout à la carte nommée "maCarte" du bouton "MenuMapTypeControl" : Menu Type de carte ... */
  • maCarte.addControl(new GMenuMapTypeControl());
  • /* infoTabs : est un tableau qui contient les informations ( Titre et Contenu ) relatives à chaque onglet */
  • var infoTabs = [
  • /* Création d'un nouvel onglet dont le titre est "Onglet 1" et le contenu au format HTML est "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 1</div>" */
  • new GInfoWindowTab("Onglet 1", "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 1</div>"),
  • /* Création d'un nouvel onglet dont le titre est "Onglet 2" et le contenu au format HTML est "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 2</div>" */
  • new GInfoWindowTab("Onglet 2", "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 2</div>"),
  • /* Création d'un nouvel onglet dont le titre est "Onglet 3" et le contenu au format HTML est "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 3</div>" */
  • new GInfoWindowTab("Onglet 3", "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 3</div>"),
  • /* Création d'un nouvel onglet dont le titre est "Onglet 4" et le contenu au format HTML est "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 4</div>" */
  • new GInfoWindowTab("Onglet 4", "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 4</div>"),
  • /* Création d'un nouvel onglet dont le titre est "Onglet 5" et le contenu au format HTML est "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 5</div>" */
  • new GInfoWindowTab("Onglet 5", "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 5</div>"),
  • /* Création d'un nouvel onglet dont le titre est "Onglet 6" et le contenu au format HTML est "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 6</div>" */
  • new GInfoWindowTab("Onglet 6", "<div style='width: 520px; height: 100px;'>Texte contenu dans l'onglet 6</div>")
  • ];
  • /* ... Création d'un marqueur nommé "monMarqueur" ancré au centre de la carte nommée "maCarte" ... */
  • var monMarqueur = new GMarker(maCarte.getCenter());
  • /* ... Ajout, au marqueur nommé "monMarqueur", d'un observateur d'événement ... */
  • /* ... L'événement observé est "click". Dès qu'un click sera effectué sur ... */
  • /* ... le marqueur nommé "monMarqueur" alors, ... */
  • GEvent.addListener(monMarqueur, "click", function() {
  • /* ... On déclenche l'ouverture de l'info-bulle à onglet liée au marqueur ... */
  • /* ... nommé "monMarqueur" et dont le contenu est précisé dans "infoTabs" ... */
  • monMarqueur.openInfoWindowTabsHtml(infoTabs);
  • });
  • /* ... Affichage sur la carte nommée "maCarte" du marqueur nommé "monMarqueur" ... */
  • maCarte.addOverlay(monMarqueur);
  • /* ... Ouverture de l'info-bulle à onglet liée au marqueur nommé "monMarqueur" ... */
  • /* ... et dont le contenu est précisé dans "infoTabs" ... */
  • monMarqueur.openInfoWindowTabsHtml(infoTabs);
  • /* 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>
  • </body>
  • </html>