CRÉATION D'UN PANORAMIQUE DÉFILANT
AUTOMATIQUEMENT AVEC STREET VIEW
Article créé le : 20/04/2009
Présentation
Nous allons utiliser Street View pour créer un panoramique dynamique, avec trois boutons :
- Arrêter,
- Démarrer,
- Inverser.
Pour cela nous allons utiliser :
- GStreetviewPanorama : Initialise une vue 'Street View',
- setLocationAndPOV : Défini l'emplacement et la position de la caméra,
- yaw : Angle de vue de la caméra par rapport à l'horizontal (Nord = 0),
- pitch : Angle de vue de la caméra par rapport à la verticale (-90 à 90),
- zoom : Niveau de zoom de la caméra,
- setInterval : Exécute une fonction à intervalle régulier (en millisecondes).
Carte
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">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
- <title>TouraineVerte.com panoramique Street-View</title>
- <!-- Chargement du script Google AJAX APIs en précisant votre clé -->
- <script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_Votre_Clef_API_ Ici"></script>
- <script type="text/javascript">
- //<![CDATA[
- /* Chargement du module "maps" dans sa version "2.x" */
- google.load("maps", "2.x",{"other_params":"sensor=false"});
- var maCarte;
- var marqueur;
- var panoramiqueStreetView;
- var angleHorizontal = 180;
- var angleVertical = 0;
- var zoomActuel = 1;
- var tempoRotation;
- var sens = "versLaDroite";
- /* Fonction initialize() */
- function initialize() {
- /* Si le navigateur est compatible avec l'API de Google Maps ... */
- if (google.maps.BrowserIsCompatible()) {
- /* ... 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 48.473686, la Longitude -4.763094, avec un niveau de zoom égal à 8 ... */
- maCarte.setCenter(new google.maps.LatLng(48.473686,-4.763094), 8);
- /* ... Création d'un nouveau marqueur nommée "marqueur" centré sur le centre de la carte nommée 'maCarte' ... */
- marqueur = new google.maps.Marker(maCarte.getCenter());
- /* ... Affiche le marqueur nommée 'marqueur' sur la carte nommée 'maCarte' ... */
- maCarte.addOverlay(marqueur);
- /* ...Création d'un 'Street View' nommé 'panoramiqueStreetView' qui va s'afficher dans la balise ayant pour identifiant id='EmplacementPanoramiqueStreetView' ... */
- panoramiqueStreetView = new google.maps.StreetviewPanorama(document.getElementById("EmplacementPanoramiqueStreetView"));
- /* ... Le 'Street View' nommé 'panoramiqueStreetView' cible un point ayant */
- /* ... pour coordonnées latitude : 48.473686 et longitude : -4.763094 ... */
- /* ... yaw : angle de vue horizontal de la caméra = angleHorizontal ... */
- /* ... pitch : angle de vue vertical de la caméra = angleVertical ... */
- /* ... zoom : niveau de zoom de la vue 'Street View' = zoomActuel ... */
- panoramiqueStreetView.setLocationAndPOV(new google.maps.LatLng(48.473686,-4.763094), {yaw: angleHorizontal, pitch: angleVertical, zoom: zoomActuel});
- /* ... Création d'une temporisation entre l'affichage des vues. ... */
- /* ... Toutes les 100 millisecondes on appelle la fonction panoramique(). ... */
- tempoRotation = window.setInterval("panoramique();", 100);
- /* 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 changeSens() */
- /* Cette fonction permet de modifier le sens de rotation du panoramique */
- function changeSens(){
- /* ... Si 'sens' est égal à 'versLaDroite' ... */
- if (sens=="versLaDroite") {
- /* ... Alors 'sens' est égal à 'versLaGauche' ... */
- sens="versLaGauche";
- /* ... Sinon ... */
- } else {
- /* ... 'sens' est égal à 'versLaDroite' */
- sens="versLaDroite";
- }
- }
- /* Fonction panoramique() */
- /* Cette fonction fixe l'angle de rotation du panoramique */
- function panoramique() {
- /* ... Si 'sens' est égal à 'versLaDroite' ... */
- if (sens=="versLaDroite") {
- /* ... Alors 'angleHorizontal' est incrémenté de 0.2 degrès ... */
- angleHorizontal += 0.2;
- /* ... Sinon ... */
- } else {
- /* ... 'angleHorizontal' est décrémenté de 0.2 degrès ... */
- angleHorizontal -= 0.2;
- }
- /* ... On déplace le 'Street View' nommé 'panoramiqueStreetView' vers le nouvel 'angleHorizontal' et 'angleVertical' ... */
- panoramiqueStreetView.panTo({yaw:angleHorizontal, pitch:angleVertical});
- }
- /* Fonction stop() */
- /* Cette fonction permet de stopper la rotation du panoramique */
- function stop() {
- /* Arrête l'exécution de 'tempoRotation' précédemment défini avec setInterval(). */
- clearInterval(tempoRotation);
- }
- /* Fonction demarre() */
- /* Cette fonction permet de démarrer la rotation du panoramique */
- function demarre() {
- /* Arrête l'exécution de 'tempoRotation' précédemment défini avec setInterval(). */
- clearInterval(tempoRotation);
- /* ... Création d'une temporisation entre l'affichage des vues. ... */
- /* ... Toutes les 100 millisecondes on appelle la fonction panoramique(). ... */
- tempoRotation = window.setInterval("panoramique(sens);", 100);
- }
- /* Appelle la fonction "initialize" lorsque la page web sera chargée */
- google.setOnLoadCallback(initialize);
- //]]>
- </script>
- <style type="text/css">
- <!--
- #EmplacementDeMaCarte{
- position:relative;
- border:none;
- width:100%;
- height:400px;
- }
- #EmplacementPanoramiqueStreetView{
- margin-top:15px;
- width:100%;
- height: 300px;
- }
- -->
- </style>
- </head>
- <body>
- <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
- <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
- <div id="EmplacementDeMaCarte"></div>
- <div id="EmplacementPanoramiqueStreetView"></div>
- <div style="margin: 10px 0;padding: 0;text-align:center;width:725px;">
- <input type="button" onclick="stop()" value="Arrêter" title="Arrêter le défilement du panoramique"/> <input type="button" onclick="demarre()" value="Démarrer" title="Démarrer le défilement du panoramique"/> <input type="button" onclick="changeSens()" value="Inverser" title="Inverser le sens de défilement"/>
- </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>
Code : Sans 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">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
- <title>TouraineVerte.com panoramique Street-View</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=Insérez_Votre_Clef_API_ Ici&sensor=false"
- type="text/javascript"></script>
- <script type="text/javascript">
- //<![CDATA[
- var maCarte;
- var marqueur;
- var panoramiqueStreetView;
- var angleHorizontal = 180;
- var angleVertical = 0;
- var zoomActuel = 1;
- var tempoRotation;
- var sens = "versLaDroite";
- /* Fonction initialize() */
- function initialize() {
- /* Si le navigateur est compatible avec l'API de Google Maps ... */
- if (GBrowserIsCompatible()) {
- /* ... 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 48.473686, la Longitude -4.763094, avec un niveau de zoom égal à 8 ... */
- maCarte.setCenter(new GLatLng(48.473686,-4.763094), 8);
- marqueur = new GMarker(maCarte.getCenter());
- /* ... Affiche le marqueur nommée 'marqueur' sur la carte nommée 'maCarte' ... */
- maCarte.addOverlay(marqueur);
- /* ...Création d'un 'Street View' nommé 'panoramiqueStreetView' qui va s'afficher dans la balise ayant pour identifiant id='EmplacementPanoramiqueStreetView' ... */
- panoramiqueStreetView = new GStreetviewPanorama(document.getElementById("EmplacementPanoramiqueStreetView"));
- /* ... Le 'Street View' nommé 'panoramiqueStreetView' cible un point ayant */
- /* ... pour coordonnées latitude : 48.473686 et longitude : -4.763094 ... */
- /* ... yaw : angle de vue horizontal de la caméra = angleHorizontal ... */
- /* ... pitch : angle de vue vertical de la caméra = angleVertical ... */
- /* ... zoom : niveau de zoom de la vue 'Street View' = zoomActuel ... */
- panoramiqueStreetView.setLocationAndPOV(new GLatLng(48.473686,-4.763094), {yaw: angleHorizontal, pitch: angleVertical, zoom: zoomActuel});
- /* ... Création d'une temporisation entre l'affichage des vues. ... */
- /* ... Toutes les 100 millisecondes on appelle la fonction panoramique(). ... */
- tempoRotation = window.setInterval("panoramique();", 100);
- /* 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 changeSens() */
- /* Cette fonction permet de modifier le sens de rotation du panoramique */
- function changeSens(){
- /* ... Si 'sens' est égal à 'versLaDroite' ... */
- if (sens=="versLaDroite") {
- /* ... Alors 'sens' est égal à 'versLaGauche' ... */
- sens="versLaGauche";
- /* ... Sinon ... */
- } else {
- /* ... 'sens' est égal à 'versLaDroite' */
- sens="versLaDroite";
- }
- }
- /* Fonction panoramique() */
- /* Cette fonction fixe l'angle de rotation du panoramique */
- function panoramique() {
- /* ... Si 'sens' est égal à 'versLaDroite' ... */
- if (sens=="versLaDroite") {
- /* ... Alors 'angleHorizontal' est incrémenté de 0.2 degrès ... */
- angleHorizontal += 0.2;
- /* ... Sinon ... */
- } else {
- /* ... 'angleHorizontal' est décrémenté de 0.2 degrès ... */
- angleHorizontal -= 0.2;
- }
- /* ... On déplace le 'Street View' nommé 'panoramiqueStreetView' vers le nouvel 'angleHorizontal' et 'angleVertical' ... */
- panoramiqueStreetView.panTo({yaw:angleHorizontal, pitch:angleVertical});
- }
- /* Fonction stop() */
- /* Cette fonction permet de stopper la rotation du panoramique */
- function stop() {
- /* Arrête l'exécution de 'tempoRotation' précédemment défini avec setInterval(). */
- clearInterval(tempoRotation);
- }
- /* Fonction demarre() */
- /* Cette fonction permet de démarrer la rotation du panoramique */
- function demarre() {
- /* Arrête l'exécution de 'tempoRotation' précédemment défini avec setInterval(). */
- clearInterval(tempoRotation);
- /* ... Création d'une temporisation entre l'affichage des vues. ... */
- /* ... Toutes les 100 millisecondes on appelle la fonction panoramique(). ... */
- tempoRotation = window.setInterval("panoramique(sens);", 100);
- }
- //]]>
- </script>
- <style type="text/css">
- <!--
- #EmplacementDeMaCarte{
- position:relative;
- border:none;
- width:100%;
- height:400px;
- }
- #EmplacementPanoramiqueStreetView{
- margin-top:15px;
- width:100%;
- height: 300px;
- }
- -->
- </style>
- </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". -->
- <div class="EncadrementDeMaCarte"><div id="EmplacementDeMaCarte"></div></div>
- <div id="EmplacementPanoramiqueStreetView"></div>
- <div style="margin: 10px 0;padding: 0;text-align:center;width:725px;">
- <input type="button" onclick="stop()" value="Arrêter" title="Arrêter le défilement du panoramique"/> <input type="button" onclick="demarre()" value="Démarrer" title="Démarrer le défilement du panoramique"/> <input type="button" onclick="changeSens()" value="Inverser" title="Inverser le sens de défilement"/>
- </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>
Remarque(s)
Vous pouvez modifier l'angle entre deux vues en modifiant le paramètre angleHorizontal situé dans la fonction panoramique().
Exemple :
if (sens=="versLaDroite") {
angleHorizontal += 2;
} else {
angleHorizontal -= 2;
}
Vous pouvez également modifier la temporisation entre deux appels de la fonction panoramique(). Attention, il y a deux lignes à modifier.
Exemple :
tempoRotation = window.setInterval("panoramique(sens);", 300);
