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

Activer désactiver le contrôle overview map

Tutoriel publié le 29 Avril 2011 Mis à jour le 11 Février 2012

Comment afficher ou masquer le contrôle 'aperçu de la carte' (overviewMap) ?

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 'aperçu de la carte' permettant d'insérer en bas à droite de la carte principale, une carte miniature indiquant la zone actuellement couverte par la carte principale.

Carte avec le bouton 'aperçu de la carte' activé

Activation du contrôle 'aperçu de la carte' (bouton dans le coin inférieur droit de la carte)

Propriété overviewMapControl

Le contrôle 'aperçu de la carte' permet d'insérer dans le coin inférieur droit de la carte, un bouton permettant d'afficher un aperçu de la région dans laquelle la carte principale est située.

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é overviewMapControl permet d'afficher ou de masquer le bouton 'aperçu de la carte' sur la carte.

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

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

Afficher le bouton 'aperçu de la carte' - overviewMapControl: true

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

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

Masquer le bouton 'aperçu de la carte' - overviewMapControl: false

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

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

Comportement par défaut du bouton 'aperçu de la carte'

Par défaut, le contrôle overviewMapControl :

est désactivé (masqué),

Par contre, lorsqu'il est activé :

il apparaît dans le coin inférieur droit de la carte sous la forme d'une flèche,
tout clic sur cette flèche permet de déployer ou replier une mini-carte,
la mini carte cible la zone couverte par la carte principale,
tout déplacement du rectangle bleu situé dans la mini carte, provoque le déplacement de la carte principale vers la zone ciblée.

Code final

Ce code permet d'afficher le bouton ou contrôle 'aperçu de la carte' dans le coin inférieur droit de la carte. Il suffit de cliquer dessus pour voir apparaître l'aperçu de la carte principale.

<!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,
					overviewMapControl: 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>

API Google Maps JavaScript version 3

Afficher ou masquer le bouton aperçu de la carte

Google Maps API & Google Web Services