Api Google Maps flèche Street View flèche Panoramique automatique avec Street View.

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