> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> Javascript

> Google Maps JavaScript API V3

> Lecture du tutoriel

Google Maps JavaScript API V3

Par aymensan

Mise à jour : 20/06/2010

Difficulté : Facile Facile

741 visites depuis 7 jours, classé 166/786

Dans le cadre de l'unité d'enseignement PRO (Projet) de la HEIG-VD (Haute Ecole d'Ingénierie et de Gestion du Canton de Vaud), ce tutoriel a pour but de fournir une introduction à l'API Google Maps V3, qui à l'heure actuelle (31.05.10) vient de perdre sa dénomination "labs" ("labs" étant la dénomination Google pour "version béta").

Pour pouvoir suivre ce tutoriel, il faut avoir un minimum de connaissances en Javascript et XHTML.

Voici les points qui sont abordés dans ce tutoriel :

Affichage d'une carte Google Maps
Création d'overlays (marqueurs, polygones et polylignes)
Gestion des évènements souris

Retour en haut

Sommaire du tutoriel :

Affichage d'une carte Google Maps
Création d'overlays
Gestion des évènements souris

Retour en haut

Affichage d'une carte Google Maps

Voici le code minimal pour créer une page XHTML affichant une carte.

Code : HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

	<head>
		<title>Tutoriel Google Maps</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<!-- Elément Google Maps indiquant que la carte doit être affiché en plein écran et
		qu'elle ne peut pas être redimensionnée par l'utilisateur -->
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<!-- Inclusion de l'API Google MAPS -->
		<!-- Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialiser() {
				var latlng = new google.maps.LatLng(46.779231, 6.659431);
				//objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
				//de définir des options d'affichage de notre carte
				var options = {
					center: latlng,
					zoom: 19,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				
				//constructeur de la carte qui prend en paramêtre le conteneur HTML
				//dans lequel la carte doit s'afficher et les options
				var carte = new google.maps.Map(document.getElementById("carte"), options);
			}
		</script>
	</head>

	<body onload="initialiser()">
		<div id="carte" style="width:100%; height:100%"></div>
	</body>
</html>

Les 3 éléments importants que l'on retrouve dans ce code sont (1) l'importation de la librairie Google Maps grâce aux balises <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> et <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>, (2) le positionnement dans le corps de la page HTML d'une balise <div id="..."> avec un certain id (identificateur que l'on utilisera dans le code Javascript lors de l'instanciation de la carte Google Maps pour définir son emplacement) et enfin (3) l'instanciation d'un objet de classe google.maps.Map représentant la carte qui sera affichée.

Options de la carte

Pour créer une carte, il faut nécessairement définir les options suivantes, comme nous avons pu le voir dans le code ci-dessus :

center : centre de la carte
zoom : agrandissement de la carte
mapTypeId : type de la carte

Propriétés
Nom	Signification	Valeurs
center	centre de la carte	coordonnées en latitude et longitude
zoom	agrandissement de la carte	0 à 20 (bornes comprises)
mapTypeId	type de la carte	google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN

Dans Google Maps les coordonnées sont sous formes de latitude et de longitude. La librairie Google Maps met à disposition un constructeur permettant de créer un objet de classe google.maps.LatLng(lat:number, lng:number) qui prend en paramètre des nombres représentant, respectivement, la latitude et la longitude.

Voici d'autres options intéressantes que l'on peut spécifier pour une carte :

disableDoubleClickZoom : Si sa valeur est mise à true, cela désactive l'agrandissement en faisant un double-clic avec la souris.
draggable : Si sa valeur est mise à true, cela désactive le fait de pouvoir faire glisser la carte en maintenant le clic sur elle.
scrollwheel : Si sa valeur est mise à true, cela désactive l'agrandissement avec le scroll de la souris.

Par défaut, ces trois options ont la valeur true.

Retour en haut

Création d'overlays

Maintenant que l'on sait comment afficher une carte, il se peut que l'on ait besoin de disposer des éléments sur elle, pour, par exemple, indiquer un certain emplacement ou encore définir une zone géographique. Ceci peut se faire à l'aide des overlays.

Les overlays sont des éléments graphiques que l'ont peut poser ou dessiner sur une carte Google Maps.

Les overlays auxquels on s'intéresse ici sont les suivants :

les marqueurs qui permettent d'indiquer un point sur la carte à la manière d'un drapeau
les polylines qui permettent, par exemple, de faire des tracés de vols d'avion
les polygones qui permettent de dessiner sur la carte une zone géographique

Les marqueurs

Les marqueurs permettent de situer un point précis sur une carte.

Pour créer et afficher un marqueur, il faut au minimum spécifier une position (en latitude et longitude avec le constructeur google.maps.LatLng() vu dans la partie précédente "Affichage d'une carte Google Maps") et la carte sur laquelle le marqueur doit être affiché.

Code : JavaScript

function initialiser() {
	var latlng = new google.maps.LatLng(46.779231, 6.659431);
	
	var options = {
		center: latlng,
		zoom: 19,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	var carte = new google.maps.Map(document.getElementById("carte"), options);
	
	/****************Nouveau code****************/

	//création du marqueur
	var marqueur = new google.maps.Marker({
		position: new google.maps.LatLng(46.779231, 6.659431),
		map: carte
	});

	/********************************************/
}

Utilisez le squelette HTML vu dans la partie précédente "Affichage d'une carte Google Maps" et remplacez le code de la fonction Javascript initialiser() qui s'y trouve par le code ci-dessus. Faites de même pour tous les prochains exemples.

Ceci affiche un marqueur rouge sur le bâtiment "Ecole d'ingénieurs du Canton de Vaud" que l'on voit sur la carte.

Il est possible de rendre le marqueur draggable (c'est-à-dire permettre qu'on puisse le déplacer au moyen de la souris par un glisser-déposer). Pour ce faire, on peut soit, lors de la création du marqueur, spécifier dans les options draggable: true (entre les accolades dans les paramètres du constructeur, ici new google.maps.Marker({...}) ), soit, après avoir créé le marqueur marqueur , faire un setDraggable(true) .

De la même manière, on peut aussi modifier l'image du marqueur par la propriété icon: "./mon_image.png" ou la fonction setIcon("./mon_image.png") .

Les polylines

Les polylines permettent de dessiner des lignes droites attachées les unes aux autres sur la carte. Ceci peut permettre, par exemple, de dessiner un itinéraire sur la carte Google Maps.

Pour créer et dessiner un polyline, il est nécessaire de définir son chemin, c'est-à-dire les coordonnées par lesquelles il passe. Pour ce faire, il faut créer un tableau dont les éléments sont des instances de la classe google.maps.LatLng() .

Voici le tableau du parcours du bus que les étudiants de la Heig-VD doivent prendre tous les matins depuis la gare pour aller à l'école :

Code : JavaScript

//chemin du tracé du futur polyline
var parcoursBus = [
	new google.maps.LatLng(46.781367900048, 6.6401992834884),
	new google.maps.LatLng(46.780821285011, 6.6416348016222),
	new google.maps.LatLng(46.780496546047, 6.6421830461926),
	new google.maps.LatLng(46.779835306991, 6.6426765713417),
	new google.maps.LatLng(46.777748677169, 6.6518819126808),
	new google.maps.LatLng(46.778027878803, 6.6541349682533),
	new google.maps.LatLng(46.778484884759, 6.6557324922045),
	new google.maps.LatLng(46.778752327087, 6.6573654211838),
	new google.maps.LatLng(46.778605381016, 6.6588674582321)
];

Lorsque ceci est fait, il faut créer le polyline en spécifiant pour la propriété path le tableau déclaré ci-dessus.

Code : JavaScript

var traceParcoursBus = new google.maps.Polyline({
	path: parcoursBus,//chemin du tracé
	strokeColor: "#FF0000",//couleur du tracé
	strokeOpacity: 1.0,//opacité du tracé
	strokeWeight: 2//grosseur du tracé
});

Enfin, afin d'afficher le tracé sur la carte, il faut utiliser la méthode setMap() de notre objet traceParcoursBus .

Code : JavaScript

1
2
3

//lier le tracé à la carte
//ceci permet au tracé d'être affiché sur la carte
traceParcoursBus.setMap(carte);

Au lieu de faire un setMap() , on aurait pu, lors de la création du polyline, spécifier la propriété map dans les paramètres du constructeur new google.maps.Polyline({...}) .

Quand on ajoute une propriété dans les paramètres du constructeur, il ne faut pas oublier de vérifier que seule la dernière définition de propriété ne se termine pas par une virgule et qu'à la fin de toutes les autres une virgule est présente.

Voici ce que le code de notre fonction initialiser() donne au final :

Code : JavaScript

function initialiser() {
	var latlng = new google.maps.LatLng(46.779231, 6.659431);
	
	var options = {
		center: latlng,
		zoom: 19,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	var carte = new google.maps.Map(document.getElementById("carte"), options);
	
	/****************Nouveau code****************/

	//redéfinition du centre de la carte
	carte.setCenter(new google.maps.LatLng(46.779872043155, 6.6497500934796));
	//redéfinition du zoom
	carte.setZoom(15);
	
	//chemin du tracé
	var parcoursBus = [
		new google.maps.LatLng(46.781367900048, 6.6401992834884),
		new google.maps.LatLng(46.780821285011, 6.6416348016222),
		new google.maps.LatLng(46.780496546047, 6.6421830461926),
		new google.maps.LatLng(46.779835306991, 6.6426765713417),
		new google.maps.LatLng(46.777748677169, 6.6518819126808),
		new google.maps.LatLng(46.778027878803, 6.6541349682533),
		new google.maps.LatLng(46.778484884759, 6.6557324922045),
		new google.maps.LatLng(46.778752327087, 6.6573654211838),
		new google.maps.LatLng(46.778605381016, 6.6588674582321)
	];
	
	var traceParcoursBus = new google.maps.Polyline({
		path: parcoursBus,//chemin du tracé
		strokeColor: "#FF0000",//couleur du tracé
		strokeOpacity: 1.0,//opacité du tracé
		strokeWeight: 2//grosseur du tracé
	});
	
	//lier le tracé à la carte
	//ceci permet au tracé d'être affiché sur la carte
	traceParcoursBus.setMap(carte);

	/********************************************/
}

Vous pouvez voir que j'ai ajouté sous le commentaire "Nouveau code" deux autres instructions. J'aurais pu mettre tout ceci dans les options de la carte, mais j'ai préféré faire de cette manière pour bien faire la différence entre le code original de notre fonction initialiser() et tout ce que nous venons d'ajouter.

Les polygones

Sur une carte Google Maps, on peut aussi dessiner des polygones. Un exemple d'utilité pratique serait de définir par ce biais un secteur ou une zone.

Créer un polygone sur la carte est extrêmement similaire à la création d'un polyline que l'on vient de voir. Un peu comme avant, il faut :

Créer un tableau contenant tous les sommets du polygone
Créer le polygone avec le constructeur google.maps.Polygon()
Afficher le polygone sur la carte

Voici ce que donne le code :

Code : JavaScript

function initialiser() {
	var latlng = new google.maps.LatLng(46.779231, 6.659431);
	
	var options = {
		center: latlng,
		zoom: 19,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	var carte = new google.maps.Map(document.getElementById("carte"), options);
	
	/****************Nouveau code****************/
	
	//redéfinition du zoom
	carte.setZoom(18);
	
	//sommets du polygone
	var parcelleHeig = [
		new google.maps.LatLng(46.779733557514, 6.660767535),
		new google.maps.LatLng(46.780189079483, 6.6595337188532),
		new google.maps.LatLng(46.779114923142, 6.6580590403695),
		new google.maps.LatLng(46.778462483896, 6.6592118537714)
	];

	polygoneParcelleHeig = new google.maps.Polygon({
		paths: parcelleHeig,//sommets du polygone
		strokeColor: "#0FF000",//couleur des bords du polygone
		strokeOpacity: 0.8,//opacité des bords du polygone
		strokeWeight: 2,//épaisseur des bords du polygone
		fillColor: "#0FF000",//couleur de remplissage du polygone
		fillOpacity: 0.35////opacité de remplissage du polygone
	});

	//lier le polygone à la carte
	//ceci permet au polygone d'être affiché sur la carte
	polygoneParcelleHeig.setMap(carte);

	/********************************************/
}

Notez qu'il n'est pas nécessaire lors de la définition des sommets de la parcelle de définir le dernier sommet sur le premier afin de fermer le polygone ; le dernier sommet sera automatiquement relié au premier.

Retour en haut

Gestion des évènements souris

Il est possible avec Google Maps d'attacher des gestionnaires d'évènements à certains objets de Google Maps comme les cartes, les marqueurs, les polygones, etc.

Voici un tableau de quelques évènements que l'on peut gérer dans Google Maps :

Evènements dans Google Maps
Indentificateur de l'évènement	Généré quand on ...
'click'	... clique avec la souris
'rightclick'	... fait un clic-droit avec la souris
'dblclick'	... fait un double-clic avec la souris
'drag'	... déplace un objet au moyen de la souris par un glisser-déposer (généré plusieurs fois tout au long de cette action)
'dragstart'	... une fois tout au début d'un déplacement d'un objet au moyen de la souris par un glisser-déposer
'dragend'	... une fois tout à la fin d'un déplacement d'un objet au moyen de la souris par un glisser-déposer
'mouseover'	... lorsque le pointeur de la souris entre sur la surface d'un objet Google Maps
'mouseout'	... lorsque le pointeur de la souris sort de la surface d'un objet Google Maps

Créer un gestionnaire d'évènements se fait toujours de la même manière c'est pour cela qu'on ne fera que deux exemples : celui du 'click' et celui du 'drag' .

Voici ce à quoi le code de n'importe quel gestionnaire d'évènement ressemble :

Code : JavaScript

//'evenement' est l'identificateur de l'évènement (voir tableau ci-dessus)
//obj est l'objet duquel nous souhaitons traiter les évènements
google.maps.event.addListener(obj,'evenement', function(event) {
	/*code qui doit s'executer lors de l'evenement*/
});

L'argument "event", dans le code ci-dessus, n'est utile que si l'on souhaite accèder à ses propriétés. Par exemple, la propiété latLng représentant une latitude et une longitude est disponiple pour un event de type MouseEvent passé par l'évènement clic.

'click' (clic)

Reprenons le code que nous avions fait pour créer un marqueur dans la partie précédente "Création d'overlays" et ajoutons-y un gestionnaire d'évènements pour le clic sur le marqueur. Ce gestionnaire devra afficher un message d'alerte Javascript disant que le marqueur a été cliqué.

Voici à quoi le code ressemble :

Code : JavaScript

function initialiser() {
	var latlng = new google.maps.LatLng(46.779231, 6.659431);
	
	var options = {
		center: latlng,
		zoom: 19,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	var carte = new google.maps.Map(document.getElementById("carte"), options);

	//création du marqueur
	var marqueur = new google.maps.Marker({
		position: new google.maps.LatLng(46.779231, 6.659431),
		map: carte
	});

	/****************Nouveau code****************/
	
	google.maps.event.addListener(marqueur, 'click', function() {
		alert("Le marqueur a été cliqué.");//message d'alerte
	});
	
	/********************************************/
}

Avec les connaissances que nous avons à ce stade, nous pouvons écrire un code qui permette de créer des marqueurs dynamiquement sur la carte.

Reprenons de nouveau le code de la fonction initialiser() du début de ce tutoriel et ajoutons-lui un gestionnaire d'événement clic associé cette fois-ci à la carte et non à un marqueur, puis mettons-y un code permettant de créer un marqueur (à chaque clic, donc) avec la position event.latLng qui est une propriété de l'event de type MouseEvent .

Voici ce que donne le code :

Code : JavaScript

function initialiser() {
	var latlng = new google.maps.LatLng(46.779231, 6.659431);
	
	var options = {
		center: latlng,
		zoom: 19,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	var carte = new google.maps.Map(document.getElementById("carte"), options);

	/****************Nouveau code****************/
	
	//tableau contenant tous les marqueurs que nous créerons
	var tabMarqueurs = new Array();
	
	//notez la présence de l'argument "event" entre les parenthèses de "function()"
	google.maps.event.addListener(carte, 'click', function(event) {
		tabMarqueurs.push(new google.maps.Marker({
			position: event.latLng,//coordonnée de la position du clic sur la carte
			map: carte//la carte sur laquelle le marqueur doit être affiché
		}));
	});
			
	/********************************************/
}

Si vous testez ce code, vous pourrez voir qu'un marqueur est créé lors de chaque clic de la souris sur la carte.

'dragend' (fin d'un glisser-déposer)

Pour illustrer la gestion de l'évènement 'dragend' , nous utiliserons de nouveau le code que nous avons fait pour la création d'un marqueur dans la partie "Création d'overlays".

L'exemple qui suit affiche, lorsque l'on déplace le marqueur, un message d'alerte Javascript indiquant la nouvelle coordonnée du marqueur.

Code : JavaScript

function initialiser() {
	var latlng = new google.maps.LatLng(46.779231, 6.659431);
	
	var options = {
		center: latlng,
		zoom: 19,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	var carte = new google.maps.Map(document.getElementById("carte"), options);

	//création du marqueur
	var marqueur = new google.maps.Marker({
		position: new google.maps.LatLng(46.779231, 6.659431),
		map: carte
	});
	
	/****************Nouveau code****************/

	//ne pas oublier de rendre le marqueur "déplaçable"
	marqueur.setDraggable(true);
	
	google.maps.event.addListener(marqueur, 'dragend', function(event) {
		//message d'alerte affichant la nouvelle position du marqueur
		alert("La nouvelle coordonnée du marqueur est : "+event.latLng);
	});

	/********************************************/
}

Retour en haut

Ce tutoriel a pu être créé essentiellement grâce à la documentation mis en ligne par Google qui se trouve sur le lien suivant : http://code.google.com/intl/fr/apis/ma [...] mentation/v3/

N'ayant pas pour but d'être exhaustif, ce tutoriel permet néanmoins la familiarisation avec l'API Google Maps V3.

Pour pouvoir aller plus loin dans l'utilisation de Google Maps, il y a la documentation officielle de Google, mais qui n'est malheureusement pas disponible en français.

Retour en haut

Retour en haut

33 commentaires pour "Google Maps JavaScript API V3"

Note moyenne : 3.85 / 4 (13 votes)

Pseudo

Commentaire

zorglup

# Posté le 27/10/2011 à 17:00:12

Bonjour,

Petite question concernant ce cours: Comment puis-je récupérer des données venant d'un fichier GPX afin de créer un tracé( comme le parcours du bus mais avec des coordonnées changeant à chaque fichier)
merci

sarahmado

# Posté le 27/01/2012 à 17:32:01

Bonjour,
J'ai écris exactement le même premier code du html sur ma jsp mais celle-ci n'affiche rien.
Help me.

Transylvania

# Posté le 28/02/2012 à 00:04:55

Études : BTS IRIS

Bonjour,
Me concernant le problème provient du fait que dès que j'encapsule le <div> de la carte dans un autre <div> celle-ci ne s'affiche plu??? En fait je souhaite l'intégrer dans une page de mon site qui est composée de plusieurs <div>!!
Pour répondre à sarahmado il faut bien faire attention de mettre les propriétés suivantes dans le CSS : Code : CSS

html{ 
   height: 100%; 
}
body{
   height: 100%;
}
#carte{ 
   height: 100% /* La on met ce que l'on veut */
}

chimikol

# Posté le 19/04/2012 à 09:43:50

Avis : Bon

bonjour
je suis débutante dans la programmation et je voudrais savoir comment on fait pour changer la latitude et de longitude donc "google.maps.LatLng(46.779231, 6.659431)" en adresse postale j'ai regardé dans la doc Googlemaps APi mais je ne suis pas très bonne en anglais
donc si quelqu'un peu m'aider
merci d'avance

ArgAur

# Posté le 07/05/2012 à 14:36:25

j'ai trouvé une erreur en début de tutoriel.

l'option disableDoubleClickZoom est à false par défaut et c'est quand on la met à vrai que le double-clic devient inactif.

var options = {
center: latlng,
zoom: 19,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom : true,
draggable : false,
scrollwheel : false
};

EDIT: moi aussi je viens juste de voir le bouton "signaler une erreur" mais je n'ai toujours pas compris le zCode.

Voir tous les commentaires

Les cours phares

Tous les cours par catégories

Autres

Programmation (263 Cours)

Graphisme (29 Cours)

Bureautique (27 Cours)

Jeux Vidéo (18 Cours)

Matériel (7 Cours)

Dernières annonces

Recrutement à Bac / Bac +1

Recrutement à Bac +2

Recrutement à Bac +3 / Bac +4

Recrutement à Bac +5

Dynamisez vos sites web avec JavaScript

Créez des applications pour iPhone, iPad et iPod Touch

Cours

Nouveau ?

Nouveautés

Site Web

Programmation

Bases de données

Mobiles

Systèmes d'exploitation

Graphisme

Infographie 3D

Bureautique

Réseaux

Matériel

Mapping

Google Maps JavaScript API V3

Options de la carte

Les marqueurs

Les polylines

Les polygones

'click' (clic)

'dragend' (fin d'un glisser-déposer)

Partager