mercredi 18 mai 2016 19:05

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

Marqueur Marker exemples et tutoriels en Français

API Google Maps JavaScript version 3

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

Ce tutoriel est basé sur le code de l'exemple intitulé : Comment créer et afficher un marqueur marker sur carte Google Maps ?.

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

Apparence et caractéristiques de l'image du marqueur personnalisé

Caractéristiques du marqueur personnalisé

Le marqueur personnalisé sera :

  • ancré au centre de la carte : centreCarte,
  • affiché sur la carte nommée : maCarte.
Attention :
Depuis la version 3.14 de l'API Google Maps l'ombre du marqueur a été purement et simplement supprimée.

Carte avec un marqueur marker personnalisé

Paramètres de l'image du marqueur

Création d'un objet littéral imageMarqueur de type Icon pour définir les caractéristiques de l'image, représentant le marqueur, à l'aide des propriétés suivantes :

  • url : URL de l'image représentant le marqueur {string},
  • size : Dimension de l'image {Size},
  • anchor : Point d'ancrage de l'image sur la carte {Point},
var imageMarqueur = {
	url: "http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png",
	size: new google.maps.Size(150, 120),
	anchor: new google.maps.Point(28, 120)
};

Création du marqueur marker personnalisé

Il ne reste plus qu'à associer notre objet littéral imageMarqueur à la propriété icon de l'objet littéral optionsMarqueur, de type MarkerOptions, de notre marqueur lors de sa création.

var imageMarqueur = {
	url: "http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png",
	size: new google.maps.Size(150, 120),
	anchor: new google.maps.Point(28, 120)
};
var optionsMarqueur = {
	map: maCarte,
	position: centreCarte,
	icon: imageMarqueur
}
var marqueur = new google.maps.Marker(optionsMarqueur);

Autre écritures équivalentes :

  • Intégrer les options directement lors de la création du marker 
    var marqueur = new google.maps.Marker({
	map: maCarte,
	position: centreCarte,
	icon: {
		url: http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png,
		size: new google.maps.Size(150, 120),
		anchor: new google.maps.Point(28, 120)
	}
});
  • Utiliser la méthode setOptions de la classe Marker 
    var optionsMarqueur = {
	map: maCarte,
	position: centreCarte,
	icon: {
		url: http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png,
		size: new google.maps.Size(150, 120),
		anchor: new google.maps.Point(28, 120)
	}
};
var marqueur = new google.maps.Marker();
marqueur.setOptions(optionsMarqueur);
    ou encore : 
    var marqueur = new google.maps.Marker();
marqueur.setOptions({
	map: maCarte,
	position: centreCarte,
	icon: {
		url: http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png,
		size: new google.maps.Size(150, 120),
		anchor: new google.maps.Point(28, 120)
	}
});
  • Utiliser les méthodes setMap, setPosition, setIcon de la classe Marker 
    var imageMarqueur = {
	url: http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png,
	size: new google.maps.Size(150, 120),
	anchor: new google.maps.Point(28, 120)
};

var marqueur = new google.maps.Marker();
marqueur.setMap( maCarte ),
marqueur.setPosition( centreCarte );
marqueur.setIcon( imageMarqueur );
    ou encore : 
    var marqueur = new google.maps.Marker();
marqueur.setMap( maCarte ),
marqueur.setPosition( centreCarte );
marqueur.setIcon({
	url: http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png,
	size: new google.maps.Size(150, 120),
	anchor: new google.maps.Point(28, 120)
});
  • Utiliser la méthode set de la classe MVCObject (la classe Marker héritant de la classe MVCObject) 
    var imageMarqueur = {
	url: http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png,
	size: new google.maps.Size(150, 120),
	anchor: new google.maps.Point(28, 120)
};

var marqueur = new google.maps.Marker();
marqueur.set( "map", maCarte ),
marqueur.set( "position", centreCarte );
marqueur.set( "icon", imageMarqueur );
    ou encore : 
    var marqueur = new google.maps.Marker();
marqueur.set( "map", maCarte ),
marqueur.set( "position", centreCarte );
marqueur.set( "icon", {
	url: http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png,
	size: new google.maps.Size(150, 120),
	anchor: new google.maps.Point(28, 120)
});
  • Utiliser la méthode setValues de la classe MVCObject (la classe Marker héritant de la classe MVCObject) 
    var imageMarqueur = {
	url: http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png,
	size: new google.maps.Size(150, 120),
	anchor: new google.maps.Point(28, 120)
};

var marqueur = new google.maps.Marker();
marqueur.setValues({
	"map": maCarte,
	"position": centreCarte,
	"icon": imageMarqueur
});
    ou encore : 
    var marqueur = new google.maps.Marker();
marqueur.setValues({
	"map": maCarte,
	"position": centreCarte,
	"icon": {
		url: http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png,
		size: new google.maps.Size(150, 120),
		anchor: new google.maps.Point(28, 120)
	}
});

Code JavaScript pour afficher un marqueur personnalisé sur une carte Google Maps

Il ne nous reste plus qu'a ajouter le code permettant de créer le marqueur personnalisé au code de la carte maCarte.

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 imageMarqueur = {
		url: http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png,
		size: new google.maps.Size(150, 120),
		anchor: new google.maps.Point(28, 120)
	};
	var optionsMarqueur = {
		position: maCarte.getCenter(),
		map: maCarte,
		icon: imageMarqueur
	}
	var marqueur = new google.maps.Marker(optionsMarqueur);
}

Code final pour créer un marqueur marker personnalisé

Retrouvez ci-dessous le code complet afin de créer et ajouter un marqueur personnalisé sur une carte Google Maps.

<!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: 8,
					center: new google.maps.LatLng(47.389982, 0.688877),
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var imageMarqueur = {
					url: http://static.www.touraineverte.fr/googlemapsapiversion3/4/image.png,
					size: new google.maps.Size(150, 120),
					anchor: new google.maps.Point(28, 120)
				};
				var optionsMarqueur = {
					position: maCarte.getCenter(),
					map: maCarte,
					icon: imageMarqueur
				}
				var marqueur = new google.maps.Marker(optionsMarqueur);
			 }
		</script>
		<script async defer  src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCleAPIGoogleMapsIci&callback=initialisation"></script>
		</body>
</html>