Logo TouraineVerte

API Google Maps JavaScript version 3

Afficher un cercle ou un rond sur une carte

Google Maps API & Google Web Services

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

Dessiner un cercle ou un rond sur une carte

Tutoriel publié le Mis à jour le

Afficher un cercle sur une carte

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 sur la carte, un cercle centré sur la ville de Tours et dont le rayon mesure 500 mètres.

Dans la version 3 de l'API, une classe nommée Circle a été intégrée à l'API. Son utilisation est redoutablement simple !

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

  • 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.

Carte avec Polyline

Afficher un cercle sur une carte

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 des propriétés. Chaque propriété s'écrit ainsi :

nom_de_la_propriété: valeur

Attention :

  • S'il y a qu'une seule propriété : il ne faut pas mettre de virgule après valeur :

    var optionsCercle = {
       nom_de_la_propriété: valeur    // Pas de virgule en fin de ligne
    }
  • S'il y a plusieurs propriétés : il faut mettre une virgule après chaque valeur, excepté pour la dernière :

    var optionsCercle = {
       nom_de_la_propriété: valeur,    // Mettre une virgule en fin de ligne
       nom_de_la_propriété: valeur,    // Mettre une virgule en fin de ligne
       nom_de_la_propriété: valeur    // Pas de virgule en fin de ligne
    }
<!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: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsCercle = {
					.....
				}
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte" style="width:100%; height:400px"></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é center

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

Ici, on va le positionner au centre de la carte, c'est à dire sur centreCarte, paramétré au tout début de la fonction initialisation().

center: centreCarte,

<!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: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var optionsCercle = {
					center: centreCarte
					.....
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte" style="width:100%; height:400px"></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é map

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.

map: maCarte,

<!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: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsCercle = {
					center: centreCarte,
					map: maCarte
					.....
				}
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte" style="width:100%; height:400px"></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é radius

La propriété radius: permet d'indiquer le rayon du cercle à la surface de la Terre en mètres.

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

radius: 500

Attention :

  • la dernière propriété contenue dans optionsCercle ne doit pas être suivie d'une virgule en fin de ligne.
<!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: 8,
					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
					.....
				}
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte" style="width:100%; height:400px"></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>

Création du cercle

Enfin, création d'un nouveau cercle, nommé monCercle, auquel on applique les options fixées dans optionsCercle.

La programmation de notre cercle est terminée.

<!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: 8,
					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
				}
				var monCercle = new google.maps.Circle(optionsCercle);
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte" style="width:100%; height:400px"></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

Création d'un cercle :

  • rattaché à la carte nommée maCarte,
  • centré sur la ville de Tours,
  • rayon de 500 mètres,
  • couleur, épaisseur et transparence du cercle et de sa circonférence : 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 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
				}
				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>