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.
Nous allons utiliser Street View pour créer un panoramique dynamique, avec trois boutons :
Pour cela nous allons utiliser :
<?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=Inserez_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>
<?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=Inserez_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>
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);
