Api Google Maps flèche Info Bulle flèche Insérer un Diaporama PICASA avec fondu enchainé dans une info-bulle - AJAX Feed API - Slide Show.

DIAPORAMA AVEC FONDU ENCHAINE DANS UNE INFO-BULLE
PHOTOS EXTRAITES D'UN ALBUM PICASA - SANS CONTROLES

Article créé le : 02/03/2009
 

Présentation

Insérer une photo dans une info-bulle, c'est bien ! Mais insérer un diaporama, avec un effet "fondu-enchaîné", c'est encore mieux !

Pour cela, nous allons utiliser Google Maps API et AJAX Feed API Slide Show Control, ainsi que les photos contenues dans un album photo Picasa.

Dans un premier temps, identifiez-vous pour accéder à votre compte Picasa. Sélectionnez l'album que vous souhaitez insérer dans l'info-bulle de votre carte, puis copiez l'adresse du lien RSS comme indiqué sur la capture d'écran ci-dessous.

L'adresse doit ressembler à ceci :


  http://picasaweb.google.com/data/feed/base/user/xxxxxxxxxxxxxx/albumid/01234567890123456789?alt=rss&kind=photo&hl=fr

Insérez la dans le code, comme ceci :


  var fluxRSS = "http://picasaweb.google.com/data/feed/base/user/xxxxxxxxxxxxxx/albumid/01234567890123456789?alt=rss&kind=photo&hl=fr";

Insérez, entre les balises <head></head>, le script gfslideshow.js :


  <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>
Copier le contenu du flux RSS de votre album Picasa pour l'installer sur votre serveur

Carte

Cliquez sur le marqueur pour ouvrir son info-bulle.
Après quelques secondes d'attente, le fondu enchainé démarre.

Code

Code : Avec Google Ajax API Loader

  • <?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">
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>Touraineverte.com : Images Photos défilantes Diaporama Fondu enchainé Picasa dans une info-bulle sans contrôles</title>
  • <script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_Votre_Clef_API_ Ici"></script>
  • <script type="text/javascript" src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"></script>
  • <script type="text/javascript">
  • /* Chargement du module "maps" dans sa version "2.x" */
  • google.load("maps", "2.x",{"other_params":"sensor=false"});
  • /* Chargement du module "feeds" dans sa version "1" */
  • google.load("feeds", "1");
  • /* Déclaration des variables globales */
  • var maCarte;
  • var miniIconeVert;
  • /* Remplacez l'URL ci-dessous par l'URL vers le flux RSS de votre album photo PICASA
  • var fluxRSS = "http://picasaweb.google.com/data/feed/base/user/xxxxxxxxxxxxxxxxxx/albumid/0123456789012345678?alt=rss&kind=photo&hl=fr";
  • */
  • var fluxRSS = "http://www.touraineverte.com/rss/picasa.rss";
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (google.maps.BrowserIsCompatible()) {
  • miniIconeVert = new google.maps.Icon();
  • miniIconeVert.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
  • miniIconeVert.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
  • miniIconeVert.iconSize = new google.maps.Size(12, 20);
  • miniIconeVert.shadowSize = new google.maps.Size(22, 20);
  • miniIconeVert.iconAnchor = new google.maps.Point(6, 20);
  • miniIconeVert.infoWindowAnchor = new google.maps.Point(5, 1);
  • maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
  • maCarte.setCenter(new google.maps.LatLng(45.416512,4.406483), 13);
  • var point = new google.maps.LatLng(45.416512,4.406483);
  • var marqueur = new google.maps.Marker(point,miniIconeVert);
  • maCarte.addOverlay(marqueur);
  • /* infos = Contenu de l'info-bulle */
  • var infos = '<div id="EncadrementInfoBulle"><div id="slideshow" class="gss">Chargement flux RSS Picasa en cours...</div></div>';
  • /* Ajout d'un observateur d'événement au marqueur nommé "marqueur" */
  • /* L'événement détecté est le click sur le marqueur */
  • google.maps.Event.addListener(marqueur, "click", function() {
  • /* Ouverture de l'info-bulle liée au marqueur nommé "marqueur" */
  • /* Le contenu de l'info-bulle = infos */
  • marqueur.openInfoWindowHtml(infos);
  • /* Après un délai d'attente de de 3 secondes (3000 ms) */
  • /* on appelle la fonction fonduEnchaine() */
  • setTimeout("fonduEnchaine();",3000);
  • });
  • }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');
  • }
  • }
  • /* Fonction fonduEnchaine() */
  • function fonduEnchaine(){
  • /* Adresse du flux rss provenant de l'album Picasa */
  • /* fluxRSS : http://picasaweb.google.com/data/feed/base/user/xxxxxxxxxxxxxxxxxx/albumid/0123456789012345678?alt=rss&kind=photo&hl=fr; */
  • /* options : displayTime: 2000 Durée, en milliseconde, d'affichage d'une photo */
  • /* transistionTime: 600 Durée, en milliseconde, de transition entre deux photos */
  • new GFslideShow(fluxRSS, 'slideshow', {displayTime: 2000,transistionTime: 800})
  • }
  • /* Permet l'appel de la fonction initialize() une fois que la page est chargée */
  • google.setOnLoadCallback(initialize);
  • </script>
  • <style type='text/css'>
  • <!--
  • #EncadrementInfoBulle {
  • background-color:#ccc;
  • border:1px solid #ccc;
  • height:216px;
  • width:288px;
  • margin:0;
  • padding:0;
  • z-index:1;
  • }
  • .gss a img {border : none;}
  • .gss {
  • width: 288px;
  • height: 216px;
  • border: 1px solid #000;
  • background-color:#000;
  • margin:-5px 5px 5px -5px;
  • z-index: 2;
  • color: white;
  • }
  • -->
  • </style>
  • </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:410px"></div>
  • <!-- Si JavaScript n'est pas activé sur le navigateur, le message d'alerte situé entre <noscript></noscript> s'affiche-->
  • <noscript>
  • <p>Attention : Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
  • <p>Il semble que JavaScript soit désactivé ou qu'il n'est pas supporté par votre navigateur. Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
  • </noscript>
  • </body>
  • </html>
  •  

Remarque(s)

Repère N° 1 Repère N° 1 N'oubliez pas de remplacer " Mettez_Votre_Clef_API_ Ici " par votre propre clé API,

Repère N° 2 Repère N° 2 Insérez, entre les balises <head></head>, le script gfslideshow.js,

Repère N° 3 Repère N° 3 Insérez ici l'URL vers le flux RSS de votre album photo PICASA.

Pour plus d'informations sur Google AJAX Feed API et Slide Show et leurs options vous pouvez consulter :

Google AJAX Feed API.