Activer désactiver le contrôle ou bouton imagerie 45°

Contrôle Control exemples et tutoriels en Français

API Google Maps JavaScript version 3

#PanamaPapers: En finir avec le secret, sanctionnons les banques !

Les Panama Papers ont révélé la façon dont certaines élites utilisent le secret pour cacher leurs activités financières. Ce secret permet à de riches individus de ne pas payer leur part normale d’impôts, mais il permet également à la grande criminalité de se financer, de l’esclavage humain à la vente d’armes illégales en passant par le financement du terrorisme.

Eva Joly - Députée européenne. Rejoignez-nous ! Signez la pétition et partagez-la !


Comment afficher ou masquer le contrôle imagerie 45° ?

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 permettant d'afficher l'imagerie à 45°.

Carte de Clermont-Ferrand avec le bouton imagerie 45° activé

Le contrôle imagerie 45° est activé sur la carte

Propriété rotateControl

Le contrôle imagerie à 45° permet d'afficher des images aériennes haute résolution prises à 45° dans les quatre principales directions : Nord, Est, Sud et Ouest. Ces images sont disponibles pour des niveaux de zoom plus élevés que pour les types de cartes habituelles et uniquement pour les types de carte Satellite ou Hybride.

Apparence du contrôle jusqu'à la V 3.6 Apparence du contrôle depuis la V 3.7 Apparence du contrôle depuis la V 3.13

La propriété rotateControl permet d'afficher ou de masquer le bouton 'imagerie 45°' sur la carte.

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

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

Afficher le bouton 'imagerie 45°' - rotateControl: true

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

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

Masquer le bouton 'imagerie 45°' - rotateControl: false

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

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

Comportement par défaut du bouton 'imagerie 45°'

Par défaut, le contrôle 'imagerie 45°' :

  • est activé mais il ne s'affiche sur la carte que dans les zones où le service est disponible, uniquement pour des cartes de types Satellite ou Hybride, et lorsque le niveau de zoom est suffisamment élevé,
  • apparaît dans le coin supérieur gauche de la carte, entre Pegman et le Zoom.

Pour connaître la liste des villes ou le service imagerie 45° est diponible veuillez consulter ces liens :

Attention : L'imagerie 45° n'est disponible que pour certaines villes de France. En voici une liste non exhaustive :

Angers, Arcachon, Avignon, Besançon, Béziers, Bordeaux, Bourges, Clermont-Ferrand, Colmar, Dijon, Grenoble, La Roche-sur-Yon, La Rochelle, Lille, Limoges, Lyon, Marseille, Montpellier, Nancy, Nantes, Nîmes, Perpignan, Poitiers, Rennes, Reims, Rouen, Saint-Étienne, Strasbourg, Toulouse, Troyes.

Code final

Affichage du bouton ou contrôle imagerie à 45° en haut à gauche de la carte.

<!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(45.777185,3.087033);
				var optionsCarte = {
					zoom: 18,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.SATELLITE,
					rotateControl: true
				}
				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>