Partager ce tutoriel sur les réseaux sociaux Signaler une erreur dans cet article

Comment ajouter un panoramique StreetView Google Maps ?

Ce tutoriel est basé sur le code de l'exemple intitulé : Comment créer un carte à l'aide de l'API Google Maps Version 3 ?

Nous allons compléter le code de cet exemple, afin d'ajouter un panoramique StreetView dans une balise <div/> située à l'extérieur de celle contenant la carte Google Maps. Ainsi :

la carte sera placée dans une balise <div/> ayant pour identifiant EmplacementDeMaCarte,
le panoramique Street View sera placé dans une balise <div/> ayant pour identifiant EmplacementPanoramiqueStreetView.

Les caractéristiques du panoramique StreetView sont déterminées à l'aide de l'emplacement et de la position d'une camera virtuelle :

Emplacement :
- Coordonnées GPS (Latitude,Longitude) : 47.389982, 0.688877,
Position :
- Azimut en degrès - heading: 34,
- Hauteur en degrès - pitch: 10,
- Niveau de zoom - zoom: 1.

Panoramique StreetView et carte

Création d'un objet littéral StreetViewPanoramaOptions

Tout d'abord nous allons créer un objet littéral StreetViewPanoramaOptions nommé optionsPanoramiqueStreetView, contenant toutes les options nécessaires à la construction de notre panoramique StreetView. Ces options sont au nombre de deux :

position: emplacement de la caméra virtuelle sous la forme d'un objet LatLng
pov: position de la caméra virtuelle sous la forme d'un objet StreetViewPov
- heading: ( par défaut : 0) définit l'angle de rotation horizontal, en degrés, de la caméra virtuelle par rapport au Nord vrai. Rubriques sont mesurés dans le sens horaire (90 degrés est est vrai).
- pitch: ( par défaut : 0) définit la variation de l'angle vertical, vers le haut ou le bas, par rapport à l'angle de vertical initial de la caméra virtuelle, qui est la plus part du temps horizontal (mais pas toujours). Ainsi, une image prise sur une route de montagne aura probablement un pitch par défaut qui n'est pas horizontal. Ces angles sont positifs en regardant vers le haut (+90 degrés : tout droit vers le haut et orthogonale par rapport à la valeur du pitch par défaut) et négatifs vers le bas (-90 degrés : tout droit vers le bas et orthogonale par rapport à la valeur du pitch par défaut).
- zoom: ( par défaut : 1) définit le niveau de zoom de cette vue (proscrivant le "champ de vision"), 0 étant le niveau de zoom arrière maxi. La plupart des vues Street View acceptent des niveaux de zoom allant de 0 à 3 inclus.

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte{
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsPanoramiqueStreetView = {
					position: centreCarte,
					pov: {
						heading: 34,
						pitch: 10,
						zoom: 1
					}
				};
			 }
			 google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<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 ne soit 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>

Création d'un objet StreetViewPanorama

Puis nous créons un panormique StreetView nommé panoramiqueStreetView à l'aide de la classe StreetViewPanorama. Son constructeur attend deux paramètres :

document.getElementById('EmplacementPanoramiqueStreetView') : identifiant de la balise <div/> devant contenir le panoramique Street View nommé panoramiqueStreetView,
optionsPanoramiqueStreetView : options du panoramique StreetView définies précedemment.

Il faut également modifier les règles CSS entre les balises <head> ... </head> :

fixer la hauteur des containers de la carte et du StreetView à 50% de la hauteur de l'écran,

et enfin ajouter entre les balises <body> ... </body> :

une balise <div id="EmplacementPanoramiqueStreetView"></div>

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte, #EmplacementPanoramiqueStreetView {
				height: 50%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsPanoramiqueStreetView = {
					position: centreCarte,
					pov: {
						heading: 34,
						pitch: 10,
						zoom: 1
					}
				}
				var panoramiqueStreetView = new google.maps.StreetViewPanorama(document.getElementById('EmplacementPanoramiqueStreetView'), optionsPanoramiqueStreetView);
			 }
			 google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<div id="EmplacementPanoramiqueStreetView"></div>
		<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 ne soit 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>

Lier le panoramique StreetViewPanorama à la carte

Il ne reste plus qu'à lier le panoramique nommé panoramiqueStreetView à la carte nommée maCarte à l’aide de la méthode setStreetView().

Désormais, votre panoramique Street View nommé panoramiqueStreetView remplace le StreetViewPanorama créé, par défaut, en même temps que la carte.

A compter de maintenant, tout déplacement du petit bonhomme Pegman sur la carte entraînera la mise à jour automatique du panoramique StreetView situé à l’extérieur de la carte. De même tout déplacement effectué à l’intérieur du panoramique StreetView sera répercuté sur la carte (déplacement et/ou rotation du petit bonhomme Pegman sur la carte).

Au fait, Pegman c’est le nom donné au petit bonhomme orangé que vous déplacez sur la carte pour visualiser un panoramique StreetView :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte, #EmplacementPanoramiqueStreetView {
				height: 50%
			}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsPanoramiqueStreetView = {
					position: centreCarte,
					pov: {
						heading: 34,
						pitch: 10,
						zoom: 1
					}
				};
				var panoramiqueStreetView = new google.maps.StreetViewPanorama(document.getElementById('EmplacementPanoramiqueStreetView'), optionsPanoramiqueStreetView);
				maCarte.setStreetView(panoramiqueStreetView);
			 }
			 google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<div id="EmplacementPanoramiqueStreetView"></div>
		<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 ne soit 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>

Supprimer le lien entre le panoramique StreetViewPanorama et la carte

Si par la suite vous souhaitez supprimer la liaison entre le panoramique StreetView nommé panoramiqueStreetView et la carte nommée maCarte, il suffit de passer null à la méthode setStreetView().

maCarte.setStreetView(null);

Paramètrer et afficher un panoramique StreetView

StreetView exemples et tutoriels en Français

API Google Maps JavaScript version 3