Aller au contenu

4. Introduction sur les polylignes#

📆 Date de publication initiale : 22 août 2008

⚠ L'API Google Maps v2 est dépréciée depuis le 19 mai 2010.

Introduction#

logo Google

De la même manière que le troisième tutoriel sur l'affichage d'un marqueur, il est possible de définir et d'afficher une polyligne sur la carte.

Initialisation#

Pour ce tutoriel, nous partirons de la carte définie dans le second tutoriel et alimenterons la fonction initialize().

Création de la polyligne#

Pour cela, il faut définir une liste de points :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var points = [ new GLatLng(43.57776102358721,1.403797022247275),
               new GLatLng(43.57774203677786,1.402996671914309),
               new GLatLng(43.57770841326447,1.402996671901832),
               new GLatLng(43.57769313342543,1.402998782088943),
               new GLatLng(43.57767174734567,1.403007224111022),
               new GLatLng(43.57781081938519,1.402984013893814),
               new GLatLng(43.57776634571197,1.402916553930126),
               new GLatLng(43.57775256036395,1.402897600993683),
               new GLatLng(43.57773724611339,1.402872341766638),
               new GLatLng(43.577723523068,1.402899724384128),
               new GLatLng(43.57772504884841,1.402897617553464),
               new GLatLng(43.57772047329792,1.402906044132763),
               new GLatLng(43.57771286432422,1.402927106716888),
               new GLatLng(43.57769459159984,1.402956602400224),
               new GLatLng(43.57769612259359,1.402958710172129),
               new GLatLng(43.57770981869092,1.402931318866109),
               new GLatLng(43.57767479573649,1.403000892396264)];

Et de définir la polyligne grâce à la classe GPolyline :

1
var poly = new GPolyline(points);

Affichage de la polyligne sur la carte#

En utilisant la méthode overlay sur la carte (cf. tutoriel n°3), on affiche la polyligne sur la carte :

1
map.addOverlay(poly);

Code complet#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      [Google Maps] 4. Introduction sur les polylignes
    </title>
    <style type="text/css">
      html { overflow:hidden; height:100%; }
      body { height:100%; margin:0; }
      #map { width:100%; height:100%; }
    </style>
    <script src="http://maps.google.com/maps?file=api&v=2.x&key=votre_clé_ici" type="text/javascript"></script>
    <script type="text/javascript">
      function initialize() {
        if (GBrowserIsCompatible()) {
          var map = new GMap2(document.getElementById('map'));
          map.setCenter(new GLatLng(43.57769664771851, 1.402821992034912),16);
          map.addControl(new GMapTypeControl());
          map.removeMapType(G_HYBRID_MAP);
          map.addMapType(G_PHYSICAL_MAP);
          map.setMapType(G_SATELLITE_MAP);
          map.addControl(new GOverviewMapControl());
          map.addControl(new GScaleControl());
          map.addControl(new GLargeMapControl());
          map.enableScrollWheelZoom();
          var points = [ new GLatLng(43.57776102358721,1.403797022247275),
                         new GLatLng(43.57774203677786,1.402996671914309),
                         new GLatLng(43.57770841326447,1.402996671901832),
                         new GLatLng(43.57769313342543,1.402998782088943),
                         new GLatLng(43.57767174734567,1.403007224111022),
                         new GLatLng(43.57781081938519,1.402984013893814),
                         new GLatLng(43.57776634571197,1.402916553930126),
                         new GLatLng(43.57775256036395,1.402897600993683),
                         new GLatLng(43.57773724611339,1.402872341766638),
                         new GLatLng(43.577723523068,1.402899724384128),
                         new GLatLng(43.57772504884841,1.402897617553464),
                         new GLatLng(43.57772047329792,1.402906044132763),
                         new GLatLng(43.57771286432422,1.402927106716888),
                         new GLatLng(43.57769459159984,1.402956602400224),
                         new GLatLng(43.57769612259359,1.402958710172129),
                         new GLatLng(43.57770981869092,1.402931318866109),
                         new GLatLng(43.57767479573649,1.403000892396264)];
          map.addOverlay(new GPolyline(points));
        }
        else{
          alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
        }
      }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map"></div>
  </body>
</html>

Démonstration#

Info

Le serveur hébergeant la démonstration n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée en iFrame est désactivée.
<iframe src="http://88.191.142.86/fabien/geotribu/tuto/gmaps-v2/tuto4.html" height="350px" width="100%"></iframe>

Résultat pleine page

Conclusion#

L'affichage d'une polyligne sur une carte Google Maps est tout aussi simple que l'affichage d'un simple marqueur. Il est possible de gérer des événements de la même façon que sur les simples marqueurs.

Auteur#

Fabien Goblet#

portrait

Informaticien et géographe de formation, je suis j'étais indépendant en base de données, webmapping, j'aide à la modélisation et à la définition du besoin client, je développe j'encadre le développement des interfaces d'administration et des carto-web, je conçois des api géographiques pour les administrations, les ONG, les labos de recherche. Je suis maintenant responsable de l'innovation chez Sogefi. Toujours des cartes et des données qui ont besoin de communiquer. Nous avons une spécialité dans les données foncières et de leur représentation à destination des administrations.

J'aime comprendre les données et en faire quelquechose ; du coup je fais pas mal de veille techno sur tout ce qui touche aux technologies web de dataviz - carto ou non.

J'ai une préférence pour les technologies libres. Tout ce qui touche aux interactions hommes-machines avec des technos comme Kinect, Arduino, Raspberry, les imprimantes 3d ou les machines de découpe laser, les caméras 360° me passionne. Et j'essaie de les utiliser dans le cadre du travail.

Commentaires

Afin de favoriser les échanges constructifs, merci de préférer le pseudonymat à l'anonymat. Pour rappel, l'adresse mail n'est pas exposée publiquement. Consulter la page sur la confidentialité et les données personnelles.
Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.

Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International Pictogramme Creative Commons Pictogramme Creative Commons BY Pictogramme Creative Commons NC Pictogramme Creative Commons SA