Personnaliser les couleurs d'un cercle ou d'un rond sur une carte

Polygone Polygon exemples et tutoriels en Français

API Google Maps JavaScript version 3

Partager ce tutoriel sur les réseaux sociaux
Signaler une erreur dans cet article

Modifier les couleurs d'un cercle sur une carte Google Maps

Ce tutoriel est basé sur le code de l'exemple intitulé : Comment dessiner un cercle ou un rond sur une carte Google.

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);

Nous allons maintenant compléter ce code afin de modifier et personnaliser les couleurs du cercle à l'aide des propriétés CircleOptions.

Ces propriétés vont nous permettre de modifier :

  • la couleur du cercle,
  • l'opacité du cercle,
  • la couleur de la circonférence du cercle,
  • l'opacité de la circonférence du cercle,
  • l'épaisseur de la circonférence du cercle.
Modifier les couleurs du cercle

Ces 5 propriétés sont ajoutées à l'objet littéral nommé optionsCercle créé lors du paramétrage du cercle.

Carte Google Maps avec un cercle aux couleurs personnalisées

fillColor : propriété définissant la couleur interne du cercle

La propriété fillColor: permet de modifier la couleur du cercle.

Ici, on va colorer l'intérieur du cercle en rouge.

fillColor: "#FF0000"
var optionsCercle = {
	center: centreCarte,
	map: maCarte,
	radius: 500,
	fillColor: "#FF0000"		// Couleur du cercle - Rouge : "#FF0000"
}
var monCercle = new google.maps.Circle(optionsCercle);

fillOpacity : propriété définissant l'opacité de la couleur interne du cercle

La propriété fillOpacity: permet de modifier l'opacité de la couleur du cercle. Valeur de 0.0 à 1.0.

Ici, on veut un cercle semi-transparent.

fillOpacity: .5
var optionsCercle = {
	center: centreCarte,
	map: maCarte,
	radius: 500,
	fillColor: "#FF0000",
	fillOpacity: .5		// Opacité du cercle - semi-transparent : 0.5. Valeur allant de 0.0 à 1.0
}
var monCercle = new google.maps.Circle(optionsCercle);

strokeColor : propriété définissant la couleur de la circonférence du cercle

La propriété strokeColor: permet de modifier la couleur de la circonférence du cercle.

Ici, on veut que la circonférence du cercle soit bleue.

strokeColor: "#0000FF"
var optionsCercle = {
	center: centreCarte,
	map: maCarte,
	radius: 500,
	fillColor: "#FF0000",
	fillOpacity: .5,
	strokeColor: "#0000FF"	// Couleur de la circonférence du cercle - Bleu : "#0000FF"
}
var monCercle = new google.maps.Circle(optionsCercle);

strokeOpacity : propriété définissant l'opacité de la circonférence du cercle

La propriété strokeOpacity: permet de modifier l'opacité de la couleur de la circonférence du cercle. Valeur de 0.0 à 1.0.

Ici, on veut que la circonférence du cercle soit totalement opaque.

strokeOpacity: 1.0
var optionsCercle = {
	center: centreCarte,
	map: maCarte,
	radius: 500,
	fillColor: "#FF0000",
	fillOpacity: .5,
	strokeColor: "#0000FF",
	strokeOpacity: 1.0		// Opacité de la circonférence du cercle - totalement opaque : 1.0. Valeur allant de 0.0 à 1.0
}
var monCercle = new google.maps.Circle(optionsCercle);

strokeWeight : propriété définissant l'épaisseur de la circonférence du cercle

La propriété strokeWeight: permet de modifier l'épaisseur de la circonférence. Valeur en pixel.

Ici, on veut que l'épaisseur de la circonférence fasse 4 pixels.

strokeWeight: 4

Le paramétrage des nouvelles couleurs de notre cercle est terminé.

var optionsCercle = {
	center: centreCarte,
	map: maCarte,
	radius: 500,
	fillColor: "#FF0000",
	fillOpacity: .5,
	strokeColor: "#0000FF",
	strokeOpacity: 1.0,
	strokeWeight: 4		// Epaisseur, en pixel, de la circonférence du cercle : 4 pixels
}
var monCercle = new google.maps.Circle(optionsCercle);
Attention :
la dernière propriété contenue dans optionsCercle ne doit pas être suivie d'une virgule en fin de ligne.

Code pour modifier les couleurs d'un cercle

Nous venons de créer un cercle aux couleurs personnalisées :

  • Couleur du cercle : Rouge,
  • Opacité du cercle : Semi-transparent,

  • Couleur de la circonférence du cercle : Bleu,
  • Opacité de la circonférence du cercle : Totalement opaque,
  • Épaisseur du trait représentant la circonférence du cercle : 4 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>
			html, body{height:100%; margin:0px; padding:0px}
			#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 centreCarte = new google.maps.LatLng( 47.389982, 0.688877 );
				var optionsCarte = {
					zoom: 15,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
				var optionsCercle = {
					center: centreCarte,
					map: maCarte,
					radius: 500,
					fillColor: "#FF0000",		// Couleur du cercle - Rouge : "#FF0000"
					fillOpacity:  .5, 					// Opacité du cercle - semi-transparent : 0.5. Valeur allant de 0.0 à 1.0
					strokeColor: "#0000FF",	// Couleur de la circonférence du cercle - Bleu : "#0000FF"
					strokeOpacity: 1.0,					// Opacité de la circonférence du cercle - totalement opaque : 1.0. Valeur allant de 0.0 à 1.0
					strokeWeight: 4						// Epaisseur, en pixel, de la circonférence du cercle : 4 pixels
				}
				var monCercle = new google.maps.Circle( optionsCercle );
			}
		</script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>