Info Bulle
Insérer une photo panoramique dans une info-bulle à l'aide de Pano Viewer.
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.
L'idée, à l'origine, était d'insérer une photo panoramique à l'intérieur d'une info-bulle et de pouvoir la déplacer sur 360°.
En cherchant sur le net, je suis tombé sur ce script, nommé Pano Viewer, permettant de visualiser une image panoramique dans une page web.
Il ne restait plus qu'à insérer cette image, dans une info-bulle, pour obtenir un panoramique façon street view.
Dans l'exemple donné ci-dessous, un marqueur est affiché sur la carte. Cliquez dessus pour ouvrir l'info-bulle, et découvrez la photo panoramique. Pour faire défiler la photo, déplacez votre souris depuis le centre de l'image vers la droite ou la gauche. Plus vous vous éloignez du centre, plus la vitesse de défilement est rapide. Plus vous vous rapprochez du centre, plus la vitesse de défilement diminue, jusqu'à obtenir une image fixe.
<?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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte ma première carte</title>
<!-- Chargement du script Google AJAX APIs en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici"></script>
<!-- Chargement du script yapv.js -->
<script type="text/javascript" src="http://www.votredomaine.fr/votrechemin/panoviewer/yapv.js"></script>
<script type="text/javascript">
//<![CDATA[
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
/* Déclaration des variables globales */
var photoPanoramique;
var iconeRouge;
var maCarte;
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... Détermine les paramètres nécessaires pour la création de l'icône nommé "iconeRouge" ... */
var baseIcone = new google.maps.Icon();
baseIcone.iconSize=new google.maps.Size(12,20);
baseIcone.shadowSize=new google.maps.Size(20,22);
baseIcone.iconAnchor=new google.maps.Point(6,20);
baseIcone.infoWindowAnchor=new google.maps.Point(5,1);
iconeRouge = new google.maps.Icon(baseIcone, 'http://labs.google.com/ridefinder/images/mm_20_red.png', null, 'http://labs.google.com/ridefinder/images/mm_20_shadow.png');
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new google.maps.LatLng(47.390294,0.688851), 15);
/* ... Création d'un point, nommé "point", ayant pour latitude : 47.390294 et longitude : 0.688851 ... */
var point = new google.maps.LatLng(47.390294,0.688851);
/* ... Création d'un nouveau, marqueur nommé "marqueur", ancré sur le point nommé "point" ... */
/* ... Ce marqueur est représenté par l'icône nommé "iconeRouge". Lorsqu'il est survolé par ... */
/* ... votre curseur le titre suivant "Cliquer sur le marqueur pour voir le panoramique" apparaît juste en dessous ... */
var marqueur = new google.maps.Marker(point, {icon: iconeRouge, title: "Cliquer sur le marqueur pour voir le panoramique"});
/* ... Un observateur d'événement est associé au marqueur nommé "marqueur" ... */
/* ... L'événement détecté est le "click" sur ce marqueur. ... */
/* ... Lorsqu'un "click" est détecté sur ce marqueur alors ... */
google.maps.Event.addListener(marqueur, 'click', function() {
/* ... On définit "html" : Balise <div> destinée à contenir l'image panoramique ... */
var html = "<div id=\"photoPanoramique\" style=\"width: 650px; height: 200px; background-image: url('http://www.votreserveur.fr/votrechemin/panoviewer/images/photo_panoramique.jpg'); background-position: 320px 0px; border: 1px solid black\"></div>";
/* ... Ouverture de l'info-bulle liée au marqueur nommé "marqueur", et dont le contenu sera "html" ... */
marqueur.openInfoWindowHtml(html);
/* ... Déclenche l'affichage de la photo panoramique dans l'info-bulle par appel ... */
/* ... de la fonction " affichePano(); " après un délai d'attente de 3 secondes... */
setTimeout("affichePano();",3000);
});
maCarte.addOverlay(marqueur);
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}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 affichePano() */
function affichePano(){
photoPanoramique = new Yapv('photoPanoramique');
photoPanoramique.setStepSize(4);
photoPanoramique.setQuickness(25);
photoPanoramique.setMaxSpeed(4);
photoPanoramique.launch();
}
/* Appelle la fonction "initialize" lorsque la page web sera chargée */
google.setOnLoadCallback(initialize);
//]]>
</script>
</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: 400px"></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
<?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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte ma première carte</title>
<!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false"
type="text/javascript"></script>
<!-- Chargement du script yapv.js -->
<script type="text/javascript" src="http://www.votredomaine.fr/votrechemin/panoviewer/yapv.js"></script>
<script type="text/javascript">
//<![CDATA[
/* Déclaration des variables globales */
var photoPanoramique;
var iconeRouge;
var maCarte;
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... Détermine les paramètres nécessaires pour la création de l'icône nommé "iconeRouge" ... */
var baseIcone = new GIcon();
baseIcone.iconSize=new GSize(12,20);
baseIcone.shadowSize=new GSize(20,22);
baseIcone.iconAnchor=new GPoint(6,20);
baseIcone.infoWindowAnchor=new GPoint(5,1);
iconeRouge = new GIcon(baseIcone, 'http://labs.google.com/ridefinder/images/mm_20_red.png', null, 'http://labs.google.com/ridefinder/images/mm_20_shadow.png');
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
maCarte.setCenter(new GLatLng(47.390294,0.688851), 15);
/* ... Création d'un point, nommé "point", ayant pour latitude : 47.390294 et longitude : 0.688851 ... */
var point = new GLatLng(47.390294,0.688851);
/* ... Création d'un nouveau, marqueur nommé "marqueur", ancré sur le point nommé "point" ... */
/* ... Ce marqueur est représenté par l'icône nommé "iconeRouge". Lorsqu'il est survolé par ... */
/* ... votre curseur le titre suivant "Cliquer sur le marqueur pour voir le panoramique" apparaît juste en dessous ... */
var marqueur = new GMarker(point, {icon: iconeRouge, title: "Cliquer sur le marqueur pour voir le panoramique"});
/* ... Un observateur d'événement est associé au marqueur nommé "marqueur" ... */
/* ... L'événement détecté est le "click" sur ce marqueur. ... */
/* ... Lorsqu'un "click" est détecté sur ce marqueur alors ... */
GEvent.addListener(marqueur, 'click', function() {
/* ... On définit "html" : Balise <div> destinée à contenir l'image panoramique ... */
var html = "<div id=\"photoPanoramique\" style=\"width: 650px; height: 200px; background-image: url('http://www.votreserveur.fr/votrechemin/panoviewer/images/photo_panoramique.jpg'); background-position: 320px 0px; border: 1px solid black\"></div>";
/* ... Ouverture de l'info-bulle liée au marqueur nommé "marqueur", et dont le contenu sera "html" ... */
marqueur.openInfoWindowHtml(html);
/* ... Déclenche l'affichage de la photo panoramique dans l'info-bulle par appel ... */
/* ... de la fonction " affichePano(); " après un délai d'attente de 3 secondes... */
setTimeout("affichePano();",3000);
});
maCarte.addOverlay(marqueur);
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}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 affichePano() */
function affichePano(){
photoPanoramique = new Yapv('photoPanoramique');
photoPanoramique.setStepSize(4);
photoPanoramique.setQuickness(25);
photoPanoramique.setMaxSpeed(4);
photoPanoramique.launch();
}
//]]>
</script>
</head>
<!-- Une fois la page chargée la fonction initialize() est exécutée. -->
<!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
<body onload="initialize()" onunload="GUnload()">
<!-- 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: 400px"></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
N'oubliez pas de :
: mettre votre clé API,
: indiquer le chemin correct pour accéder au script yapv.js sur votre serveur,
: caractéristiques de votre photo panoramique.
: appel la fonction affichePano() pour afficher la photo panoramique dans l'info-bulle après un délai d'attente de 3 secondes :
: photoPanoramique.setStepSize(4) : Permet de spécifier de comb[ien de pixel se déplace l'image du panorama à chaque itération.
: photoPanoramique.setQuickness(25) : Permet de spécifier l'intervalle de temps (en ms) entre chaque itération.
: photoPanoramique.setMaxSpeed(4) : Permet de spécifier la vitesse max.