Première utilisation de l'API

Premièrement il faut s'enregistrer pour obtenir une clé d'utilisation (l'inscription, comme le service sont gratuits). Maintenant la clé d'utilisation récupérée on va voir comment ajouter une simple carte :

  • Charger le système Google AJAX APIs qui contient un chargeur pour accéder aux différentes API Google, ajouter le code qui suit entre les balises <head> de votre page, en remplaçant ABCDEFG par votre clé :

    <script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>

  • Ensuite on peut charger l'API Map et l'initialiser :

    <script type="text/javascript">
    google.load("maps", "2");

    function initialize()
    {
    var map = new google.maps.Map2(document.getElementById("map"));
    map.setCenter(new google.maps.LatLng(37.4220, -122.0841), 14);
    }
    google.setOnLoadCallback(initialize);
    </script>

    On charge ici la version 2 de l'API Map (google.load("maps", "2");) et on enregistre la fonction initialize comme devant être appelée après le chargement (google.setOnLoadCallback(initialize);). Cette fonction a pour rôle, d'abord, de créer une nouvelle carte dans l'élément repéré par l'Id map et de centrer la carte sur les coordonnées 37.4220N, 122.0841O, qui corresponde au Googleplex.

  • Comme vue précédemment la carte est créée dans l'élément map il faut donc le créer, pour cela ajouter entre vos balises <body> un code du style :

    <div id="map" style="width: 500px; height: 300px"></div>

Voila notre première carte, le résultat est visible sur cette page.

Avant de passer à la suite on va faire une dernière modification pour éviter les pertes de mémoire. Pour cela il faut appeler la méthode GUnload en quittant la page : <body onload="GUnlod()">

Quelques options

Pour pouvoir interagir avec la carte il nous faut d'abord modifier un peu le code écrit précédemment pour avoir accès à l'objet map. On déclare donc la variable map en dehors de toute fonction ce qui nous donne le code suivant :

<script type="text/javascript">
  google.load("maps", "2");
 
  var map;
 
  function initialize()
  {
      map = new google.maps.Map2(document.getElementById("map"));
      map.setCenter(new google.maps.LatLng(37.4220, -122.0841), 10);
  }
  google.setOnLoadCallback(initialize);
</script>

Tous les exemples suivants sont visibles sur cette page.

Modifier le type d'affiche

Pour cela on utilise la méthode setMapType qui prend comme paramètre le type d'affiche, 3 configurations sont disponibles :

  • G_NORMAL_MAP : vue classique de Google Map sous forme de cartes vectorisées
  • G_SATELLITE_MAP : photo satellite avec un rendu identique à Google Earth
  • G_HYBRID_MAP : Combinaison des deux vues précédentes, un fond formé de photos satellites avec en surimpression les routes vectorisées

Interagir avec la carte

On a déjà vu la méthode setCenter qui permet de centrer la carte sur un point. Il existe de nombreuses autres méthodes qui permettent d'interagir avec la carte, on va voir quelque exemple ici.

La méthode panTo permet de se déplacer vers un autre point de la carte, ex : map.panTo(new GLatLng(48.8, 2.3)); On voit au passage l'utilisation de l'objet GLatLng qui permet de créer un point de repère à partir de ses coordonnées (latitude, longitude).

Les méthodes zoomIn, zoomOut et setZoom permettent respectivement de zoomer, dézoomer et définir le niveau de zoom.

Activation des contrôles

Il est aussi possible d'activer/désactiver tous les contrôles habituels de Google Map. Par exemple enableScrollWheelZoom et disableScrollWheelZoom permettent d'activer/désactiver le zoom molette.

Il est aussi possible de connaitre l'état d'activation de ces contrôles. Par exemple scrollWheelZoomEnabled renvoie true si le zoom molette est activé.

On peut ajouter différent menus/contrôles sur la carte à l'aide de la méthode addControl qui se construit, par exemple pour ajouter un choix de type d'affichage, comme suit : map.addControl(new google.maps.MenuMapTypeControl());

D'autres types de contrôle peuvent être utilisés comme par exemple SmallMapControl et LargeMapControl qui permettent de contrôler la position de la carte.

Une suite...

Donc on va s'arrêter là pour ce premier billet sur Google Map API. Il reste encore pas mal de possibilités à explorer et elles le seront surement dans de futures billets.

En attendant la suite voilà quelques liens pour se documenter plus en profondeur sur ce système :

  • Home : la page principale de l'API Google Map
  • Référence : La page de référence de la documentation
  • ESA Google Map API : Une page de l'ESA regroupant des exemples d'utilisation