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

Activer désactiver le contrôle ou bouton type de carte

Tutoriel publié le 30 Avril 2011 Mis à jour le 13 Février 2012

Comment afficher ou masquer le bouton type de carte ?

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 de modifier le type de carte.

Carte avec le contrôle 'type de carte' désactivé

Le contrôle permettant de modifier le type de carte est désactivé

Propriété mapTypeControl

Le contrôle type de carte permet de modifier le type de carte à afficher (Satellite - Mixte - Relief - Plan).

Le bouton type de carte peut revêtir deux apparences. Soit deux boutons côte à côte, soit une liste déroulante :

Apparence du contrôle jusqu'à la version 3.6 de l'API		Apparence du contrôle depuis la version 3.7 de l'API
Menu horizontal	Menu déroulant	Menu horizontal	Menu déroulant

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

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

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

Afficher le bouton 'type de carte' - mapTypeControl: true

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

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

Masquer le bouton 'type de carte' - mapTypeControl: false

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

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

Comportement par défaut du bouton 'type de carte'

Par défaut, le contrôle 'type de carte' :

est activé,
apparaît dans le coin supérieur droit de la carte,
se présente sous la forme de deux boutons "Plan" et "Satellite" situés côte à côte.

Code final

Le bouton ou contrôle 'type de carte' n'est pas affiché sur 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(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					mapTypeControl: 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 type de carte

Google Maps API & Google Web Services