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

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

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

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

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

Cliquez sur le bouton ci-dessus afin d'afficher ou masquer les boutons imagerie 45° sur la carte.
Masquer les boutons imagerie 45°
Attention :
Si l'imagerie 45° n'est pas disponible pour la ville ciblée, que le niveau de zoomer n'est pas asse élevé, ou que le style de carte est différent de SATELLITE ou HYBRID alors les boutons liés à l'imagerie 45° ne s'afficheront pas.

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 cartes Satellite ou Hybride.

Boutons afficher l'imagerie 45° sur une carte

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

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

L'imagerie 45° n'étant pas disponible pour la ville de Tours (lat: 47.389982, lng: 0.688877) nous allons remplacer ses coordonnées GPS par celles de Clermont-ferrand (lat: 45.783300, lng: 3.083300) :

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

Ensuite il faut que le niveau de zoom soit élevé, 18 au lieu de 8, et que nous définissions le type de carte à SATELLITE par défaut :

function initialisation(){
	var optionsCarte = {
		zoom: 18,
		center: { lat: 45.783300, lng: 3.083300 },
		mapTypeId: google.maps.MapTypeId.SATELLITE
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

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 optionsCarte servant à la construction de la carte.

function initialisation(){
	var optionsCarte = {
		zoom: 18,
		center: { lat: 45.783300, lng: 3.083300 },
		mapTypeId: google.maps.MapTypeId.SATELLITE,
		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 optionsCarte servant à la construction de la carte.

function initialisation(){
	var optionsCarte = {
		zoom: 18,
		center: { lat: 45.783300, lng: 3.083300 },
		mapTypeId: google.maps.MapTypeId.SATELLITE,
		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 inférieur droit de la carte.
Contrôle Imagerie à 45°

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 bas à droite 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>
			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: 18,
					center: { lat: 45.783300, lng: 3.083300 },
					mapTypeId: google.maps.MapTypeId.SATELLITE,
					rotateControl: true
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
		</script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>