Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1

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

Tutoriel publié le 26 Avril 2011 Mis à jour le 05 Février 2012

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 ?.

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

Carte avec le bouton 'streetview' désactivé (Pegman masqué)

Le contrôle 'streetview" est masqué sur la carte.

Propriété streetViewControl

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

Apparence du contrôle jusqu'à la version 3.6 de l'API	Apparence du contrôle depuis la version 3.7 de l'API

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' - streetViewControl: true

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

var optionsCarte = {
	.....
	streetViewControl: true
}
var maCarte = new google.maps.Map(document.getElementById('EmplacementDeMaCarte'), optionsCarte);

Masquer le bouton 'streetview' - streetViewControl: false

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

var optionsCarte = {
	.....
	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 'Street View' :

est activé,
apparaît dans le coin supérieur gauche de la carte.

Code final

Affiche une carte ou 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 type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>
		<script type="text/javascript" src="http://maps.google.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,
					streetViewControl: false
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
			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>

API Google Maps JavaScript version 3

Afficher ou masquer le bouton street view

Google Maps API & Google Web Services