Description

Typologie

Formation

Lieu

Paris

Grâce à cette formation vous pourrez acquérir les connaissances nécessaires qui vous permettrons d’ajouter des compétences à votre profil et obtenir de solides aptitude qui vous offriront de nombreuses opportunités professionnelles.

Les sites et dates disponibles

Paris ((75) Paris)

Voir plan

7 Cité Paradis, 75010

Date de début

Consulter

Questions / Réponses

Ajoutez votre question

Nos conseillers et autres utilisateurs pourront vous répondre

À qui souhaitez-vous addresser votre question?

Tous
Aux étudiants
À l'établissement

Saisissez vos coordonnées pour recevoir une réponse

Nous ne publierons que votre nom et votre question

Les Avis

Les matières

Api
Google maps

Le programme

Introduction du cours

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

Affichage d'une carte Google Maps

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

<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" />  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />   <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

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.

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é.

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 :

//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.

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 .

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

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 :

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...

Catégories liées

Contact

Google Maps JavaScript API V3

Questions / Réponses

Les Avis

Les matières

Le programme

Ajoutez des cours similaires
et comparez-les pour mieux choisir.

Google Maps JavaScript API V3

Questions / Réponses

Les Avis

Les matières

Le programme

Ajoutez des cours similaireset comparez-les pour mieux choisir.

Ajoutez des cours similaires
et comparez-les pour mieux choisir.