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

Paramétrer et afficher un marqueur personnalisé sur une carte

Tutoriel publié le 20 Juin 2010

Comment créer et ajouter un marqueur personnalisé sur une carte

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 de remplacer le marqueur par défaut, par un marqueur personnalisé doté d'une ombre.

Caractéristiques de l'image utilisée pour personnaliser le marqueur :

emplacement de l'image : http://static.touraineverte.com/apigooglemapv3/4/image.png,
dimension de l'image : 150 x 120 pixels,
origine : 0 x 0,
point d'ancrage : 28 x 120.

Caractéristiques de l'image utilisée pour représenter l'ombre du marqueur :

emplacement de l'image : http://static.touraineverte.com/apigooglemapv3/4/ombre.png,
dimension : 200 x 120 pixels,
origine : 0 x 0,
point d'ancrage : 28 x 120.

Caractéristiques du marqueur :

ancré au centre de la carte : centreCarte,
affiché sur la carte nommée : maCarte,
son titre : "Titre de mon marqueur personnalisé".

Carte avec un marqueur personnalisé

Image représentant le marqueur

Création d'une nouvelle image nommée imageMarqueur utilisée pour symboliser le 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.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = new google.maps.MarkerImage( ..... );
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
			}
			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>

URL de l'image du marqueur

L'image nommée imageMarqueur est située à l'adresse (URL) suivante :

http://static.touraineverte.com/apigooglemapv3/4/image.png

<!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.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/image.png', ..... );
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
			}
			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>

Dimensions de l'image du marqueur

L'image nommée imageMarqueur a pour dimensions :

150 x 120 pixels.

<!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.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/image.png', new google.maps.Size(150, 120), ..... );
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
			}
			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>

Origine de l'image du marqueur

L'image nommée imageMarqueur a pour origine :

0 x 0.

<!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.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/image.png', new google.maps.Size(150, 120), new google.maps.Point(0,0) ..... );
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
			 }
			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>

Point d'ancrage de l'image du marqueur

Le point d'ancrage de l'image nommée imageMarqueur est situé :

28 x 120 pixels.

<!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.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/image.png', new google.maps.Size(150, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
			 }
			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 représentant l'ombre du marqueur

Création d'une nouvelle image nommée ombreMarqueur utilisée pour symboliser l'ombre du 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.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/image.png', new google.maps.Size(150, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var ombreMarqueur = new google.maps.MarkerImage( ..... );
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
			 }
			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>

URL de l'image de l'ombre du marqueur

L'image nommée ombreMarqueur est située à l'adresse (URL) suivante :

http://static.touraineverte.com/apigooglemapv3/4/ombre.png

<!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.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/image.png', new google.maps.Size(150, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var ombreMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/ombre.png', ..... );
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
			 }
			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>

Dimensions de l'image de l'ombre du marqueur

L'image nommée ombreMarqueur a pour dimensions :

200 x 120 pixels.

<!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.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/image.png', new google.maps.Size(150, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var ombreMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/ombre.png', new google.maps.Size(200, 120), ..... );
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
			 }
			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>

Origine de l'image de l'ombre du marqueur

L'image nommée ombreMarqueur a pour origine :

0 x 0.

<!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.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/image.png', new google.maps.Size(150, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var ombreMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/ombre.png', new google.maps.Size(200, 120), new google.maps.Point(0,0), ..... );
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
			 }
			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>

Point d'ancrage de l'image de l'ombre du marqueur

Le point d'ancrage de l'image nommée ombreMarqueur est situé :

28 x 120 pixels.

<!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.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/image.png', new google.maps.Size(150, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var ombreMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/ombre.png', new google.maps.Size(200, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé"
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
			 }
			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é icon

La propriété icon: permet de déterminer l'image (ou icône) à utiliser pour représenter notre marqueur.

Ici on va utiliser l'image nommée imageMarqueur précédemment paramétrée.

icon: imageMarqueur,

<!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.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/image.png', new google.maps.Size(150, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var ombreMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/ombre.png', new google.maps.Size(200, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé,"
					icon: imageMarqueur
				}

				var marqueur = new google.maps.Marker(optionsMarqueur);
			 }
			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é shadow

La propriété shadow: permet de déterminer l'image (ou icône) à utiliser pour représenter l'ombre de notre marqueur.

Ici on va utiliser l'ombre nommée ombreMarqueur précédemment paramétrée.

shadow: ombreMarqueur

Attention : la dernière option ne doit pas être suivie d'une virgule en fin de ligne.

<!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.389982, 0.688877);
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/image.png', new google.maps.Size(150, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var ombreMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/ombre.png', new google.maps.Size(200, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé,"
					icon: imageMarqueur,
					shadow: ombreMarqueur
				}

				var marqueur = new google.maps.Marker(optionsMarqueur);
			 }
			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

Création d'un marqueur personnalisé, constitué de deux images distinctes :

Une image représentant le marqueur,
Une image représentant l'ombre du 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.390293,0.688834); 
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				} 
				var imageMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/image.png', new google.maps.Size(150, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var ombreMarqueur = new google.maps.MarkerImage('http://static.touraineverte.com/apigooglemapv3/4/ombre.png', new google.maps.Size(200, 120), new google.maps.Point(0,0), new google.maps.Point(28, 120));
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsMarqueur = {
					position: centreCarte,
					map: maCarte,
					title: "Titre de mon marqueur personnalisé",
					icon: imageMarqueur,
					shadow: ombreMarqueur
				} 
				var marqueur = new google.maps.Marker(optionsMarqueur); 
			}
			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

Créer un marqueur personnalisé sur une carte

Google Maps API & Google Web Services