#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 !

Comment centrer une carte sur le marqueur cliqué à l'aide de la méthode setCenter()

Ce tutoriel vous explique comment centrer une carte sur le marqueur cliqué.
Dans la fonction creerMarqueur() on ajoute un observateur d'événement au marqueur.
L'événement observé est le click.
Dès qu'un événement click est détecté, un objet evenement, contenant diverses informations sur le marqueur cliqué, est transmis à la fonction chargée du traitement :

google.maps.event.addListener( marqueur, "click", function( evenement ){
	...
});

Enfin, la fonction chargée du traitement de l'événement click va :

extraire les coordonnées du marqueur cliqué, à partir de l'objet evenement :
```
evenement.latLng
```
puis les injecter dans la propriété center de la carte nommée maCarte grace à la méthode setCenter :
```
maCarte.setCenter( evenement.latLng );
```

Au final on obtient donc le code suivant :

google.maps.event.addListener( marqueur, "click", function( evenement ){
	maCarte.setCenter( evenement.latLng );
});

Le centrage de la carte vers la position du marqueur est instantannée et sans glissement.

Carte pour centrer la carte sur le marqueur cliqué à l'aide de setCenter()

Lorsque vous cliquez sur un marqueur, la carte se centre sur celui-ci directement et sans animation.

Code pour centrer la carte sur le marqueur cliqué à l'aide de setCenter()

Dans cet exemple les coordonnées des marqueurs sont placées dans un tableau de tableaux. L'itération est réalisée avec for().

<!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 tableauMarqueurs = [
					[47.325371, 1.044195], 
					[47.345627, 0.894806], 
					[47.334488, 0.944717], 
					[47.331615, 1.129307], 
					[47.270981, 1.375158], 
					[47.290585, 1.346169], 
					[47.330112, 0.995293], 
					[47.339272, 1.175795], 
					[47.307144, 1.318617], 
					[47.328671, 1.288072], 
					[47.344994, 1.212090], 
					[47.357315, 0.831850], 
					[47.342327, 1.245060]
				];
				
				var zoneMarqueurs = new google.maps.LatLngBounds();
				
				var optionsCarte = {
					zoom: 8,
					center: { lat: 47.389982, lng: 0.688877 }
				}
				maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				
				for( var i = 0, I = tableauMarqueurs.length; i < I; i++ ) {
					var latlng = tableauMarqueurs[i],
						latitude = latlng[0],
						longitude = latlng[1];
					var optionsMarqueur = {
						map: maCarte,
						position: new google.maps.LatLng( latitude, longitude )
					}
					var marqueur = new google.maps.Marker( optionsMarqueur );
					google.maps.event.addListener( marqueur, "click", function( evenement ){
						maCarte.setCenter( evenement.latLng );
					});
					zoneMarqueurs.extend( marqueur.getPosition() );
				}
				
				maCarte.fitBounds(zoneMarqueurs);
			}
		</script>
		<script async defer  src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCleAPIGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>

Comment centrer la carte sur le marqueur cliqué en la faisant glisser à l'aide de la méthode panTo()

Cet exemple vous explique comment centrer une carte sur le marqueur cliqué en la faisant glisser vers celui-ci.
Il reprend l'exemple précédent, en modifiant simplement le contenu de l'observateur d'événement.
Pour obtenir l'effet désiré, il suffit de remplacer la méthode setCenter() par la méthode panTo().
panTo() va permettre de déplacer, par glissement, le centre de la carte vers le marqueur cliqué.

google.maps.event.addListener( marqueur, "click", function( evenement ){
	maCarte.panTo( evenement.latLng );
});

Carte ou le marqueur cliqué en la faisant glisser à l'aide de panTo()

Lorsque vous cliquez sur un marqueur, la carte se centre sur celui-ci en glissant rapidement.

Code pour centrer la carte sur le marqueur cliqué en la faisant glisser à l'aide de panTo()

Dans cet exemple les coordonnées des marqueurs sont placées dans un tableau d'objet littéraux. L'itération est réalisée avec forEach().

<!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 tableauMarqueurs = [
					{lat:47.325371, lng:1.044195},
					{lat:47.345627, lng:0.894806},
					{lat:47.334488, lng:0.944717},
					{lat:47.331615, lng:1.129307},
					{lat:47.270981, lng:1.375158},
					{lat:47.290585, lng:1.346169},
					{lat:47.330112, lng:0.995293},
					{lat:47.339272, lng:1.175795},
					{lat:47.307144, lng:1.318617},
					{lat:47.328671, lng:1.288072},
					{lat:47.344994, lng:1.212090},
					{lat:47.357315, lng:0.831850},
					{lat:47.342327,lng: 1.245060}
				];

				var zoneMarqueurs = new google.maps.LatLngBounds();
			
				var optionsCarte = {
					zoom: 8,
					center: {lat: 47.389982, lng: 0.688877}
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				
				tableauMarqueurs.forEach( function(latlng) {
					var latitude = latlng.lat,
						longitude = latlng.lng;
					var optionsMarqueur = {
						map: maCarte,
						position: new google.maps.LatLng( latitude, longitude )
					}
					var marqueur = new google.maps.Marker( optionsMarqueur );
					google.maps.event.addListener( marqueur, "click", function( evenement ){
						maCarte.panTo( evenement.latLng );
					});
					zoneMarqueurs.extend( marqueur.getPosition() );
				});
				
				maCarte.fitBounds( zoneMarqueurs );
			}
		</script>
		<script async defer  src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCleAPIGoogleMapsIci&callback=initialisation"></script>
		</body>
</html>

Centrer la carte sur le marqueur cliqué à l'aide de setCenter() ou panTo()

Marqueur Marker exemples et tutoriels en Français

API Google Maps JavaScript version 3