Info Bulle
Insérer un Diaporama PICASA avec fondu enchainé dans une info-bulle - AJAX Feed API - Slide Show.
Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
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>
<?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=Inserez_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/xxxxxxxxxx/albumid/0123456789?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/xxxxxxxxxx/albumid/0123456789?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>
N'oubliez pas de remplacer " Mettez_Votre_Clef_API_ Ici " par votre propre clé API,
Insérez, entre les balises <head></head>, le script gfslideshow.js,
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 :
