Utilisation de Google Maps

Social Bookmarking

Écrit par Nicolas PIED

Publié le 05-09-2006 - 24055 hits

Index de l'article
1 - Utilisation de Google Maps 2 - Votre première application Google Maps 3 - Les « info-bulles » Google Maps 4 - Afficher des marqueurs 5 - Attacher des évènements JavaScript 6 - Des onglets dans les « info-bulles » 7 - « Drag and Drop » des marqueurs 8 - Rechercher une adresse postale 9 - Conclusion

Afficher des onglets dans les « info-bulles »

L’exemple ci-dessous montre comment afficher des onglets dans les info-bulles HTML. Le principe en soit est assez simple, puisqu’il s’agit de définir un tableau de type « GInfoWindowTab » qui prend comme premier argument le nom de l’onglet et comme second le contenu de l’onglet ; contenu qui peut être sous format texte ou HTML.

Ensuite, il suffit de lier ce tableau au marqueur en passant ce premier comme argument à la fonction « openInfoWindowTabsHtml » comme indiqué dans les lignes ci-dessous :

/* Tableau de GInfoWindowTab qui va contenir les onglets de l'info-bulle */
var infoTabs = [
    new GInfoWindowTab("Onglet #1", "Le contenu de l'onglet 1"),
    new GInfoWindowTab("Onglet #2", "<b>Voici un texte en gras</b>")
];
 
/* Création du marqueur attaché au point */
var marker = new GMarker(point);
/* Enregistrer un listener lors d'un clic sur le marqueur */
GEvent.addListener(marker, "click", function() {
    /* Lors d'un clic, afficher les onglets */
    marker.openInfoWindowTabsHtml(infoTabs);
});
 
/* Afficher le marqueur et l'info-bulle */
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);