Web dynamique Interfaces de programmation (API)

Google Maps API

Utiliser un API (interface de programmation) signifie utiliser un service qu'offre un outil distant. Dans l'exemple qui suit Google Maps.

Il est nécessaire de se documenter pour apprendre à utiliser les fonctionnalités du service. Il s'agit de fonctions spécifiques qui permettent de développer des fonctionnalités complémentaires intégrées.

L'API de Google Maps permet de faire apparaître une carte sur laquelle des informations personnalisées peuvent être ajoutées. En occurrence, des icônes à des emplacements définis par des coordonnées géographiques.

Exercice : Créer une carte météo de la Suisse romande

Comment faire

Javascript : insertion de l'API

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

L'appel se fait par l'insertion d'un fichier Javascript provenant de Google. Une clé d'accès est exigée par l'API de Google. Elle est à prévoir et à insérer dans l'adresse, une fois le site en ligne.

Javascript : importation de la carte

<script>

function initialize() {
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng( 46.621724, 6.794492 ),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.querySelector( '#map' ), myOptions);
}

</script>

La fonction "initialize()" déclenchera le chargement de la carte grâce à l'appel de la fonction (méthode) "LatLng()" de l'objet "google.maps". Les coordonnées '46.621724' et '6.794492' inscrites indiquent l'emplacement du centre de la carte.

L'API de Google Maps, propose une quantité d'options pour la fonction (méthode) "Map" peuvent être précisées pour préciser l'apparence de la carte. Les options suivantes ont été définies :

La fonction (méthode) "Map()" permet d'assembler les informations sur la carte et indique l'élément HTML dans lequel elle sera insérée. En occurence l'élément qui portera l'identifiant (id) "ma_carte".

HTML : Insertion de la carte dans la page

<div style="width:100%; height:380px;" id="map"></div>

La carte apparaîtra dans l'élément HTML dont l'identifiant (id) est "map".

L'opération est déclenchée au chargement de la page grâce à la fonction (méthode) "window.onload".

window.onload = function(){ initialize(); }

Ajouter des pointeurs personnalisés

Des éléments peuvent être ajoutés dans la carte. Ajoutons un premier pointeur posé sur les coordonnées longitude et latitude de Lausanne (46.524855, 6.633968).

new google.maps.Marker({
   position: new google.maps.LatLng( 46.524855, 6.633968 ),
   map: map,
   title: 'Lausanne',
   icon: '../lib/images/meteo/02.png'
});

Ce code s'ajoute dans la fonction "intialize()" et permet de positionner dans la carte un lieu. Identifier dans cet exemple par une image.

Chaque lieu pourra être identifié en ajoutant le code pour chacun d'eux.