Comment créer une barre d'outils à dessin avec DrawingManager

Bibliothèque Drawing exemples et tutoriels en Français

Cartographie et webmapping

Partager ce tutoriel sur les réseaux sociaux
Signaler une erreur dans cet article

Insérer une barre d'outils à dessin dans une carte Google Maps

Ce tutoriel est basé sur le code de l'exemple intitulé : Comment créer notre première carte à l'aide de l'API Google Maps Version 3 ?.

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: { lat: 47.389982, lng: 0.688877 }
	}
	var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
}

Nous allons compléter ce code afin d'ajouter, sur une carte Google Maps, une barre d'outils à dessin. Par défaut, celle-ci :

Son aspect visuel est le suivant :

DrawingManager Barre d'outils à dessin

La barre d'outils à dessin permet à l'utilisateur d'activer/désactiver le mode "dessiner" afin d'ajouter rapidement et facilement sur une carte Google Maps un ou plusieurs marqueurs, ainsi que diverses figures géométriques ( cercle, rectangle, polyline, polygone ).

Par exemple, pour ajouter un cercle sur la carte, l'utilisateur :

  • clique sur le bouton représentant un cercle dans la barre d'outils à dessin (il permet d'activer le mode "dessiner"),
  • clique sur la carte une première fois pour définir le centre du cercle,
  • clique sur la carte une seconde fois pour définir le rayon,
  • clique sur le bouton représentant une main dans la barre d'outils à dessin pour abandonner le mode "dessiner".

Autre méthode :

  • cliquer sur le bouton représentant un cercle dans la barre d'outils à dessin (il permet d'activer le mode "dessiner"),
  • cliquer (et maintenir le bouton de la souris enfoncé) sur la carte pour définir le centre du cercle,
  • faire glisser le curseur de la souris sur la carte pour faire varier son rayon,
  • relâcher le bouton de la souris une fois le rayon souhaité atteint.
  • enfin, cliquer sur le bouton représentant une main dans la barre d'outils à dessin pour abandonner le mode "dessiner".

Carte Google Maps avec la barre d'outils à dessin

Insérer la barre d'outils à dessin à l'aide de la classe DrawingManager

La création de la barre d'outils à dessin se fait à l'aide de la classe DrawingManager. Cette classe est présente dans la bibliothèque Drawing Library qui ne fait pas partie, par défaut, de l'API Google Maps V3. Il va donc falloir indiquer, lors du chargement du script de l'API Google Maps V3, que l'on souhaite l'utiliser. Ceci se fait simplement en ajoutant le paramètre libraries suivi du nom de la bibliothèque, c'est à dire drawing.

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=VotreCleApiIci"></script>

Une fois la bibliothèque Drawing Library chargée, il suffit de créer la barre d'outils à dessin :

var	barreOutilsDessin = new google.maps.drawing.DrawingManager();

puis de l'ajouter à notre carte :

var	barreOutilsDessin = new google.maps.drawing.DrawingManager();
	barreOutilsDessin.setMap( maCarte );

A la place de la méthode setMap il est également possible d'utiliser la méthode setOptions :

var	barreOutilsDessin = new google.maps.drawing.DrawingManager();
	barreOutilsDessin.setOptions( { "map": maCarte } );

Voici deux autres écritures possibles :

La première écriture utilise un objet DrawingManagerOptions :

var	optionsBarreOutilsDessin = {
	map:maCarte
};
var	barreOutilsDessin = new google.maps.drawing.DrawingManager( optionsBarreOutilsDessin );

ou encore

var	barreOutilsDessin = new google.maps.drawing.DrawingManager( { map:maCarte } );

La seconde écriture utilise le fait que la classe DrawingManager hérite de la classe MVCObject. Il est donc possible d'utiliser les méthodes set ou setValues :

var	barreOutilsDessin = new google.maps.drawing.DrawingManager();
	barreOutilsDessin.set( "map", maCarte );

ou encore

var	barreOutilsDessin = new google.maps.drawing.DrawingManager();
	barreOutilsDessin.setValues( { "map": maCarte } );

Code pour ajouter la barre d'outils à dessin sur une carte Google Maps

Vous trouverez ci-dessous un exemple de code complet vous permettant d'ajouter la barre d'outils à dessin sur la carte Google :

<!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 optionsCarte = {
					zoom: 8,
					center: { lat: 47.389982, lng: 0.688877 },
					mapTypeId: google.maps.MapTypeId.TERRAIN
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsBarreOutilsDessin = {
					map: maCarte
				};
				var barreOutilsDessin = new google.maps.drawing.DrawingManager( optionsBarreOutilsDessin );
			}
		</script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&libraries=drawing&callback=initialisation"></script>
	</body>
</html>