Info Bulle
Créer une Info-bulle avec onglets - GInfoWindowTab - openInfoWindowTabsHtml.
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.
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.
<?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=Inserez_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>
<?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=Inserez_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>
