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

Bouger un cercle à l'aide d'un marqueur

Tutoriel publié le 04 Décembre 2010

Comment créer un cercle déplaçable ?

Dans ce tuto nous allons créer un cercle déplaçable à l'aide d'un marqueur situé en son centre.

Pour cela nous devons créer 3 objets :

Une carte :
- centrée sur la ville de Tours,
- de type plan,
- niveau de zoom : 15,
Un marqueur :
- d'aspect identique au marqueur par défaut.
- il doit être déplaçable,
- ancré initialement sur le centre de la carte,
Un cercle :
- d'aspect identique au cercle par défaut,
- rayon égal à 500 mètres,
- son centre est calé sur le point d'ancrage du marqueur.

Les classes google.maps.Circle et google.maps.Marker étendent toutes les deux la classe google.maps.MVCObject.

Ceci va nous permettre de lier facilement

la propriété center de google.maps.CircleOptions
à la propriété position de google.maps.MarkerOptions,

à l'aide de la méthode bindTo de google.maps.MVCObject.

Le marqueur étant déplaçable, et le centre du cercle lié au point d'ancrage du marqueur sur la carte, tout mouvement du marqueur va déclencher le déplacement du cercle.

Schéma : 3 objets : carte, marqueur, cercle

Carte avec un cercle déplaçable à l'aide d'un marqueur

Les options du cercle

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

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

Nous allons maintenant compléter ce code afin de créer un marqueur déplaçable et lier le centre du cercle à son point d'ancrage.

Remarque :

la propriété center de l'objet littéral optionsCercle a été supprimée du code de base.

optionsCercle ne comporte plus désormais que deux propriétés :

Le nom de la carte sur laquelle on souhaite afficher le cercle :
- map: maCarte,
Le rayon cercle (500 mètres) :
- radius: 500

Attention :

la dernière option 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: 15,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsCercle = {
					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>

les options du marqueurs

Maintenant, on va paramétrer les options nécessaires à la construction de notre marqueur, sous la forme d'un objet littéral nommé optionsMarqueurCentreCercle.

var optionsMarqueurCentreCercle = {

... blablabla ...

}

<!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 = {
					map: maCarte,
					radius: 500
				}
				var monCercle = new google.maps.Circle(optionsCercle);
				var optionsMarqueurCentreCercle = {
					.....
				}
			}
			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é draggable : autorise le déplacement du marqueur

La propriété draggable: permet de créer ou non un marqueur déplaçable.

Ici, on veut que le marqueur soit déplaçable.

draggable: true,

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<style type="text/css">
			html{height:100%}
			body{height:100%; margin:0px; padding:0px}
			#EmplacementDeMaCarte{height:100%}
		</style>
		<title>Titre de votre page</title>
		<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 = {
					map: maCarte,
					radius: 500
				}
				var monCercle = new google.maps.Circle(optionsCercle);
				var optionsMarqueurCentreCercle = {
					draggable: true
					.....
				}
			}
			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é map

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.

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: 15,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsCercle = {
					map: maCarte,
					radius: 500
				}
				var monCercle = new google.maps.Circle(optionsCercle);
				var optionsMarqueurCentreCercle = {
					draggable: true,
					map: maCarte
						.....
				}
			}
			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é position

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

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().

position: 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: 15,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsCercle = {
					map: maCarte,
					radius: 500
				}
				var monCercle = new google.maps.Circle(optionsCercle);
				var optionsMarqueurCentreCercle = {
					draggable: true,
					map: maCarte,
					position: centreCarte
					.....
				}
			}
			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é title

La propriété title: permet d'indiquer le texte à afficher lorsque le marqueur sera survolé par le curseur de la souris.

Le texte à afficher sera :

"Déplacez moi pour déplacer le cercle".

Google Maps API V3 - Option Marker : Propriété title

title: "Déplacez moi pour déplacer le cercle"

Attention :

la dernière option 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: 15,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsCercle = {
					map: maCarte,
					radius: 500
				}
				var monCercle = new google.maps.Circle(optionsCercle);
				var optionsMarqueurCentreCercle = {
					draggable: true,
					map: maCarte,
					position: centreCarte,
					title: "Déplacez moi pour déplacer le cercle"
				}
			}
			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>

Création du marqueur

Ensuite, on créé un nouveau marqueur nommé marqueurCentreCercle auquel on applique les options fixées dans optionsMarqueurCentreCercle.

<!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 = {
					map: maCarte,
					radius: 500
				}
				var monCercle = new google.maps.Circle(optionsCercle);
				var optionsMarqueurCentreCercle = {
					draggable: true,
					map: maCarte,
					position: centreCarte,
					title: "Déplacez moi pour déplacer le cercle"
				}
				var marqueurCentreCercle = new google.maps.Marker(optionsMarqueurCentreCercle);
			}
			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>

Liaison marqueur cercle

Il ne nous reste plus qu'à :

lier le point d'ancrage ('position') de notre marqueur nommé marqueurCentreCercle

avec

le centre ('center') du cercle nommé monCercle,

à l'aide de la méthode bindTo de google.maps.MVCObject :

monCercle.bindTo('center', marqueurCentreCercle, 'position');

<!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 = {
					map: maCarte,
					radius: 500
				}
				var monCercle = new google.maps.Circle(optionsCercle);
				var optionsMarqueurCentreCercle = {
					draggable: true,
					map: maCarte,
					position: centreCarte,
					title: "Déplacez moi pour déplacer le cercle"
				}
				var marqueurCentreCercle = new google.maps.Marker(optionsMarqueurCentreCercle);
				monCercle.bindTo('center', marqueurCentreCercle, 'position');
			}
			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

Ce tutoriel vous permet :

d'afficher d'un marqueur déplaçable, situé par défaut, au centre de la carte,
de créer un cercle de 500 mètres de rayon, dont le centre est lié au point d'ancrage du marqueur,

Ainsi, on obtient un cercle mobile, qui peut être bougé en cliquant et déplacant le marqueur situé en son centre.

<!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 = {
					map: maCarte,
					radius: 500
				}
				var monCercle = new google.maps.Circle(optionsCercle);
				var optionsMarqueurCentreCercle = {
					draggable: true,
					map: maCarte,
					position: centreCarte,
					title: "Déplacez moi pour déplacer le cercle"
				}
				var marqueurCentreCercle = new google.maps.Marker(optionsMarqueurCentreCercle);
				monCercle.bindTo('center', marqueurCentreCercle, 'position');
			}
			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>

API Google Maps JavaScript version 3

Déplacer un cercle ou un rond sur une carte Google

Google Maps API & Google Web Services