Comment afficher ou masquer le contrôle StreetView ?

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

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 }
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Nous allons compléter ce code afin d'ajouter ou supprimer le bouton ou contrôle nommé Street View.

Carte avec masquage ou affichage du bouton StreetView sur la carte

Cliquez sur le bouton ci-dessus afin d'afficher ou masquer le bouton StreetView sur la carte.

Afficher le bouton StreetView

Propriété streetViewControl

Le contrôle Street View est représenté sous la forme d'un petit bonhomme orange nommé Pegman :

La propriété streetViewControl permet d'afficher ou de masquer le bouton StreetView sur la carte.

Pour activer ou désactiver le bouton StreetView sur une carte, il suffit d'utiliser la propriété streetViewControl de l'objet google.maps.MapOptions.

La propriété streetViewControl est un booléen. Autrement dit elle ne peut prendre que deux valeurs : true ou false

Afficher le bouton StreetView sur la carte - streetViewControl: true

Pour activer le contrôle StreetView sur la carte, il suffit de définir la propriété streetViewControl sur true dans les options servant à la construction de la carte.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		streetViewControl: true
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Masquer le bouton StreetView sur la carte - streetViewControl: false

Pour désactiver le contrôle StreetView sur la carte, il suffit de définir la propriété streetViewControl sur false dans les options servant à la construction de la carte.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		streetViewControl: false
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Comportement par défaut du bouton StreetView

Par défaut, le contrôle StreetView :

est activé,
apparaît dans le coin inférieur droit de la carte.

Par conséquent, définir la propriété streetViewControl sur true dans optionsCarte :

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 },
		streetViewControl: true
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

ou omettre la propriété streetViewControl dans optionsCarte, affichera quand même le bouton StreetView sur la carte :

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 }
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Code final

L'exemple de code ci-dessous affiche une carte où le bouton ou contrôle Street View est masqué.

<!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>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
	</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>
		<script>
			function initialisation(){
				var optionsCarte = {
					zoom: 8,
					center: {lat: 47.389982, lng: 0.688877},
					streetViewControl: false
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
		</script>
		<script async defer src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>>
	</body>
</html>

Activer désactiver le contrôle ou bouton street view

Contrôle Control exemples et tutoriels en Français

API Google Maps JavaScript version 3