Comment afficher une info bulle lorsqu'on clique sur un marqueur ?

Ce tutoriel est basé sur le code de l'exemple intitulé : Comment ajouter un marqueur sur une carte avec l'API Google Maps Version 3 ?.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: new google.maps.LatLng(47.389982, 0.688877)
	};
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
	var optionsMarqueur = {
		position: maCarte.getCenter(),
		map: maCarte
	};
	var marqueur = new google.maps.Marker(optionsMarqueur);
}

Nous allons compléter ce code afin d'ajouter une info-bulle (ou infowindow) qui apparaîtra lors d'un click sur le marqueur.

Les caractéristiques de l'info-bulle (ou infowindow) seront les suivantes :

Un titre sera placé dans la balise <h1/>,
Un sous-titre sera placé dans la balise <h2/>,
Une image sous forme de lettrine et du texte seront placés dans l'infobulle.

Carte avec info-bulle s'ouvrant lors d'un click sur marqueur

Survolez le marqueur, sans cliquer dessus, pour afficher son étiquette.
Cliquez sur le marqueur pour ouvrir et afficher le contenu de son infobulle.

Configurer l'étiquette du marqueur

Pour ajouter une étiquette au marqueur, qui s'affichera lorsque vous passerez votre souris dessus sans cliquer, il suffit d'ajouter la propriété title à l'objet littéral optionsMarqueur de type MarkerOptions.html suivi du texte à afficher :

var optionsMarqueur = {
	position: maCarte.getCenter(),
	map: maCarte,
	title: "Cité royale de Loches"
};
var marqueur = new google.maps.Marker(optionsMarqueur);

Configurer le contenu de l'info-bulle

Voici l'aspect personnalisé souhaité de l'info-bulle (ou infowindow) :

Créons, tout d'abord, une nouvelle variable nommée contenuInfoBulle qui va contenir le code HTML nécessaire à l'affichage des informations dans l'info bulle.

Faites très attention à l'alternance des guillemets simples / doubles dans le code, et n'oubliez pas de les échapper si nécessaire à l'aide de \.

var contenuInfoBulle =	'<h1>Cité Royale de Loches</h1>' +	
						'<h2>Royale et imprenable</h2>' +
						'<img id="lettrineImage" src="http://static.www.touraineverte.fr/googlemapsapiversion3/photo_monument-loches.jpg" title="La cité royale de Loches" />' +
						'<p>Remontez le temps pour découvrir l\'une des plus belles cités fortifiées de France.</p>' +
						'<p>Le <b>DONJON</b>, haut de 36 mètres, a été construit par un comte d\'Anjou, Foulques Nerra, au début du XIe siècle. S\'il figure parmi les plus imposants de son époque en Europe, il est aussi l\'un des mieux conservés. Modèle d\'architecture militaire, il est transformé en prison royale par Louis XI.</p>' +
						'<p>Le <b>LOGIS ROYAL</b> se trouve à proximité. Ce joyau de la Renaissance française, haut lieu de l\'Histoire de France, a été une résidence de prédilection de la dynastie des Valois. Sa façade ouverte en terrasse domine la ville et la vallée de l\'Indre. Le logis a accueilli notamment Jeanne d\'Arc, Agnès Sorel et Anne de Bretagne. Pour en savoir plus : <a href="http://www.cg37.fr/index.php?media=106" title="La cité royale de Loches" target="_parent">La cité royale de Loches</a></p>';

Code CSS pour le contenu de l'info bulle

Il ne reste plus qu'à modifier / compléter le code CSS qui va déterminer la présentation des informations à l'intérieur de l'info-bulle (ou infowindow).

<style>
	html, body {
		height: 100%;
		margin: 0;
		padding: 0
	}
	h1{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 2em;
		font-style: italic;
		font-weight: bold;
		color:#267AA8;
		text-align:center;
	}
	h2{
		margin-bottom:1em;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 1.3em;
		font-style: normal;
		font-weight: bold;
		color:#FF9900;
		text-align:center;
	}
	#lettrineImage{
		float: left;
		width: 220px;
		height: 163px;
		margin: 0 1em 1em 0;
	}
	#EmplacementDeMaCarte{
		height:100%;
	}
</style>

Création de l'infobulle et paramétrage de son contenu avec la propriété content

Pour déterminer les informations à afficher dans l'info-bulle on créé tout d'abord un objet littéral nommé optionsInfoBulle, de type InfoWindowOptions, et on attribue à la propriété content le texte à afficher, soit dans notre cas contenuInfoBulle :

var contenuInfoBulle =	'<h1>Cité Royale de Loches</h1>' +	
						'<h2>Royale et imprenable</h2>' +
						'<img id="lettrineImage" src="http://static.www.touraineverte.fr/googlemapsapiversion3/photo_monument-loches.jpg" title="La cité royale de Loches" />' +
						'<p>Remontez le temps pour découvrir l\'une des plus belles cités fortifiées de France.</p>' +
						'<p>Le <b>DONJON</b>, haut de 36 mètres, a été construit par un comte d\'Anjou, Foulques Nerra, au début du XIe siècle. S\'il figure parmi les plus imposants de son époque en Europe, il est aussi l\'un des mieux conservés. Modèle d\'architecture militaire, il est transformé en prison royale par Louis XI.</p>' +
						'<p>Le <b>LOGIS ROYAL</b> se trouve à proximité. Ce joyau de la Renaissance française, haut lieu de l\'Histoire de France, a été une résidence de prédilection de la dynastie des Valois. Sa façade ouverte en terrasse domine la ville et la vallée de l\'Indre. Le logis a accueilli notamment Jeanne d\'Arc, Agnès Sorel et Anne de Bretagne. Pour en savoir plus : <a href="http://www.cg37.fr/index.php?media=106" title="La cité royale de Loches" target="_parent">La cité royale de Loches</a></p>';
var optionsInfoBulle = {
	content: contenuInfoBulle
};

Il ne reste plus qu'à utiliser l'objet littéral nommé optionsInfoBulle lors de la création de notre infoBulle à l'aide de la classe InfoWindow :

var contenuInfoBulle =	'<h1>Cité Royale de Loches</h1>' +	
						'<h2>Royale et imprenable</h2>' +
						'<img id="lettrineImage" src="http://static.www.touraineverte.fr/googlemapsapiversion3/photo_monument-loches.jpg" title="La cité royale de Loches" />' +
						'<p>Remontez le temps pour découvrir l\'une des plus belles cités fortifiées de France.</p>' +
						'<p>Le <b>DONJON</b>, haut de 36 mètres, a été construit par un comte d\'Anjou, Foulques Nerra, au début du XIe siècle. S\'il figure parmi les plus imposants de son époque en Europe, il est aussi l\'un des mieux conservés. Modèle d\'architecture militaire, il est transformé en prison royale par Louis XI.</p>' +
						'<p>Le <b>LOGIS ROYAL</b> se trouve à proximité. Ce joyau de la Renaissance française, haut lieu de l\'Histoire de France, a été une résidence de prédilection de la dynastie des Valois. Sa façade ouverte en terrasse domine la ville et la vallée de l\'Indre. Le logis a accueilli notamment Jeanne d\'Arc, Agnès Sorel et Anne de Bretagne. Pour en savoir plus : <a href="http://www.cg37.fr/index.php?media=106" title="La cité royale de Loches" target="_parent">La cité royale de Loches</a></p>';
var optionsInfoBulle = {
	content: contenuInfoBulle
}
var infoBulle = new google.maps.InfoWindow( optionsInfoBulle )

autre écriture possible :

var contenuInfoBulle =	'<h1>Cité Royale de Loches</h1>' +	
						'<h2>Royale et imprenable</h2>' +
						'<img id="lettrineImage" src="http://static.www.touraineverte.fr/googlemapsapiversion3/photo_monument-loches.jpg" title="La cité royale de Loches" />' +
						'<p>Remontez le temps pour découvrir l\'une des plus belles cités fortifiées de France.</p>' +
						'<p>Le <b>DONJON</b>, haut de 36 mètres, a été construit par un comte d\'Anjou, Foulques Nerra, au début du XIe siècle. S\'il figure parmi les plus imposants de son époque en Europe, il est aussi l\'un des mieux conservés. Modèle d\'architecture militaire, il est transformé en prison royale par Louis XI.</p>' +
						'<p>Le <b>LOGIS ROYAL</b> se trouve à proximité. Ce joyau de la Renaissance française, haut lieu de l\'Histoire de France, a été une résidence de prédilection de la dynastie des Valois. Sa façade ouverte en terrasse domine la ville et la vallée de l\'Indre. Le logis a accueilli notamment Jeanne d\'Arc, Agnès Sorel et Anne de Bretagne. Pour en savoir plus : <a href="http://www.cg37.fr/index.php?media=106" title="La cité royale de Loches" target="_parent">La cité royale de Loches</a></p>';
var infoBulle = new google.maps.InfoWindow( {
	content: contenuInfoBulle
} )

Déclencher l'ouverture de l'info-bulle lors d'un click sur le marqueur

On ajoute un observateur d'événement sur le marqueur chargé de réagir à tout "click" sur celui-ci :

google.maps.event.addListener(marqueur, 'click', function() {

});

Dès qu'un "clik" sera détecté sur le marqueur on déclenchera l'ouverture de l'infoBulle, à l'aide de la méthode open, sur la carte nommée maCarte et au-dessus du marqueur :

google.maps.event.addListener(marqueur, 'click', function() {
	infoBulle.open(maCarte, marqueur);
});

Au final on obtient :

var optionsMarqueur = {
	position: maCarte.getCenter(),
	map: maCarte,
	title: "Cité royale de Loches"
}
var marqueur = new google.maps.Marker(optionsMarqueur);

var contenuInfoBulle =	'<h1>Cité Royale de Loches</h1>' +	
						'<h2>Royale et imprenable</h2>' +
						'<img id="lettrineImage" src="http://static.www.touraineverte.fr/googlemapsapiversion3/photo_monument-loches.jpg" title="La cité royale de Loches" />' +
						'<p>Remontez le temps pour découvrir l\'une des plus belles cités fortifiées de France.</p>' +
						'<p>Le <b>DONJON</b>, haut de 36 mètres, a été construit par un comte d\'Anjou, Foulques Nerra, au début du XIe siècle. S\'il figure parmi les plus imposants de son époque en Europe, il est aussi l\'un des mieux conservés. Modèle d\'architecture militaire, il est transformé en prison royale par Louis XI.</p>' +
						'<p>Le <b>LOGIS ROYAL</b> se trouve à proximité. Ce joyau de la Renaissance française, haut lieu de l\'Histoire de France, a été une résidence de prédilection de la dynastie des Valois. Sa façade ouverte en terrasse domine la ville et la vallée de l\'Indre. Le logis a accueilli notamment Jeanne d\'Arc, Agnès Sorel et Anne de Bretagne. Pour en savoir plus : <a href="http://www.cg37.fr/index.php?media=106" title="La cité royale de Loches" target="_parent">La cité royale de Loches</a></p>';
var infoBulle = new google.maps.InfoWindow({
	content: contenuInfoBulle
})

google.maps.event.addListener(marqueur, 'click', function() {
	infoBulle.open(maCarte, marqueur);
});

Code pour ouvrir une infobulle lors d'un click sur un marqueur

Un marqueur doté d'une info-bulle (ou infowindow) personnalisée.

La personnalisation du contenu de l'info-bulle (ou infowindow) est réalisée à l'aide de :

code HTML,
CSS (ou feuille de style).

<!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
			}
			h1{
				font-family: Arial, Helvetica, sans-serif;
				font-size: 2em;
				font-style: italic;
				font-weight: bold;
				color:#267AA8;
				text-align:center;
			}
			h2{
				margin-bottom:1em;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 1.3em;
				font-style: normal;
				font-weight: bold;
				color:#FF9900;
				text-align:center;
			}
			#lettrineImage{
				float: left;
				width: 220px;
				height: 163px;
				margin: 0 1em 1em 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: 8,
					center: new google.maps.LatLng(47.127608,0.998898);,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				
				var optionsMarqueur = {
					position: maCarte.getCenter(),
					map: maCarte,
					title: "Cité royale de Loches"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
				
				var contenuInfoBulle =	'<h1>Cité Royale de Loches</h1>' +	
										'<h2>Royale et imprenable</h2>' +
										'<img id="lettrineImage" src="http://static.www.touraineverte.fr/googlemapsapiversion3/photo_monument-loches.jpg" title="La cité royale de Loches" />' +
										'<p>Remontez le temps pour découvrir l\'une des plus belles cités fortifiées de France.</p>' +
										'<p>Le <b>DONJON</b>, haut de 36 mètres, a été construit par un comte d\'Anjou, Foulques Nerra, au début du XIe siècle. S\'il figure parmi les plus imposants de son époque en Europe, il est aussi l\'un des mieux conservés. Modèle d\'architecture militaire, il est transformé en prison royale par Louis XI.</p>' +
										'<p>Le <b>LOGIS ROYAL</b> se trouve à proximité. Ce joyau de la Renaissance française, haut lieu de l\'Histoire de France, a été une résidence de prédilection de la dynastie des Valois. Sa façade ouverte en terrasse domine la ville et la vallée de l\'Indre. Le logis a accueilli notamment Jeanne d\'Arc, Agnès Sorel et Anne de Bretagne. Pour en savoir plus : <a href="http://www.cg37.fr/index.php?media=106" title="La cité royale de Loches" target="_parent">La cité royale de Loches</a></p>';
				var optionsInfoBulle = {
					content: contenuInfoBulle
				};
				var infoBulle = new google.maps.InfoWindow( optionsInfoBulle );
				
				google.maps.event.addListener(marqueur, 'click', function() {
					infoBulle.open(maCarte, marqueur);
				});
			}
		</script>
		<script async defer  src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCleAPIGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>

Ajouter une infobulle ou infowindow au marqueur marker

Infobulle Infowindow exemples et tutoriels en Français

API Google Maps JavaScript version 3