Affichage de fenêtres d'informations avec onglets

Cet exemple est propulsé par

Si vous suivez la présentation de la librairie GMaps dans l'ordre de ce site, vous devez avoir pris connaissance via la page #147 de Webjax de la création de fenêtes d'informations attachées aux marqueurs qui peuvent être ajoutés sur les cartes GMaps.

Vous avez peut-être pu constater que la hauteur des marqueurs n'est pas forcément ajustable et qu'il peut être bon dans un souci de lisibilité et de présentation "d'éclater" le contenu à présenter via onglet.

C'est l'objet de cette page #148 qui vous présente la méthode qui permet de présenter un contenu via plusieurs onglets dans les fenêtres d'information.


#00 :: Création de fenêtres d'informations avec onglets sur les marqueurs GMarker

Création de fenêtres d'informations avec onglets sur les marqueurs GMarker

Ce premier vous présente la méthode pour créer des fenêtres d'informations avec onglets.

L'exemple est testable ci après :

Utilisation de l'exemple #00

ZONE DE CHARGEMENT DE LA CARTE GMAPS

Le code source de l'exemple est repris ci après avec dans l'ordre :

• le code javascript permettant de créer les fenêtes d'informations avec onglets et plus globalement de créer et charger la carte GMaps.
• le code HTML du bouton d'action.

// tableau de coordonnées et d'informations à utiliser */ var points = new Array(); points[0] = new Array(); points[0]['lat'] = 48.87535686620279; points[0]['long'] = 2.32685923576355; points[0]['tab0'] = "Fnac Saint-Lazare"; points[0]['tab1'] = "Passage du Havre<br/>109, rue Saint-Lazare.<br/>PARKING Public - 105 rue Saint Lazare.<br/>75009 Paris"; points[0]['tab2'] = "Téléphone : 0825 020 020 (0.15? TTC/min)<br/>Télécopie : 01 55 31 21 00<br/>E-Mail : saint-lazare@fnac.tm.fr<br/>Horaires d'ouverture : lundi, mardi, mercredi et samedi : 10h / 19h30<br/>jeudi et vendredi : 10h / 20h30."; points[1] = new Array(); points[1]['lat'] = 48.875279246315486; points[1]['long'] = 2.32560396194458; points[1]['tab0'] = "Mac Donalds Saint-Lazare"; points[1]['tab1'] = "119 r St Lazare<br/>75008 Paris"; points[1]['tab2'] = "Téléphone : 01 42 93 07 92"; var map = null; /* fonction intialisatrice de la création de la carte */ function chargerCarteAvecMarqueurEtFenetreInfo () { map = new GMap2(document.getElementById("map_0")); map.disableDragging(); map.setCenter(new GLatLng(48.875, 2.32), 14); for (var i = 0; i < points.length; i++) { // Our info window content var infoTabs = [ new GInfoWindowTab("Description", "<span class='desc'>Entité commerciale "+points[i]['tab0']+"</span>"), new GInfoWindowTab("Adresse", "<span class='desc'>"+points[i]['tab1']+"</span>"), new GInfoWindowTab("Contact", "<span class='desc'>"+points[i]['tab2']+"</span>") ]; var point = new GLatLng(points[i]['lat'],points[i]['long']); map.addOverlay(createMarker(point,infoTabs)); } } // fonction spécialisée de création de marqueurs // avec fenêtes d'informations function createMarker (point,infoT) { /* création du marqueur et de l'interception d'évènement */ var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml(infoT); }); return marker; }
Le code HTML du bouton d'action :
<!-- code HTML du bouton d'action --> <input type="button" name="ok_0" value="charger la carte avec marqueurs et fenêtes d'informations avec onglets" onClick="chargerCarteAvecMarqueurEtFenetreInfo();" />

: 27/01/2007 16:28:19 | : Google, Maps, GMaps, Fenêtres, Information, Onglets, GMaps2.openInfoWindowTabsHtml(), cartes, cartographie, géolocalisation, marqueurs,

Aucun commentaire enregistré