Logo TouraineVerte

API Google Maps JavaScript version 3

Modifier les couleurs d'un cercle sur une carte Google

Google Maps API & Google Web Services

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

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

Tutoriel publié le Mis à jour le
Tutoriel en Français

Modifier les couleurs d'un cercle sur une carte

Ce tutoriel est basé sur le code de l'exemple intitulé :

Comment dessiner un cercle ou un rond sur une carte Google.

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 avec un cercle aux couleurs personnalisées

Propriété fillColor : 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",

<!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:0px; padding:0px}
			#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: 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"
					.....
				}
				var monCercle = new google.maps.Circle(optionsCercle);
			}
			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é fillOpacity : 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,

<!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:0px; padding:0px}
			#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: 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
					.....
				}
				var monCercle = new google.maps.Circle(optionsCercle);
			}
			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é strokeColor : 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",

<!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:0px; padding:0px}
			#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: 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"
					.....
				}
				var monCercle = new google.maps.Circle(optionsCercle);
			}
			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é strokeOpacity : 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,

<!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:0px; padding:0px}
			#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: 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
					.....
				}
				var monCercle = new google.maps.Circle(optionsCercle);
			}
			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é strokeWeight : épaisseur du trait 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

Attention :

  • la dernière propriété contenue dans optionsCercle ne doit pas être suivie d'une virgule en fin de ligne.

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

<!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:0px; padding:0px}
			#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: 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);
			}
			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

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 de 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 type="text/css">
			html{height:100%}
			body{height:100%; margin:0px; padding:0px}
			#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: 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);
			}
			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>