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

LE GEOCODING
Le geocoding permet de traduire une adresse en coordonnées longitude / latitude, coordonées qui pourra être utilisée par la suite dans les carte Google Maps pour un centrage de carte ou pour placer un marker.



LE GEOCODING (version avec boîte d'entrée)
Cette version est couplée à une boîte d'entrée. L'internaute entrera dans cette boîte l'adresse qu'il souhaite visualiser et un marker situera l'adresse.
Il est fortement conseillé, d'ajouter le nom du pays en anglais (ex. : Belgium).
Ce système ne marche que pour les rues et communes connues par Google Maps !

<html>
  <head>
    <title>Application Google Maps : Le geocoding</title>

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

    <script type="text/javascript">//<![CDATA[
      var map = null;
      var geocoder = null;

      function load()
        {
        if (GBrowserIsCompatible())
          {
          map = new GMap2(document.getElementById("carte"));
          map.setCenter(new GLatLng(49.8, 2.4), 6);
// Initialisation de l'objet "GClientGeocoder"
          geocoder = new GClientGeocoder();
          }
        }
// Fonction de geocoding.
// Transformation d'une adresse en coordonnées
      function showAddress(address)
        {
        if (geocoder)
          {
          geocoder.getLatLng(address, function(point)
            {
            if (!point) {alert(address + " not found");} // Adresse non connue par Google Maps
            else
              {
              map.setCenter(point, 13); // Recentrage de la carte sur l'adresse
              var marker = new GMarker(point); // Initialisation d'un marker
              map.addOverlay(marker); // Affichage du marker
              marker.openInfoWindowHtml(address); // Affichage d'une bulle contenant l'adresse
              }
            });
          }
        }
    //]]></script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
    Entrez dans cette boîte l'adresse que vous souhaitez situer<br>
    Ajoutez le nom du pays en anglais !!!<br>
    <input type="text" size="60" name="address"><input type="submit" value="Recherche !"><br>
    Ex d'adresse : <i>14, rue Royale Bruxelles Belgium</i>
    </form>
    <div id="carte" style="width: 500px; height: 300px"></div>
  </body>
</html>

Explications :

"geocoder = new GClientGeocoder();" initialise l'objet "GClientGeocoder".
Création d'une fonction "showAddress()" qui fera la convertion de l'adresse en coordonnées longitude/latitude.
Dans cette fonction on recentre la carte, on place un marker et une bulle contenant l'adresse recherchée.


Résultat :

Entrez dans cette boîte l'adresse que vous souhaitez situer
Ajoutez le nom du pays en anglais !!!

Ex d'adresse : 14, rue Royale Bruxelles Belgium




LE GEOCODING (version avec adresse en dur)
Dans cette version l'adresse est écrite en dur dans une variable.
Il est fortement conseillé, d'ajouter le nom du pays en anglais (ex. : Belgium).
Ce système ne marche que pour les rues et communes connues par Google Maps !

<html>
  <head>
    <title>Application Google Maps : Échelle (scale)</title>

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

    <script type="text/javascript">//<![CDATA[
      var map = null;
      var geocoder = null;
      function load()
        {
        if (GBrowserIsCompatible())
          {
          map = new GMap2(document.getElementById("carte"));
          map.setCenter(new GLatLng(49.8, 2.4), 6);
// Initialisation de l'objet "GClientGeocoder"
          geocoder = new GClientGeocoder();
// Initialisation de l'adresse
          adresse = "14, rue Royale Bruxelles Belgium";
// Appel de la fonction d'affichage de l'adresse
          showAddress(adresse);
          }
        }
// Fonction de geocoding.
// Transformation d'une adresse en coordonnées
      function showAddress(address)
        {
        if (geocoder)
          {
          geocoder.getLatLng(address, function(point)
            {
            if (!point) {alert(address + " not found");} // Adresse non connue par Google Maps
            else
              {
              var marker = new GMarker(point); // Initialisation d'un marker
              map.addOverlay(marker); // Affichage du marker
              marker.openInfoWindowHtml(address); // Affichage d'une bulle contenant l'adresse
              }
            });
          }
        }
    //]]></script>
  </head>

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

Explications :

"geocoder = new GClientGeocoder();" initialise l'objet "GClientGeocoder".
La variable "adresse" est chargée par une adresse à afficher.
La fonction "showAddress()" pour afficher l'adresse.
Création d'une fonction "showAddress()" qui fera la convertion de l'adresse en coordonnées longitude/latitude.
Dans cette fonction on place un marker et une bulle contenant l'adresse recherchée.
Dans un site dynamique, la variable "adresse" peut-être personnalisée selon les besoins.


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 : 09/01/2010