Cette page a été traduite par l'API Cloud Translation.

Utiliser KML dans Google Mashup Editor

Valery Hronusov, développeur KML, université d'État de Perm, Russie

Introduction

Google Mashup Editor (GME) est l'un des outils les plus attendus et les plus utiles pour les développeurs d'applications composites. GME aide les développeurs à créer et à modifier des composants dynamiques sur des pages Web, tels que des cartes, des tableaux, des listes et d'autres éléments, en fonction des connexions aux données externes. Ces éléments peuvent ensuite être inclus dans des pages Web et des blogs à l'aide d'un iFrame.

Ce tutoriel vous explique comment intégrer un fichier KML à une carte créée avec GME.

Mes premières impressions dans Google Mashup Editor

Il offre la plus grande simplicité, avec une interface claire et distincte, comme la majorité des produits Google.
Il possède un index de projet pratique avec une collection constamment croissante d'exemples de code, ainsi que le code de l'auteur.
Cela permet de stocker facilement des ressources supplémentaires pour le projet (telles que des fichiers image).
Il est doté d'un débogueur XML facile à utiliser.
Il contient de nombreux exemples d'applications faciles à utiliser.

GME pour les développeurs KML

Avant l'avènement d'Internet, les données spatiales étaient difficiles à partager. Toutefois, avec le développement d'Internet, les applications de cartographie sont devenues une méthode standard de partage des données des systèmes d'informations géographiques (SIG) avec le monde entier. KML devient une norme pour la présentation et l'échange des données SIG, car il est compact, facile à développer et compatible avec des applications populaires telles que Google Earth et Google Maps.

Jusqu'à récemment, le processus de création et de modification de pages à l'aide de JavaScript constituait un problème de taille pour les développeurs KML. Un grand nombre d'étapes supplémentaires ont été nécessaires pour créer une application composite et la déboguer. GME permet de créer très rapidement une application composite basée sur KML à partir de quelques composants de base. Le processus de création ne nécessite pas de connaissances particulières du HTML ou de JavaScript. Les exemples de projets GME fournissent suffisamment de ressources pour démarrer.

Dans l'exemple suivant, je vais utiliser un fichier KML pointant vers la collection de photos prises au cours de l'expédition Pict Earth aux États-Unis.

Voici un instantané de l'application composite Maps Earth:

Instantané de l'application composite Pict Earth

Voici la procédure à suivre pour intégrer un fichier KML dans un projet GME à l'aide de l'API Google Maps:

Étape 1 : Sélectionnez le fichier KML
Étape 2 : Créez un projet GME
Étape 3 : Créez une fonction permettant d'ajouter le KML
Étape 4 : Ajoutez une carte
Étape 5 : Testez l'application composite
:

Étape 1: Sélectionnez le fichier KML

Sélectionnez le fichier KML que vous souhaitez ajouter à votre carte. Il peut s'agir de tout élément dont les fonctionnalités sont compatibles avec Google Maps. Elle doit être hébergée sur un serveur accessible au public.

Étape 2: Créez un projet GME

Créez un projet GME vide.

Voici à quoi ressemble un projet GME vide:

Ajoutez un titre et un nom pour votre fonction.

<gm:page title="Missions Pict Earth" authentication="false" onload="kmlPE()">
</gm:page>

Étape 3: Créez une fonction permettant d'ajouter le fichier KML

Créez une fonction JavaScript avec le chemin d'accès au fichier KML à ajouter à la carte.

<script>
  function kmlPE()
  {
    <!-- Get map -->
    var myMap = google.mashups.getObjectById('map').getMap();
    <!-- Get KML -->
    var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");
    <!--Place KML on Map -->
    myMap.addOverlay(geoXml);
    <!--Set zoom on double click -->
    myMap.enableDoubleClickZoom();
  }
</script>

Étape 4: Ajoutez une carte

Ajoutez la carte et les paramètres.

<gm:map id="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>

Étape 5: Testez l'application composite.

Appuyez sur le bouton Test (F4).

Il s'agit d'une image illustrant l'application composite Pict Earth testée dans le sandbox.

Application composite Pict Earth en mode sandbox

Nous pouvons maintenant vérifier le texte de l'application et voir le premier résultat. Nous pouvons ajouter un titre et des liens, puis le tester à nouveau.

Étape 6: Publiez l'application composite

Définissez le nom du projet, puis publiez-le. Vous obtiendrez ainsi un lien permanent vers votre application composite, que vous pourrez utiliser pour l'intégrer à des pages Web. Dans cet exemple, il s'agit du lien vers la page d'accueil du projet GME. Vous pouvez également voir le code source du projet.

Étape 7: Ajouter l'application composite à une page Web

Ajoutez l'application composite à une page Web à l'aide d'un iFrame. Par exemple, pour insérer l'exemple de projet, ajoutez ce qui suit:

<iframe style="WIDTH: 439px; HEIGHT: 491px" src="http://pemissions.googlemashups.com/" frameborder="0"></iframe>

Voici des exemples d'application composite dans une page Web et dans un blog.

Vous pouvez également ajouter votre code Google Analytics au projet, ce qui vous permettra d'effectuer le suivi des statistiques concernant les visiteurs de votre page. Voici le script simple à ajouter:

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">uacct = "youraccountnumber";urchinTracker();</script>

Étape 8: Placez l'instance dans la galerie GME

Publiez votre application composite dans la GME Mashup Gallery. Cela permettra aux autres utilisateurs d'afficher votre application composite.

Pour en savoir plus, consultez ce document :

Consultez le guide de démarrage de l'éditeur Google Mashup, qui décrit en détail le processus de création d'applications composites. Consultez également la liste des tags pour obtenir une brève description de tous les tags gm et pour consulter des exemples.

Code :

Voici l'intégralité du code permettant d'utiliser le KML Pict Earth dans GME:

<gm:page title="Pict Earth missions" authenticate="false" onload="kmlPE()>

<!-- Map definition -->
<gm:mapid="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>

<script>
  function kmlPE(){

    <!-- Get map -->
    var myMap = google.mashups.getObjectById('map').getMap();

    <!-- Get KML -->
    var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");

    <!-- Place KML on Map -->
    myMap.addOverlay(geoXml);

    <!-- Set zoom on double click -->
    myMap.enableDoubleClickZoom();
  }
</script>
</gm:page>

Étape suivante

Une fois que vous avez publié votre application composite, vous pouvez utiliser le fichier KML qu'il contient en tant que paramètre à inclure dans une autre application, ou le charger directement en tant que carte. Par exemple, la page suivante:

http://param.googlemashups.com

est une application composite GME. Vous pouvez directement référencer un fichier KML dans l'application composite en ajoutant kml= en tant que paramètre dans l'URL, comme suit:

http://param.googlemashups.com/?kml=http://mapgadgets.googlepages.com/cta.kml

Vous pouvez également créer un gadget à partir de votre projet. Une fois que vous avez envoyé le gadget, accédez au menu Fichier, cliquez sur Envoyer le gadget et suivez les instructions. Vous pourrez ainsi ajouter facilement votre application à votre page d'accueil personnalisée Google et à d'autres pages Web, et la partager avec d'autres utilisateurs.