API-V2-MAPS.com



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


Image
image
image
image





Page précédente   Page suivante

AJOUT D'UN MARKER (Repère)

L'objet "GMarker" permet de placer un repère sur une carte.
Par défaut, le marqueur a la forme d'un petit ballon de couleur rouge.

<html>
  <head>
    <title>Application Google Maps : Ajout d'un marker (repère)</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(48.85929404029, 2.341461181640), 12);
// "point" correspond aux coordonnées du marker
          var point = new GLatLng(48.85846111697847, 2.2944045066833496);
// Affichage du marker
          map.addOverlay(new GMarker(point));
          }
        }
    //]]></script>
  </head>

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

Explications :

Initialisation de la variable "point" qui contiendra les coordonnées longitude/latitude. Dans l'exemple les coordonnées de la Tour Eiffel.
Pour ajouter le marker mise en oeuvre de la méthode "addOverlay" (superposer) avec l'attribut "GMarker(point)".


Résultat :





AJOUT DE PLUSIEURS MARKER

En multipliant les 2 lignes autant de fois que vous souhaitez placer de marqueur.
Par défaut, le marqueur a la forme d'un petit ballon de couleur rouge.

<html>
  <head>
    <title>Application Google Maps : Ajout de plusieurs marqueur</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(48.85929404029, 2.341461181640), 12);
// marqueur N° 1
          var point = new GLatLng(48.85846111697847, 2.2944045066833496);
          map.addOverlay(new GMarker(point));
// marqueur N° 2
          var point = new GLatLng(48.85929404029, 2.341461181640);
          map.addOverlay(new GMarker(point));
          }
        }
    //]]></script>
  </head>

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

Explications :

Pour chaque point, vous devez initialiser les coordonnées du "point" et appeler la méthode "addOverlay" (superposer) avec l'attribut "GMarker(point)".
Si vous avez beaucoup de points, vous pouvez stocker leurs coordonnées dans un tableau (Array) et ensuite faire une boucle qui lit les coordonnées de chaque point et affiche les marqueurs.
Il existe une seconde méthode qui permet d'afficher les marqueurs dont les coordonnées sont stockées dans un fichier "XML".



Résultat :





Page précédente   Page suivante

image


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















image
  © Copyright 2008© VDC
  Tout droits réservés
  Date de création : 01/06/2008
  Dernière mise à jour : 15/03/2009