APPLICATIONS-GOOGLE-MAPS.com

Comment utiliser les API's Google Maps, tutoriels Google Maps, cartographie Google Maps

TRACER UNE LIGNE

Nous allons commencer par tracer un segment de ligne. Ce segment est délimité par 2 coordonnées.

<html>
  <head>
    <title>Application Google Maps : Tracer une ligne</title>

    <script src="http://maps.google.com/maps?file=api&v=2&key=
    ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
    type="text/javascript"></script>

    <script type="text/javascript">//<![CDATA[
      function load()
        {
        if (GBrowserIsCompatible())
          {
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(51.51376371940495, -0.15552520751953125), 16);
// Initialisation de l'array "maligne" préchargé par le contenu des 2 cordonnées délimitant la ligne
          var maligne = new GPolyline([
            new GLatLng(51.51349664501128, -0.1584005355834961),
            new GLatLng(51.51424444936763, -0.15140533447265625)
            ], "#990000", 8);
// Affichage de la ligne
          map.addOverlay(maligne);
          }
        }
    //]]></script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

Explications :

Création d'un array (variable tableau) contenant les coordonnées des 2 points délimitant le tracé de la ligne.

Au tableau de coordonnées "maligne" est associé la couleur de la ligne et son épaisseur exprimé en points. Dans le cas d'un seul segment vous n'aurez que 2 définitions de point

Affichage de la ligne délimitée par les coordonnées contenues dans l'array "maligne".

Résultat :

TRACER UNE POLYLIGNE

Dans cet exemple, nous allons tracer une polyligne constituée d'un ensemble de segments de ligne.

<html>
  <head>
    <title>Application Google Maps : Tracer une polyligne</title>

    <script src="http://maps.google.com/maps?file=api&v=2&key=
    ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw"
    type="text/javascript"></script>

    <script type="text/javascript">//<![CDATA[
      function load()
        {
        if (GBrowserIsCompatible())
          {
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(51.50430000000001, -0.13454000000000002), 15);
// Initialisation de l'array "maligne" préchargé par le contenu des cordonnées
// délimitant les segments constituant la polyligne
          var maligne = new GPolyline([
            new GLatLng(51.50135, -0.14184000000000002),
            new GLatLng(51.50161000000001, -0.14113),
            new GLatLng(51.501400000000004, -0.14072),
            new GLatLng(51.50150000000001, -0.14032),
            new GLatLng(51.50175, -0.14008),
            new GLatLng(51.501990000000006, -0.14012000000000002),
            new GLatLng(51.50211, -0.14004),
            new GLatLng(51.505840000000006, -0.13083),
            new GLatLng(51.50524000000001, -0.12946000000000002),
            new GLatLng(51.50513, -0.12912),
            new GLatLng(51.50529, -0.12802000000000002)
            ], "#990000", 8);
// Affichage de la ligne
          map.addOverlay(maligne);
          }
        }
    //]]></script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

Explications :

Création d'un array (variable tableau) contenant les coordonnées des points délimitant le tracé de la polyligne.

Au tableau de coordonnées "maligne" est associé la couleur de la ligne et son épaisseur exprimé en points.

Affichage de la ligne délimitée par les coordonnées contenues dans l'array "maligne".

Résultat :

Informations :
"Google" et "Google Maps" sont des noms déposés par la société Google, Inc. de Mountain View (Comté de Santa Clara, Californie, USA).