API-V2-MAPS.com



Comment utiliser les API's Google Maps, tutoriels Google Maps, cartographie Google Maps


Image
image
image
image





Page précédente   Page suivante

DES ONGLETS DANS LES BULLES D'INFORMATION
Si vous avez beaucoup d'informations à afficher dans une bulle, vous pouvez la partager entre plusieurs onglet.
Par ex., un onglet peut contenir une photo, tandis que le second contient du texte descriptif.

<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>

Explications :

Création d'un array (variable tableau) avec pour contenu ce que vous souhaitez voir apparaitre dans les onglets.
Initialisation des coordonnées du marker/bulle.
Ajout d'un écouteur d'évenemnt, afin que l'on puisse changer d'onglet en cliquant dessus.
Affichage du marker et de la bulle avec onglet.


Résultat :





Page précédente   Page suivante

image


image
Informations :
"Google" et "Google Maps" sont des noms déposés par la société Google, Inc. de Mountain View (Comté de Santa Clara, Californie, USA).















image
  © Copyright 2008© VDC
  Tout droits réservés
  Date de création : 01/06/2008
  Dernière mise à jour : 29/07/2008