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

Ajouter une infobulle ou infowindow au marqueur

Tutoriel publié le 04 Juillet 2010 Mis à jour le 16 Septembre 2011

Comment afficher une info bulle lorsqu'un 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 ?.

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 marqueur et info-bulle

Cliquez sur le marqueur pour afficher l'infowindow.

Contenu de l'info-bulle

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.

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

Les différentes zones CSS de l'info bulle

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

<!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.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.127608,0.998898);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon premier marqueur"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
				var contenuInfoBulle = ' ..... ';
			}
			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>

Titre de l'info bulle H1

Tout d'abord, on ajoute la balise <h1/> contenant le titre de l'info-bulle (ou infowindow).

<!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.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.127608,0.998898);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon premier marqueur"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
				var contenuInfoBulle = '<h1>Cité Royale de Loches</h1>';
			}
			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>

Sous-Titre de l'info-bulle H2

Ensuite, on place la balise <h2/> contenant le sous-titre de l'info-bulle (ou infowindow).

<!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.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.127608,0.998898);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon premier marqueur"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
				var contenuInfoBulle = '<h1>Cité Royale de Loches</h1>' +	
							'<h2>Royale et imprenable</h2>';
			}
			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>

Image sous forme de lettrine et texte

Enfin, on intègre l'image, sous la forme de lettrine, et les trois paragraphes contenant le texte.

<!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.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.127608,0.998898);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon premier marqueur"
				}
				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.touraineverte.com/apigooglemapv3/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>';
			}
			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>

Création de l'infobulle

Aprés avoir configuré les informations destinées à s'afficher dans l'info-bulle (ou infowindow), on peut maintenant passer à la création de l'info-bulle (ou infowindow).

A l'aide de new google.maps.InfoWindow on va créer une nouvelle info-bulle (ou infowindow) appelée "infoBulle" :

var infoBulle = new google.maps.InfoWindow( ... blablabla ... )

<!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.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.127608,0.998898);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon premier marqueur"
				}
				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.touraineverte.com/apigooglemapv3/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({
					.....
				})
			}
			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>

Propriétés content

Grâce à la propriété content: on va indiquer que le contenu de l'info bulle est égale à contenuInfoBulle défini précédemment.

var infoBulle = new google.maps.InfoWindow({
content:contenuInfoBulle
})

<!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.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.127608,0.998898);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon premier marqueur"
				}
				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.touraineverte.com/apigooglemapv3/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.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>

Observateur d'événement sur click marqueur

Il ne reste plus qu'à ajouter un observateur d'événement au marqueur nommé marqueur à l'aide de google.maps.event.addListener() et d'indiquer que l'événement observé est le 'click'.

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

<!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.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.127608,0.998898);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon premier marqueur"
				}
				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.touraineverte.com/apigooglemapv3/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() {
					.....
				});
			}
			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>

Déclencher l'ouverture de l'info-bulle

Une fois le "click" sur le marqueur nommé marqueur détecté, on déclenche l'ouverture de l'info-bulle (ou infowindow) nommée infoBulle sur la carte nommée maCarte au-dessus du marqueur nommé marqueur.

infoBulle.open(maCarte, marqueur);

On obtient donc au final :

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

<!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.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.127608,0.998898);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon premier marqueur"
				}
				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.touraineverte.com/apigooglemapv3/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);
				});
			}
			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>

CSS 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).

<!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">
			*{
				margin:0px;
				padding:0px;
			}
			html{
				height:100%;
			}
			body{
				height:100%;
			}
			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>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.127608,0.998898);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon premier marqueur"
				}
				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.touraineverte.com/apigooglemapv3/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);
				});
			}
			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>

Code final

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 type="text/css">
			*{
				margin:0px;
				padding:0px;
			}
			html{
				height:100%;
			}
			body{
				height:100%;
			}
			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> 
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.127608,0.998898);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon premier marqueur"
				}
				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.touraineverte.com/apigooglemapv3/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);
				});
			}
			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