Utiliser KML dans Google Mashup Editor
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Valery Hronusov, développeur KML,
Perm State University, Russie
Introduction
Google Mashup Editor (GME) est l'un des outils les plus attendus et les plus utiles pour les développeurs de mashups. GME aide les développeurs à créer et à modifier des composants dynamiques dans les pages Web, tels que des cartes, des tableaux, des listes et d'autres éléments, en fonction des connexions avec des 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 dans une carte créée avec GME.
Mes premières impressions sur Google Mashup Editor
- Comme la plupart des produits Google, elle est très simple et possède une interface claire et distincte.
- Il dispose d'un index de projet pratique avec une collection d'exemples de code en constante augmentation, ainsi que le code de l'auteur.
- Il permet de stocker facilement des ressources supplémentaires dans le projet (telles que des fichiers image).
- Il dispose d'un débogueur XML facile à utiliser.
- Il propose de nombreux exemples d'applications faciles à utiliser.
GME pour les développeurs KML
Avant l'avènement d'Internet, il était traditionnellement difficile de partager des données spatiales. Cependant, avec le développement d'Internet, les applications de cartographie sont devenues un moyen standard de partager facilement des données de systèmes d'information géographique (SIG) avec le monde entier. Le format KML est en train de devenir une norme pour la présentation et l'échange de 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, la création et la modification de pages basées sur JavaScript posaient un problème majeur aux développeurs KML. Il fallait un grand nombre d'étapes supplémentaires pour créer un mashup et le déboguer. GME permet de créer très rapidement un mashup basé sur KML à partir de quelques composants de base. Le processus de création ne nécessite pas de connaissances spécifiques en HTML ou JavaScript. Les exemples de projets GME fournissent suffisamment d'informations pour vous aider à démarrer.
Dans l'exemple suivant, j'utiliserai un fichier KML qui pointe vers la collection de photos prises lors des vols Pict Earth USA.
Voici un instantané du mashup de cartes Pict Earth :
Voici comment 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 pour ajouter le fichier KML
Étape 4 : Ajoutez une carte
Étape 5 : Testez le mashup
Étape 6 : Publiez le mashup
Étape 7 : Ajoutez le mashup à une page Web
Étape 8 : Ajoutez-le à la galerie GME
Étape 1 : Sélectionnez le fichier KML
Sélectionnez le fichier KML que vous souhaitez ajouter à votre carte. Il peut s'agir de n'importe quel élément dont les fonctionnalités sont compatibles avec Google Maps. Il doit être hébergé 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" authenticate="false"
onload="kmlPE()">
</gm:page>
Étape 3 : Créez une fonction pour ajouter le 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 une carte et des paramètres.
<gm:map id="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>
Étape 5 : Testez le mashup.
Appuyez sur le bouton "Tester" (F4).
Image du mashup Pict Earth testé dans le bac à sable.
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 tester à nouveau.
Étape 6 : Publiez le mashup
Définissez le nom du projet, puis publiez-le. Vous obtiendrez ainsi un lien permanent vers votre mashup, que vous pourrez utiliser pour l'intégrer à des pages Web. En reprenant mon exemple, voici le lien vers la page d'accueil du projet GME. Vous pouvez également consulter le code source du projet.
Étape 7 : Ajouter le mashup à une page Web
Ajoutez le mashup à 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 de mashup sur une page Web et un blog.
Vous pouvez également ajouter votre code Google Analytics au projet, ce qui vous permettra de suivre les statistiques sur les personnes qui consultent 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 : Ajoutez-le à la galerie GME
Publiez votre mashup dans la galerie de mashups GME.
Les autres utilisateurs pourront alors voir votre mashup.
Consultez le Guide de démarrage de l'éditeur Google Mashup, qui présente en détail le processus de création de mashups. Consultez également la liste des balises pour obtenir une brève description de toutes les balises gm avec des exemples.
Code :
Voici le code complet pour utiliser le fichier 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 votre mashup publié, vous pouvez utiliser le fichier KML qu'il contient comme paramètre à inclure dans une autre application ou le charger directement comme carte. Par exemple, cette page :
http://param.googlemashups.com
est un mashup GME. Vous pouvez référencer directement un fichier KML dans le mashup en ajoutant kml= comme paramètre dans l'URL, comme ceci :
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 l'avez envoyé, accédez au menu "Fichier", cliquez sur "Envoyer le gadget", puis suivez les instructions. Cela vous permettra d'ajouter facilement votre application à votre page d'accueil Google personnalisée, sur d'autres pages Web et de la partager avec d'autres utilisateurs.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[null,null,["Dernière mise à jour le 2025/07/27 (UTC)."],[[["\u003cp\u003eThis tutorial demonstrates how to integrate a KML file into a Google Mashup Editor (GME) project using the Google Maps API.\u003c/p\u003e\n"],["\u003cp\u003eGME simplifies the process of creating and editing KML-based mashups, enabling developers to build dynamic map components without extensive HTML or JavaScript knowledge.\u003c/p\u003e\n"],["\u003cp\u003eThe tutorial provides a step-by-step guide, covering selecting a KML file, creating a GME project, adding a map, testing, publishing, and embedding the mashup into web pages.\u003c/p\u003e\n"],["\u003cp\u003eUsers can further enhance their mashups by adding Google Analytics tracking and submitting them to the GME Mashup Gallery for wider visibility.\u003c/p\u003e\n"],["\u003cp\u003ePublished mashups can be parameterized to dynamically load different KML files and can be converted into Gadgets for integration into Google Personalized Home Page and other web pages.\u003c/p\u003e\n"]]],[],null,["# Using KML in Google Mashup Editor\n\n*Valery Hronusov, KML Developer,\nPerm State University, Russia* \n\nIntroduction\n------------\n\n[Google\nMashup Editor](http://editor.googlemashups.com/ \"Google Mashup Editor\") (GME) is one of the most long-awaited and useful tools for mashup developers. GME helps developers create and edit dynamic components in Web pages, such as maps, tables, lists, and other elements, based on connections with external data. These elements can be then be included in Web pages and blogs using an iframe. \n\nThis tutorial will show you how to incorporate a KML file into a Map created with GME. \n\n\u003cbr /\u003e\n\n### My first impressions of Google Mashup Editor\n\n- It has the utmost simplicity, with a clean and distinct interface, like the majority of Google products.\n- It has a convenient project index with a constantly increasing collection of code examples, as well as the author's code.\n- It allows for the easy storage of additional resources to the project (such as image files).\n- It has an easy-to-use XML debugger.\n- It has lots of easy-to-use sample applications.\n\n\u003cbr /\u003e\n\n### GME for KML Developers\n\nBefore the advent of the Internet, spatial data\nwas traditionally difficult to share. However, with\nthe development of the Internet, mapping applications became a standard\nway of easily sharing Geographic Information Systems\n(GIS) data with the world. KML is becoming a standard for the\npresentation and interchange of GIS data because it is compact, easy to\ndevelop, and is supported by popular applications such as Google Earth\nand\nGoogle Maps.\n\n\nUntil recently, the process of creating and editing pages\nbased\non\nJavaScript was a large problem for KML developers. It required a large\nnumber of\nadditional steps to create a mashup and debug it. GME makes\nit\npossible to create a KML-based mashup very rapidly\nout of a few basic\ncomponents. The process of creation does not require special\nknowledge of HTML\nor JavaScript. The GME sample projects provide enough to get\nstarted.\n\n\nIn the following example, I'll be using a KML file that points\nto the\ncollection of the photographs taken during\n[Pict Earth\nUSA](http://pictearth.com/missions.html \"Pict Earth USA\") flights.\n\nThis is a snapshot of the Pict Earth maps mashup: \n\n### Here are the steps to integrate a KML file into a GME project using the\nGoogle Maps API:\n\n\u003cbr /\u003e\n\n[Step 1: Select the KML file](#Step1) \n[Step 2: Create a new GME project](#Step2) \n[Step 3: Create a function to add the KML](#Step3) \n[Step 4: Add a map](#Step4) \n[Step 5: Test the mashup](#Step5) \n[Step 6: Publish the mashup](#Step6) \n[Step 7: Add the mashup to a web page](#Step7) \n[Step 8: Put it in the GME gallery](#Step8) \n\n### Step 1: Select the KML file\n\nSelect\nthe KML file you would like to add to your Map. This can be anything\nthat has features supported in Google Maps. It must be hosted on a\npublicly available server.\n\n### Step 2: Create a New\nGME Project\n\nCreate a new blank GME project.\n\nThis is what a blank GME project looks like: \n\nAdd a\ntitle and a name for your function.\n\\\u003cgm:page title=**\"Pict Earth\nmissions\"** authenticate=\"false\" **onload=**\"**kmlPE()**\"\\\u003e \n\\\u003c/gm:page\\\u003e \n\n### Step 3: Create\na function to add the KML\n\n\nCreate a JavaScript function with the path to the KML file to be added\nto the Map. \n\n```gdscript\n\u003cscript\u003e\n function kmlPE()\n {\n \u003c!-- Get map --\u003e\n var myMap = google.mashups.getObjectById('map').getMap();\n \u003c!-- Get KML --\u003e\n var geoXml = new GGeoXml(\"http://pictearthusa.com/kml/missions.kml\");\n \u003c!--Place KML on Map --\u003e\n myMap.addOverlay(geoXml);\n \u003c!--Set zoom on double click --\u003e\n myMap.enableDoubleClickZoom();\n }\n\u003c/script\u003e\n```\n\n### Step 4: Add a Map\n\nAdd map and parameters.\n\n```actionscript-3\n\u003cgm:map id=\"map\" height=\"400px\" width=\"400px\" lat=\"32.9393\" lng=\"-117.206\" zoom=\"9\" maptypes=\"true\"/\u003e\n```\n\n### Step 5: Test the mashup.\n\nPress the Test button (F4).\n\nThis is an image of the Pict Earth mashup tested in the\nSandbox. \n\nNow we can verify the text of application and see the first result. We\ncan add a\ntitle and links and test it again.\n\n### Step 6: Publish the mashup\n\nSet the name of the project, and then publish it. This will give you a\npermanent link to your mashup, which you can use to incorporate it into\nweb pages. Using my example, this is the link to the GME project\n[home page](http://pemissions.googlemashups.com/ \"home page\"). You\ncan also see\n[source\ncode](http://pemissions.googlemashups.com/index.gml \"Source code\") of project.\n\n### Step 7: Add the mashup\nto a web page\n\nAdd the mashup to a web page using an iframe. For instance, to insert\nthe example project, add this:\n\n```css+lasso\n\u003ciframe style=\"WIDTH: 439px; HEIGHT: 491px\" src=\"http://pemissions.googlemashups.com/\" frameborder=\"0\"\u003e\u003c/iframe\u003e\n```\n\nHere are examples of the mashup in a web [page](http://spreadsheetsgis.googlepages.com/pe \"page\")\nand a [blog](http://gisplanet.blogspot.com/2007/07/pict-earth-usa-missions.html \"blog\").\n\nYou can also add your [Google\nAnalytics](http://analytics.google.com/ \"Google Analytics\") code to the project, which will allow you to track\nstatistics about who is viewing your page. Here's the simple script to\nadd it:\n\n```carbon\n\u003cscript src=\"http://www.google-analytics.com/urchin.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003euacct = \"youraccountnumber\";urchinTracker();\u003c/script\u003e\n```\n\n\u003cbr /\u003e\n\n### Step 8: Put it in the\nGME Gallery\n\nPublish your mashup to the [GME Mashup Gallery](http://gallery.googlemashups.com/).\nThis will\nallow other users to view your mashup.\n\n\u003cbr /\u003e\n\n### For more information:\n\nCheck out the\n[Google\nMashup Editor Getting Started Guide](http://editor.googlemashups.com/docs/gettingstarted.html \"Google Mashup Editor Getting Started Guide\"), which presents in\ndetail the\nprocess of creating mashups. Also, check out\nthe [list\nof tags](http://editor.googlemashups.com/docs/reference.html \"list of tags\") for a brief description of all gm tags with\n[examples](http://editor.googlemashups.com/docs/samples.html \"examples\").\n\n\u003cbr /\u003e\n\n### Code:\n\nHere is\nthe whole code for using the Pict Earth KML in GME: \n\n```gdscript\n\u003cgm:page title=\"Pict Earth missions\" authenticate=\"false\" onload=\"kmlPE()\u003e\n\n\u003c!-- Map definition --\u003e\n\u003cgm:mapid=\"map\" height=\"400px\" width=\"400px\" lat=\"32.9393\" lng=\"-117.206\" zoom=\"9\" maptypes=\"true\"/\u003e\n\n\u003cscript\u003e\n function kmlPE(){\n\n \u003c!-- Get map --\u003e\n var myMap = google.mashups.getObjectById('map').getMap();\n\n \u003c!-- Get KML --\u003e\n var geoXml = new GGeoXml(\"http://pictearthusa.com/kml/missions.kml\");\n\n \u003c!-- Place KML on Map --\u003e\n myMap.addOverlay(geoXml);\n\n \u003c!-- Set zoom on double click --\u003e\n myMap.enableDoubleClickZoom();\n }\n\u003c/script\u003e\n\u003c/gm:page\u003e\n```\n\n### What's next?\n\nOnce you've published your mashup, you can use the KML file\nin it as a\nparameter to include in another application, or loaded directly as a\nmap. For\ninstance, this page:\n[http://param.googlemashups.com](http://param.googlemashups.com/?kml=http://pictearthusa.com/kml/missions.kml \"http://param.googlemashups.com/?kml=http://pictearthusa.com/kml/missions.kml\")\n\n\u003cbr /\u003e\n\nis a GME mashup. You can directly reference a KML file to the mashup by adding kml= as a parameter in the URL, like this:\n\n\u003cbr /\u003e\n\n\u003chttp://param.googlemashups.com/?kml=http://mapgadgets.googlepages.com/cta.kml\u003e \n\nYou can also create a [Gadget](http://www.google.com/apis/gadgets/) from your project. Once you've submitted it, go to the file menu and click on Submit Gadget, and follow the directions. This will allow you to easily add your application to your [Google personalized home page](http://www.google.com/ig), on other web pages, and to share it with others.\n\n\u003cbr /\u003e"]]
