Comment créer un cercle déplaçable à l'aide d'un marqueur ?

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

Caractéristiques du marqueur :

d'aspect identique au marqueur par défaut.
il doit être déplaçable,
ancré initialement sur le centre de la carte,

Caractéristiques du cercle :

d'aspect identique au cercle par défaut,
rayon égal à 500 mètres,
son centre est lié le point d'ancrage du marqueur.

Les classes Circle et Marker héritent toutes les deux de la classe MVCObject. Cet héritage va nous permettre de lier la position du marqueur au centre du cercle, très facilement, grâce à la méthode bindTo. Ainsi, nous allons lier :

la propriété center du cercle
à la propriété position du marqueur,

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éplacer le cercle.

Carte avec un cercle déplaçable à l'aide d'un marqueur situé en son centre

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 modifier 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 :

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

var optionsCercle = {
	map: maCarte,
	radius: 500
};

Attention : la dernière propriété ne doit pas comporter de virgule en fin de ligne.

les options du marqueur

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

var optionsMarqueur = {
	... blablabla ...
}

draggable : propriété qui autorise ou non le déplacement du marqueur

La propriété draggable: permet de paramétrer le marqueur pour qu'il soit fixe ou mobile (déplaçable).
Elle a pour valeur true pour un marqueur déplaçable, ou false pour un marqueur fixe.

Ici, le marqueur doit être déplaçable.

var optionsMarqueur = {
	draggable: true
}

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

La propriété map: permet de paramétrer la carte sur laquelle afficher le marqueur.

Ici, le marqueur doit s'afficher sur la carte nommée maCarte.

var optionsMarqueur = {
	draggable: true,
	map: maCarte
}

position : propriété définissant l'emplacement du marquer sur la carte

La propriété position: permet de déterminer l'emplacement sur lequel le marqueur vient s'ancrer sur la carte.

Ici, le marqueur est positionné au centre de la carte maCarte.getCenter().

var optionsMarqueur = {
	draggable: true,
	map: maCarte,
	position: maCarte.getCenter()
}

title : propriété définissant le titre du marqueur

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

On souhaite que le texte affiché soit : "Déplacez moi pour déplacer le cercle".

var optionsMarqueur = {
	draggable: true,
	map: maCarte,
	position: maCarte.getCenter(),
	title: "Déplacez moi pour déplacer le cercle"
}

Attention : la dernière propriété ne doit pas comporter de virgule en fin de ligne.

Création du marqueur

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

var optionsMarqueur = {
	draggable: true,
	map: maCarte,
	position: maCarte.getCenter(),
	title: "Déplacez moi pour déplacer le cercle"
}
var monMarqueur = new google.maps.Marker( optionsMarqueur );

Lier la position du marqueur au centre du cercle

Il ne nous reste plus qu'à lier entre eux :

le point d'ancrage ("position") du marqueur nommé monMarqueur
le centre ("center") du cercle nommé monCercle,

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

monCercle.bindTo( "center", monMarqueur, "position" );

Au final, on obtient :

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

var optionsMarqueur = {
	draggable: true,
	map: maCarte,
	position: maCarte.getCenter(),
	title: "Déplacez moi pour déplacer le cercle"
}
var monMarqueur = new google.maps.Marker( optionsMarqueur );

monCercle.bindTo( "center", monMarqueur, "position" );

Code pour déplacer un cercle avec un marqueur

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,

On obtient ainsi un cercle mobile, qui peut être déplacé en cliquant et en faissant glisser 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>
			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 optionsCarte = {
					zoom: 15,
					center: {lat: 47.389982, lng: 0.688877}
				}
				var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
				
				var optionsCercle = {
					map: maCarte,
					radius: 500
				}
				var monCercle = new google.maps.Circle( optionsCercle );
				
				var optionsMarqueur = {
					draggable: true,
					map: maCarte,
					position: maCarte.getCenter(),
					title: "Déplacez moi pour déplacer le cercle"
				}
				var monMarqueur = new google.maps.Marker( optionsMarqueur );
				
				monCercle.bindTo( "center", monMarqueur, "position" );
			}
		</script>
		<script async defer src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>

Déplacer un cercle à l'aide d'un marqueur central

Polygone Polygon exemples et tutoriels en Français

API Google Maps JavaScript version 3