Comment activer ou désactiver le click sur les icônes de carte ou POI ( Point Of Interest ) ?

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'autoriser ou interdire le click sur les icônes de carte ou points d'intérêt (POI).
Les POI sont les petits pictogrammes que apercevez sur les cartes Google Maps et qui permettent de localiser les magasins, monuments, lieux touristiques, etc.
Lorsque vous cliquez sur un pictogramme, une info-bulle s'ouvre pour vous indiquer l'adresse postale et vous proposer un lien vers une carte Google Maps.
L'API Google Maps vous permet d'activer ou désactiver le click sur ces pictogrammes.

Attention :
Le niveau de zoom doit être suffisamment élevé pour les pictogrammes des POI soient visibles sur la carte.
Les pictogrammes apparaissent à partir d'un niveau de zoom égal à 13.

Carte autorisant ou interdisant le click sur les POI

Cliquez sur le bouton ci-dessous afin d'activer ou désactiver le click sur les pictogrammes représentant des points d'intérêt ou POI.

Interdire le click sur les POI

Le click sur les pictogrammes de POI est activé. Cliquez sur un pictogramme pour ouvrir son info-bulle.

Propriété clickableIcons

Lors que la propriété clickableIcons est activée, alors tout click sur un pictogramme de POI déclenchera l'ouverture de son info-bulle.
.

La propriété clickableIcons de l'objet MapOptions permet d'autoriser ou d'interdire le click sur les pictogrammes représentant des points d'intérêt ou POI.

La propriété clickableIcons est un booléen. Elle ne peut prendre que deux valeurs : true ou false.

Autoriser le click sur les points d'intérêt ou POI - clickableIcons: true

Pour activer le click sur les POI, il suffit de définir la propriété clickableIcons sur true dans les options optionsCarte servant à la construction de la carte.

Attention : Le niveau de zoom devant être suffisamment élevé pour que les pictogrammes des POI soient visibles sur la carte, nous passons le niveau de zoom de 8 à 18.

function initialisation(){
	var optionsCarte = {
		zoom: 18,
		center: { lat: 47.389982, lng: 0.688877 },
		clickableIcons: true
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Autres écritures équivalentes :

utilisation de la méthode setOptions de la classe Map

function initialisation(){
	var optionsCarte = {
		zoom: 18,
		center: { lat: 47.389982, lng: 0.688877 },
		clickableIcons: true
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
		maCarte.setOptions( optionsCarte );
}

La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode set

function initialisation(){
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
		maCarte.set( "center", new google.maps.LatLng( 47.389982, 0.688877 ) );
		maCarte.set( "zoom", 18 );
		maCarte.set( "clickableIcons", true );
}

La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode setValues

function initialisation(){
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
		maCarte.setValues( {
			center : { lat: 47.389982, lng: 0.688877 },
			zoom: 18,
			clickableIcons: true
		} );
}

Interdire le click sur les points d'intérêt ou POI - clickableIcons: false

Pour désactiver le click sur les POI, il suffit de définir la propriété clickableIcons sur false dans les options optionsCarte servant à la construction de la carte.

function initialisation(){
	var optionsCarte = {
		zoom: 18,
		center: { lat: 47.389982, lng: 0.688877 },
		clickableIcons: false
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Autres écritures équivalentes :

utilisation de la méthode setOptions de la classe Map

function initialisation(){
	var optionsCarte = {
		zoom: 18,
		center: { lat: 47.389982, lng: 0.688877 },
		clickableIcons: false
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
		maCarte.setOptions( optionsCarte );
}

La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode set

function initialisation(){
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
		maCarte.set( "center", new google.maps.LatLng( 47.389982, 0.688877 ) );
		maCarte.set( "zoom", 18 );
		maCarte.set( "clickableIcons", false );
}

La classe Map héritant de la classe la classe MVCObject il est possible d'utiliser la méthode setValues

function initialisation(){
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"));
		maCarte.setValues( {
			center : { lat: 47.389982, lng: 0.688877 },
			zoom: 18,
			clickableIcons: false
		} );
}

Comportement par défaut des pictogrammes de POI face à l'événement click

Par défaut, l'événement click est autorisé sur les points d'intérêts ou POI.

Par conséquent, définir la propriété clickableIcons sur true dans optionsCarte :

function initialisation(){
	var optionsCarte = {
		zoom: 18,
		center: { lat: 47.389982, lng: 0.688877 },
		clickableIcons: true
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

ou omettre la propriété clickableIcons dans optionsCarte, autorisera systématiquement le click sur les pictogrammes géolocalisant les points d'intérêt ou POI :

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

Exemple de code avec la propriété clickableIcons

Dans l'exemple de code ci-dessous le click sur les pictogrammes des POI est désactivé.

<!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: 47.389982, lng: 0.688877 },
					clickableIcons: false
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
		</script>
		<script async defer src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>

Autoriser ou interdire le click sur les pictogrammes des points d'intérêt

Carte Map exemples et tutoriels en Français

API Google Maps JavaScript version 3