Créer et ajouter un marqueur marker sur une carte Google Maps

Comment ajouter un marqueur marker sur une carte ?

Ce tutoriel est basé sur le code de l'exemple intitulé : Comment créer notre première carte à l'aide de 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);
}

Nous allons compléter ce code afin d'ajouter un marqueur sur la carte. Celui-ci aura les caractéristiques suivantes :

• il sera affiché au centre de la carte nommée maCarte,
• aura pour aspect celui du marqueur par défaut (goutte d'eau rouge inversée),

Carte avec un marqueur marker

Options du marqueur marker dans un objet littéral

Création d'options nommées optionsMarqueur, sous la forme d'un objet littéral, destinées à fixer les paramètres nécessaires à la construction de notre marqueur.

Chaque option s'écrit ainsi :

nom_de_la_propriété: valeur

Notre objet littéral optionsMarqueur ressemblera donc à ceci :

var optionsMarqueur = {
	// on va définir les options ici, les unes après les autres :
	nom_de_la_propriété_X: valeur_X,		// Mettre une virgule en fin de ligne.
	nom_de_la_propriété_Y: valeur_Y,		// Mettre une virgule en fin de ligne.
	nom_de_la_propriété_Z: valeur_Z		// Dernière propriété, ne pas mettre de virgule en fin de ligne.
};

Vous pouvez retrouver l'ensemble des propriétés pouvant s'appliquer à un marqueur en consultant MarkerOptions.

Propriété position du marqueur marker

La propriété position permet de déterminer le point sur lequel notre marqueur va venir s'ancrer sur la carte.

Ici, on va le positionner au centre de la carte. Pour cela on récupère le centre de la carte maCarte en utilisant la méthode getCenter().

var optionsMarqueur = {
	position: maCarte.getCenter()
};

Pour positionner votre marqueur ailleurs qu'au centre de la carte, sur la ville de Saumur par exemple (Latitude: 47.2667 et Longitude: -0.0833), il suffit d'utiliser la classe LatLng :

var optionsMarqueur = {
	position: new google.maps.LatLng(47.2667, -0.0833)
};

ou d'utiliser un objet LatLngLiteral :

var optionsMarqueur = {
	position: {lat: 47.2667, lng: -0.0833}
};

Propriété map du marqueur marker

La propriété map permet de déterminer la carte sur laquelle s'affichera notre marqueur.

Ici, on va placer le marqueur sur la carte nommée maCarte.

var optionsMarqueur = {
	position maCarte.getCenter(),
	map: maCarte
};

Création du marqueur marker

Pour finir, on créé un nouveau marqueur nommé marqueur auquel on applique les options fixées dans optionsMarqueur.

var optionsMarqueur = {
	position: maCarte.getCenter(),
	map: maCarte
};
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({
  	position: maCarte.getCenter(),
  	map: maCarte
  });
  

• Utilisation de la méthode setOptions de la classe Marker

  var optionsMarqueur = {
  	position: maCarte.getCenter(),
  	map: maCarte
  };
  var marqueur = new google.maps.Marker();
  marqueur.setOptions(optionsMarqueur);
  

  ou encore :

  var marqueur = new google.maps.Marker();
  marqueur.setOptions({
  	position: maCarte.getCenter(),
  	map: maCarte
  });
  

• Utilisation des méthodes setMap et setPosition de la classe Marker

  var marqueur = new google.maps.Marker();
  marqueur.setMap( maCarte );
  marqueur.setPosition( maCarte.getCenter() );
  

• Utilisation la méthode set de la classe MVCObject (la classe Marker héritant de la classe MVCObject)

  var marqueur = new google.maps.Marker();
  marqueur.set( "map", maCarte );
  marqueur.set( "position", maCarte.getCenter() );
  

• Utiliser la méthode setValues de la classe MVCObject (la classe Marker héritant de la classe MVCObject)

  var marqueur = new google.maps.Marker();
  marqueur.setValues({
  	"map": maCarte;
  	"position": maCarte.getCenter()
  });
  

  ou encore :

  var optionsMarqueur = {
  	position: maCarte.getCenter(),
  	map: maCarte
  };
  var marqueur = new google.maps.Marker();
  marqueur.setValues(optionsMarqueur);
  

Code JavaScript pour ajouter un marqueur sur une carte Google Maps

Il ne nous reste plus qu'a ajouter le code permettant de créer le marqueur 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 optionsMarqueur = {
		position: maCarte.getCenter(),
		map: maCarte
	};
	var marqueur = new google.maps.Marker(optionsMarqueur);
}

Code pour créer et ajouter un marqueur 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 type="text/css">
			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)
				};
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsMarqueur = {
					position: maCarte.getCenter(),
					map: maCarte
				};
				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>