Yahoo! Maps API

Yahoo! Maps API permet d’intégrer aisément des cartes interactives riches dans vos applications web en utilisant la plate-forme de votre choix: Flash, Ajax et APIs Image Map.

Yahoo! fournit aussi d’autres API que l’on peut utiliser pour ajouter un contenu pertinent géographiquement à ses cartes.

L’utilisation de Yahoo! Maps API

api yahoo map

Au niveau le plus bas, chaque Yahoo! API Maps fonctionne de la même manière.
Vous pouvez tracer des points sur une carte avec des fonctions, des descriptions, des URL, des étiquettes, des groupes, des icônes et plus encore.

Vos données doivent être formatées avec le format standard RSS, soit avec la longitude / latitude, soit avec l’adresse postale, comme vous le souhaitez.

Ici nous étudions le cas l’api Yahoo map utilisant la technologie ajax.

Introduction et prérequis

L’api Yahoo Map Ajax permet aux développeurs d’intégrer des cartes au sein de leur site web en utilisant le DHTML et le javascript. Ces cartes sont totalement embarquées et paramétrables via le langage javascript.

Un ID (une clé) d’authentification est requis pour pouvoir utiliser l’api Yahoo map. Pour récupérer une clé d’authentification (application ID), rendez-vous à cette adresse.

Affichage d’une carte avec Yahoo! Map

Une fois votre clé récupérée, vous pouvez intégrer une carte sur votre site avec l’api Yahoo map.
Toutes les classes et méthodes nécessaires au fonctionnement de l’api sont disponibles dans votre application en incluant la librairie Yahoo Map Ajax dans vos pages web. C’est ici que l’on utilise la clé d’authentification (ID).

On nomme un div par son id (ici map) qui contiendra la carte. Par défaut, la carte prendra la taille du div.

code d'appel à yahoo map

Pour un premier appel (de base) avec l’api Yahoo map en centrant la carte sur Paris, on obtient ceci:

Pour obtenir une clé google map, vous devez au préalable disposer d’un compte google.

Une fois votre compte créé, vous pourrez alors faire une demande de clé google map. Vous serez invité(e) à accepter les conditions générales d’utilisation puis à saisir l’url du site pour lequel la clé google sera utilisée.

Le code généré par google est à insérer dans l’entête de chaque page de votre site qui utilisera l’api google map:

appel à l'api google map

Après avoir récupéré une clé d’authentification et avoir fait notre premier appel à l’api google map, nous allons maintenant ajouter deux éléments sur la carte, à savoir:

• Les panneaux de contrôles (zoom et types de vues)
• Un marker personnalisé centré sur Brest avec son infobulle

Le code javascript demeure très similaire au précédent. Nous allons juste ajouter les panneaux de contrôles avec 2 lignes de code et une fonction qui se chargera de créer un marker.

A noter qu’en règle générale, on ajoute une condition qui englobe le code javascript. Cette condition, non intégrée ici, s’occupe de vérifier si le navigateur est capable d’afficher une carte Google Map.

Elle s’écrit de la manière suivante : if (GBrowserIsCompatible())

Ajout d’un marker sur la map

Dans ce code exmple, les expressions qui apparaissent en orange représentent des méthodes ou des classes de l’api Google Map.

<div id="mapG2" style="width: 630px; height: 350px;"></div>
<script type="text/javascript">

var gicons = [];
var infobulle;
var markerMember;

function demo2() {
  var address = 'Brest France';
  geocoder = new GClientGeocoder();
  z = 10;
  geocoder.getLatLng( address, function(point) {
    if (!point) {
      alert("- "+address+" n'existe pas");
    }
    else {
      var a =  point.lat();
      var b =  point.lng();
      initialize2(address,a,b,z);
    }
  });
}

function initialize2(address,a,b,z) {
  map = new GMap2(document.getElementById('mapG2'));
  map.addControl(new GLargeMapControl3D());
  map.addControl(new GMenuMapTypeControl());
  map.checkResize();
  gicons[0] = new GIcon(G_DEFAULT_ICON, "https://www.weboblog.fr/flag_blue.png");
  gicons[0].iconSize = new GSize(16,16);
  gicons[0].shadow="";
  gicons[0].iconAnchor = new GPoint(9,16);
  gicons[0].infoWindowAnchor = new GPoint(9,9);

  map.setCenter(new GLatLng(a,b), z);
  if(address!=''){
    var geocoder = new GClientGeocoder();
    geocoder.getLatLng(address, function(point){ map.setCenter(point,z); });
}
infobulle  = '<table width="200px" border="0"  height="60px"><tr>';
infobulle += '<td width="70px" align="left" valign="top">';
infobulle += '<img src="https://www.weboblog.fr/package_network.png" /></td>';
infobulle += '<td align="left" valign="top">';
infobulle += '<p style=" font-family:Tahoma; font-size:10px; color: #8080ff;">';
infobulle += '<b><u>Point de recherche</u> :</b><br /> '+address+'<br />';
infobulle += '<b>Latitude</b>: '+a+'<br />';
infobulle += '<b>Longitude</b>: '+b+'</p></td></tr></table>';
markerMember = createMarker(new GLatLng(a,b),infobulle,gicons[0]); // Ajout du marqueur
map.addOverlay(markerMember);
}	

function createMarker(point,html,icon){
  var marker = new GMarker(point,icon);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
} 

demo2();

</script>

On obtient alors cette carte avec les zoom et le choix du type de vues disponibles. En cliquant sur le marker, l’infobulle apparaît. Il est possible de déclencher l’ouverture de l’infobulle en fonction d’autres événements javascript (onmouseover, ondragdrop, …).

Le contenu de l’infobulle est libre, il s’agit de simple code html.