English versionGOOGLE API - Lotus Notes et Google Maps
Google Maps est un service Web de cartographie accessible en français à l'adresse http://maps.google.fr
Google fourni une API permettant de personnaliser cette carte. On peut ainsi ajouter ces propres points comme avec Google Earth.
Définition des étapes pour interfacer Lotus Notes et Google Maps
L'intégration de Google Maps dans Lotus Notes peut se découper en trois étapes :
Etape 1 : Clé API Google Maps
La clé permettant d'utiliser l'API Google Maps est limitée à une utilisation depuis une URL à définir. Seules les éléments directement accessibles depuis le "répertoire" spécifié dans l'URL permettent d'afficher la carte. Il faut donc faire très attention au choix de l'URL. Heureusement, en cas d'erreur il est toujours possible d'obtenir une nouvelle clé.
Pour obtenir une clé, rendez vous sur la page http://www.google.com/apis/maps/
Etape 2 : Création de la source de données
Ayant besoin des mêmes informations que pour l'exemple de Google Earth, je me baserai sur le même masque pour les documents à représenter.
De plus, le traitement d'extraction des données XML est gérée en javascript dans la page. On peut donc utiliser la même vue que pour Google Earth.
Création d'une vue XML pour Google Maps
Tous les formats XML peuvent être utilisés pour être interfacés avec Google Maps du moment que l'on puisse extraire la longitude et la titude du point à représenter. Dans cet exemple j'ai choisi comme format :
La formule de colonne de la vue dédiée à Google Maps sera donc :
Il faut aussi créer un masque de vue afin de déclarer l'entête et le pied de page du fichier XML.
Etape 3 : Création de la page d'affichage de la carte et des points
Il faut maintenant créer la page web qui permettra d'afficher la carte Google Maps avec les points correspondant à la position des documents. Comme indiqué précédemment, j'utilise une "Page" pour déclarer mon code mais on peut aussi utiliser un agent ou un document.
Le code minimal pour afficher la carte sans les points :
Il va maintenant falloir ajouter les points sur la carte. On va utiliser la fonction Google "GDownloadUrl" pour récupérer les données de la vue XML
On peut remarquer les deux appels différents en javascript pour extraire les données du fichier XML :
On va donc déclarer une nouvelle fonction Javascript permettant de gérer la déclaration du point avec ces évènements associés :On remplace alors l'appel var marker = new GMarker(point); par var marker = createMarker(point,title, desc);
Un exemple complet est accessible à l'adresse : http://free.dominoserver.de/it/dominoweb.nsf/googlemaps
L'API Google Maps offre évidemment beaucoup d'autres fonctionnalités que je n'ai pas décrites ici. Je vous invite à aller lire la documentation de l'API.
Google fourni une API permettant de personnaliser cette carte. On peut ainsi ajouter ces propres points comme avec Google Earth.Définition des étapes pour interfacer Lotus Notes et Google Maps
L'intégration de Google Maps dans Lotus Notes peut se découper en trois étapes :
- Obtention d'une clé API Google Maps
- Création de la source de données définissant les points à afficher (position, description)
- Création d'une page web affichant la carte Google Maps ainsi que les points
Etape 1 : Clé API Google Maps
La clé permettant d'utiliser l'API Google Maps est limitée à une utilisation depuis une URL à définir. Seules les éléments directement accessibles depuis le "répertoire" spécifié dans l'URL permettent d'afficher la carte. Il faut donc faire très attention au choix de l'URL. Heureusement, en cas d'erreur il est toujours possible d'obtenir une nouvelle clé.
- Si vous souhaitez définir l'appel à la carte depuis une page ou un agent il faudra spécifier l'URL permettant d'accèder à la base, par exemple http://www.acme.com/sample.nsf/
- Par contre si vous souhaitez utiliser la carte depuis un document il ne faudra pas oublier d'ajouter la vue dans l'URL. Pour ne pas être trop limité je vous conseille d'utiliser la vue générique Lotus Notes "0", soit une url du type http://www.acme.com/sample/0/
Pour obtenir une clé, rendez vous sur la page http://www.google.com/apis/maps/
Etape 2 : Création de la source de données
Ayant besoin des mêmes informations que pour l'exemple de Google Earth, je me baserai sur le même masque pour les documents à représenter.
De plus, le traitement d'extraction des données XML est gérée en javascript dans la page. On peut donc utiliser la même vue que pour Google Earth.
Création d'une vue XML pour Google Maps
Tous les formats XML peuvent être utilisés pour être interfacés avec Google Maps du moment que l'on puisse extraire la longitude et la titude du point à représenter. Dans cet exemple j'ai choisi comme format :
<markers>
<marker lat="latitude" long="longitude" title="titre">
<description><![CDATA[description]]></description>
</marker>
</markers>
La formule de colonne de la vue dédiée à Google Maps sera donc :
"<marker lat=\"" + latitude + "\" long=\"" + longitude + "\" title=\"" + titre + "\"><description><![CDATA[" + description + "]]></description></marker>"
Pour rappel, il faut cocher l'option "Traiter contenu comme du code HTML" dans les options de la vue.Il faut aussi créer un masque de vue afin de déclarer l'entête et le pied de page du fichier XML.
- On doit nommer le masque "$$ViewTemplate For <nom de la vue Google Maps>".
- Le masque doit être déclaré avec un type de contenu Autre:text/xml (depuis le second onglet des options de masque).
- Insérer les lignes suivantes : <?xml version="1.0" encoding="ISO-8859-1" ?>
<markers> - Ajouter une vue Intégrée en spécifiant comme type d'affichage : A l'aide du code HTML
- Insérer la ligne suivante : </markers>
Etape 3 : Création de la page d'affichage de la carte et des points
Il faut maintenant créer la page web qui permettra d'afficher la carte Google Maps avec les points correspondant à la position des documents. Comme indiqué précédemment, j'utilise une "Page" pour déclarer mon code mais on peut aussi utiliser un agent ou un document.
Le code minimal pour afficher la carte sans les points :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=MaCleAPIGoogleMaps"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(27.994401,13.164063),1, G_HYBRID_MAP );
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Il va maintenant falloir ajouter les points sur la carte. On va utiliser la fonction Google "GDownloadUrl" pour récupérer les données de la vue XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=MaCleAPIGoogleMaps"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(27.994401,13.164063),1, G_HYBRID_MAP );
GDownloadUrl("googlemaps.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latitude = parseFloat(markers[i].getAttribute("lat"));
var longitude = parseFloat(markers[i].getAttribute("long"));
var title = markers[i].getAttribute("title");
var desc =
markers[i].getElementsByTagName("description")[0].firstChild.nodeValue;
var point = new GLatLng(latitude,longitude);
var marker = new GMarker(point);
map.addOverlay(marker);
}
});
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
On peut remarquer les deux appels différents en javascript pour extraire les données du fichier XML :
- var latitude = parseFloat(markers[i].getAttribute("lat"));
Permet d'extraire la valeur d'un attribut de tag XML - var desc = markers[i].getElementsByTagName("description")[0]
.firstChild.nodeValue;
Permet d'extraire la donnée déclarée entre deux tags XML.
On va donc déclarer une nouvelle fonction Javascript permettant de gérer la déclaration du point avec ces évènements associés :
function createMarker(point,title, desc ) {
var bulle = "<h3>" + title + "</h3><p>" + desc +"</p>";
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
map.setCenter(point,14, G_HYBRID_MAP );
marker.openInfoWindowHtml(bulle);
});
return marker;
}Un exemple complet est accessible à l'adresse : http://free.dominoserver.de/it/dominoweb.nsf/googlemaps
L'API Google Maps offre évidemment beaucoup d'autres fonctionnalités que je n'ai pas décrites ici. Je vous invite à aller lire la documentation de l'API.
posté par Philippe GAUVIN le lundi, juin 05, 2006
0 Commentaires:
Enregistrer un commentaire
Lien vers ce message:
Créer un lien
<< Home