Dessiner un cercle ou un rond sur une carte Google Maps

Ajouter un cercle sur une carte Google Maps

Ce tutoriel est basé sur le code de l'exemple intitulé : Comment créer une carte à l'aide de l'API Google Maps Version 3.

Nous allons maintenant compléter ce code afin d'ajouter un cercle sur la carte Google Maps, centré sur la ville de Tours et dont le rayon mesure 500 mètres.

La classe nommée Circle permet de dessiner un cercle sur une carte Google Maps de façon extrêmement simple !

Pour tracer notre cercle, nous avons besoin de déclarer 3 propriétés par défaut :

• le centre du cercle,
• le rayon du cercle,
• le nom de la carte sur laquelle afficher le cercle.

Par défaut, le pourtour du cercle est noir et l'intérieur gris, semi-transparent.

Affichage d'un cercle sur une carte Google Maps

Les propriétés pour créer un cercle sur une carte Google Maps

Les 3 propriétés nécessaires à la construction du cercle (centre, rayon, carte) sont regroupées dans un objet littéral que nous nommerons optionsCercle.

Un objet littéral se code ainsi :

var optionsCercle = {
	... blablabla ...
};

A l'intérieur des accolades { } on remplace ... blablabla ... par une ou plusieurs propriétés. Chaque propriété s'écrit ainsi :

nom_de_la_propriété: valeur_de_la_propriété

Attention :

S'il n'y a qu'une seule propriété : il ne faut pas mettre de virgule en fin de ligne :

var optionsCercle = {
	nom_de_la_propriété: valeur_de_la_propriété	// Pas de virgule en fin de ligne
};

S'il y a plusieurs propriétés : chaque propriété à l'intérieur de l'objet littéral doit comporter une virgule en fin de ligne, exceptée la dernière propriété :

var optionsCercle = {
	nom_de_la_propriété_une: valeur_de_la_propriété_une,		// Mettre une virgule en fin de ligne
	nom_de_la_propriété_deux: valeur_de_la_propriété_deux,	// Mettre une virgule en fin de ligne
	nom_de_la_propriété_trois: valeur_de_la_propriété_trois	// Ne pas mettre de virgule en fin de ligne
};

map : propriété définissant la carte sur laquelle afficher le cercle

La propriété map: permet d'indiquer la carte sur laquelle s'affichera notre cercle.

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

var optionsCercle = {
	map: maCarte
};

center : propriété définissant le centre du cercle

La propriété center: permet de déterminer le point sur lequel notre cercle va venir se centrer.

Ici, on va positionner cercle au centre de la carte : maCarte.getCenter().

var optionsCercle = {
	map: maCarte,
	center: maCarte.getCenter()
};

Si vous souhaitez centrer le cercle sur un point particulier il suffit d'utiliser la classe LatLng :

var optionsCercle = {
	map: maCarte,
	center: new google.maps.LatLng( 47.647891, 2.369852)
};

autre écriture possible en utilisant un objet LatLngLiteral :

var optionsCercle = {
	map: maCarte,
	center: {lat: 47.647891, lng: 2.369852}
};

radius : propriété définissant le rayon du cercle

La propriété radius: permet de paramétrer le rayon du cercle, en mètres.

Ici, on souhaite afficher un cercle de 500 mètres de rayon.

var optionsCercle = {
	map: maCarte,
	center: maCarte.getCenter(),
	radius: 500
};

Création du cercle sur la carte Google Maps

Enfin, à l'aide de la classe Circle, il ne reste plus qu'à créer un nouveau cercle, nommé monCercle, auquel on applique les propriétés définies dans l'objet littéral nommé optionsCercle.

var optionsCercle = {
	map: maCarte,
	center: maCarte.getCenter(),
	radius: 500
};
var monCercle = new google.maps.Circle(optionsCercle);

Autre écriture possible en utilisant les méthodes de la classe Circle :

var monCercle = new google.maps.Circle();
	monCercle.setMap( maCarte );
	monCercle.setCenter( maCarte.getCenter() );
	monCercle.setRadius( 500 );

Autre écriture possible, la classe Circle héritant de la classe MVCObject :

var monCercle = new google.maps.Circle();
	monCercle.set( "map", maCarte );
	monCercle.set( "center", maCarte.getCenter() );
	monCercle.set( "radius", 500 );

ou encore avec la méthode setValues de la classe MVCObject :

var optionsCercle = {
	map: maCarte,
	center: maCarte.getCenter(),
	radius: 500
};

var monCercle = new google.maps.Circle();
	monCercle.setValues( optionsCercle );

La programmation de notre cercle est terminée. Il ne reste plus qu'à l'intégrer dans le code global de la carte Google Maps.

Code pour afficher un cercle sur une carte Google Maps

Ce code permet d'afficher un cercle sur une carte Google Maps. Ce cercle :

• est rattaché à la carte nommée maCarte,
• est centré sur la ville de Tours,
• a pour rayon de 500 mètres,
• a pour couleur, épaisseur et transparence les paramètres par défaut.

<!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{
				margin:0px;
				padding:0px
				height:100%;
			}
			#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: 15,
					center: {lat: 47.389982, lng: 0.688877},
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsCercle = {
					map: maCarte,
					center: maCarte.getCenter(),
					radius: 500
				}
				var monCercle = new google.maps.Circle(optionsCercle);
			}
		</script>
		<script async defer src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>