#PanamaPapers: En finir avec le secret, sanctionnons les banques !

Les Panama Papers ont révélé la façon dont certaines élites utilisent le secret pour cacher leurs activités financières. Ce secret permet à de riches individus de ne pas payer leur part normale d’impôts, mais il permet également à la grande criminalité de se financer, de l’esclavage humain à la vente d’armes illégales en passant par le financement du terrorisme.

Eva Joly - Députée européenne. Rejoignez-nous ! Signez la pétition et partagez-la !

Créer un marqueur déplaçable à l'aide de l'option draggable

Ce tutoriel vous explique comment créer un marqueur déplaçable.
Dans un précédent tutoriel, intitulé comment ajouter un marqueur marker sur une carte, nous avions vu qu'il fallait tout d'abord déclarer les caractéristiques du marqueur (optionsMarqueur) puis créer le marqueur (marqueur) lui-même.

var optionsMarqueur = {
	map: maCarte,
	position: maCarte.getCenter()  /** ou : position: new google.maps.LatLng( 47.389982, 0.688877 ) */
};
var marqueur = new google.maps.Marker(optionsMarqueur);

Pour jouer sur la mobilité d'un marqueur ( déplaçable ou fixe ) il faut paramétrer la propriété draggable d'un objet MarkerOptions, c'est à dire optionsMarqueur ici.
La propriété draggable est un booléen. Elle peut prendre la valeur true ou false.
Par défaut, un marqueur est fixe.
Les deux écritures ci-dessous, sont équivalentes. Elles permettent d'obtenir un marqueur fixe.

var optionsMarqueur = {
	map: maCarte,
	position: maCarte.getCenter(),
	draggable: false
};
var marqueur = new google.maps.Marker(optionsMarqueur);

est équivalent à :

var optionsMarqueur = {
	map: maCarte,
	position: maCarte.getCenter()
};
var marqueur = new google.maps.Marker(optionsMarqueur);

Par contre, pour rendre un marqueur déplaçable ou mobile il faut impérativement indiquer draggable: true :

var optionsMarqueur = {
	map: maCarte,
	position: maCarte.getCenter(),
	draggable: true
};
var marqueur = new google.maps.Marker(optionsMarqueur);

Autre écritures équivalentes :

Intégrer les options directement lors de la création du marker

var marqueur = new google.maps.Marker({
	map: maCarte,
	position: maCarte.getCenter(),
	draggable: true
});

Utiliser la méthode setOptions de la classe Marker

var optionsMarqueur = {
	map: maCarte,
	position: maCarte.getCenter(),
	draggable: true
};
var marqueur = new google.maps.Marker();
	marqueur.setOptions( optionsMarqueur );

Utiliser les méthodes setMap setPosition setDraggable de la classe Marker

var marqueur = new google.maps.Marker();
	marqueur.setMap( maCarte );
	marqueur.setPosition( maCarte.getCenter() );
	marqueur.setDraggable( true );

Utiliser la méthode set de la classe MVCObject (la classe Marker héritant de la classe MVCObject)

var marqueur = new google.maps.Marker();
	marqueur.set( "map", maCarte );
	marqueur.set( "position", maCarte.getCenter() );
	marqueur.set( "draggable", true );

Utiliser la méthode setValues de la classe MVCObject (la classe Marker héritant de la classe MVCObject)

var marqueur = new google.maps.Marker();
	marqueur.setValues({
		"map": maCarte,
		"position": maCarte.getCenter(),
		"draggable": true
	});

Carte : créer un marqueur déplaçable à l'aide de la propriété draggable

Le marqueur positionné sur cette carte est déplaçable.
Cliquez sur le marqueur, maintenez le bouton de votre souris enfoncé, puis déplacez le marqueur sur la carte.

Code : créer un marqueur déplaçable à l'aide de la propriété draggable

<!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: 0;
				padding: 0
			}
			#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 Tours = { lat: 47.389982, lng: 0.688877 };
				var optionsCarte = {
					zoom: 8,
					center: Tours
				}
				var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
				var optionsMarqueur = {
					map: maCarte,
					position: maCarte.getCenter(),
					draggable: true
				}
				var marqueur = new google.maps.Marker( optionsMarqueur );
			 }
		<script async defer  src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCleAPIGoogleMapsIci&callback=initialisation"></script>
		</script>
	</body>
</html>

Afficher ou masquer la croix située à la base d'un marqueur déplaçable avec la propriété crossOnDrag

Pour afficher ou masquer la croix située à la pointe d'un marqueur mobile au cours de son déplacement, il faut paramétrer la propriété crossOnDrag de l'objet MarkerOptions, c'est à dire optionsMarqueur ici.
La propriété crossOnDrag est un booléen. Elle peut prendre la valeur true ou false.
Par défaut, un marqueur en cours de déplacement affiche une croix à l'extrémité de sa pointe : crossOnDrag: true.
Les deux écritures ci-dessous, sont équivalentes. Elles permettent d'obtenir un marqueur déplaçable avec une croix à son extrémité.

var optionsMarqueur = {
	map: maCarte,
	position: maCarte.getCenter(),
	draggable: true,
	crossOnDrag: true
};
var marqueur = new google.maps.Marker(optionsMarqueur);

est équivalent à :

var optionsMarqueur = {
	map: maCarte,
	position: maCarte.getCenter(),
	draggable: true
};
var marqueur = new google.maps.Marker(optionsMarqueur);

Pour masquer cette croix il faut indiquer crossOnDrag: false :

var optionsMarqueur = {
	map: maCarte,
	position: maCarte.getCenter(),
	draggable: true,
	crossOnDrag: false
};
var marqueur = new google.maps.Marker(optionsMarqueur);

Le marqueur positionné sur cette carte est déplaçable.
Cliquez sur le marqueur, maintenez le bouton de votre souris enfoncé, puis déplacez le marqueur sur la carte.
Lors du déplacement du marqueur, plus aucune croix ne s'affiche à son extrémité.

Paramétrer un marqueur pour qu'il soit fixe ou mobile avec draggable

Marqueur Marker exemples et tutoriels en Français

API Google Maps JavaScript version 3