<html>
<head>
<title>Application Google Maps : Des onglets dans les bulles</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=
ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
function load()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(50.89491633479764, 4.341501295566559), 9);
// Initialisation de l'array "infoTabs" préchargé par le contenu des 3 onglets
var infoTabs = [new GInfoWindowTab("L'Atomium", "<b><u>L'Atomium</u></b><br>Bruxelles (Belgique)<br>L’Atomium a été conçu par l'ingénieur André.."),
new GInfoWindowTab("Vue Google", '<img src="images/Atomium1.jpg" alt="Atomium vue Google" width="210" height="180"/>'),
new GInfoWindowTab("Photo", '<img src="images/Atomium2.jpg" alt="Photo de l\'Atomium" width="210" height="220"/>')];
// Initialisation du marker et de la bulle
var point = new GLatLng(50.89491633479764, 4.341501295566559); // Position du marker
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {marker.openInfoWindowTabsHtml(infoTabs); });
// Affichage du marker (repère) et de la bulle avec onglets (3)
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);
}
}
//]]></script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 500px"></div>
</body>
</html>
|
Si vous avez beaucoup d'informations à afficher dans une bulle, vous pouvez la partager entre plusieurs onglet.