Kml Kmz
Utilisation du fichier KML pour insérer une carte sur un site internet personnel.
Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
Dans cet exemple, nous allons :
Pour créer votre carte personnelle, allez sur http://maps.google.fr/, créez votre compte Google si nécessaire (Gratuit), puis cliquez sur l'onglet "Mes Cartes", et enfin, sur le bouton "Créer une nouvelle carte".
Vous trouverez à cette adresse : http://maps.google.ca/intl/fr/help/maps/userguide/index.html toutes les informations nécessaires pour la création et la personnalisation de votre carte Google Maps.
Voici la copie d'écran de la carte créée spécialement pour ce tutoriel, via l'onglet "Mes Cartes" de maps.google.fr et intitulée : Tourisme en Touraine et ses environs.
Sur votre carte personnelle, cliquez sur le lien "Afficher dans Google Earth" [1].
Une nouvelle fenêtre intitulée "Téléchargement de fichier" s'ouvre, vous proposant d'enregistrer ou de télécharger un fichier portant le nom de votre carte suivi de .kml.
Choisissez l'option enregitrer sur votre disque dur, puis ouvrez ce fichier.
Ouvrez le avec votre éditeur de texte préféré. Son contenu ressemble à ceci :
<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://earth.google.com/kml/2.2"> <Document> <name>Tourisme en Touraine et ses environs</name> <description><![CDATA[Insérer cette carte dans une page web : Utilisation du fichier .kml généré automatiquement lorsque l'on créé une carte à l'aide de l'onglet "Mes cartes" de Google Maps, pour insérer ces données dans une carte située sur une de vos pages web.]]></description> <NetworkLink> <name>Tourisme en Touraine et ses environs</name> <Link> <href>http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&oe=UTF8&msa=0&msid=115115239782170342035.00045c5d8b68ccf0d0247&output=kml</href> </Link> </NetworkLink> </Document> </kml>
Copiez l'adresse contenue entre les balises <href></href>, puis remplacez les & par &
Ce qui nous donne au final :
http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&oe=UTF8&msa=0&msid=115115239782170342035.00045c5d8b68ccf0d0247&output=kml
En reportant cette adresse dans la barre d'adresse de votre navigateur, vous allez pouvoir visualiser le contenu du fichier .KML spécifique à votre carte.
Sans rentrer dans les détails, on peut y apercevoir les paramétres relatifs à chaque :
Contenu du fichier .KML
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<name>Tourisme en Touraine et ses environs</name>
<description><![CDATA[Insérer cette carte dans une page web : Utilisation du fichier .kml généré automatiquement lorsque l'on créé une carte à l'aide de l'onglet "Mes cartes" de Google Maps, pour insérer ces données dans une carte située sur une de vos pages web.]]></description>
<Style id="style42">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style31">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style9">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style43">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style46">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style44">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style16">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/museum-historical.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style39">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/museum-historical.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style52">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/museum-historical.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style11">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/bar.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style29">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style53">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/bridge.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style17">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style28">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style38">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/home.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style19">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style50">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style30">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style18">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style13">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/donjon.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style41">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/monument.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style3">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style12">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/dam.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style7">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/dam.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style22">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/dam.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style37">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/dam.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style10">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style54">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/monument.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style32">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style33">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style36">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style27">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style1">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style35">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style4">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style40">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style47">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/donjon.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style25">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style15">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style20">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style5">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style23">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/zoo.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style26">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style24">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/donjon.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style14">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/castle.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style48">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style8">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/horseriding.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style34">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style21">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style49">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style2">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style51">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style45">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style6">
<IconStyle>
<Icon>
<href>http://www.touraineverte.com/map-icons-collection-2.0/icons/cathedrale.png</href>
</Icon>
</IconStyle>
</Style>
<Placemark>
<name>Château de Villandry</name>
<description><![CDATA[]]></description>
<styleUrl>#style42</styleUrl>
<Point>
<coordinates>0.514480,47.340660,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château d'Ussé</name>
<description><![CDATA[]]></description>
<styleUrl>#style31</styleUrl>
<Point>
<coordinates>0.291352,47.249828,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Langeais</name>
<description><![CDATA[]]></description>
<styleUrl>#style9</styleUrl>
<Point>
<coordinates>0.405904,47.324650,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Luynes</name>
<description><![CDATA[]]></description>
<styleUrl>#style43</styleUrl>
<Point>
<coordinates>0.553404,47.386402,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Tours</name>
<description><![CDATA[]]></description>
<styleUrl>#style46</styleUrl>
<Point>
<coordinates>0.693582,47.397095,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Cathédrale Saint-Gatien de Tours</name>
<description><![CDATA[]]></description>
<styleUrl>#style44</styleUrl>
<Point>
<coordinates>0.694440,47.395615,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Musée du Compagnonage</name>
<description><![CDATA[]]></description>
<styleUrl>#style16</styleUrl>
<Point>
<coordinates>0.686699,47.396152,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Musée du Gémmail</name>
<description><![CDATA[]]></description>
<styleUrl>#style39</styleUrl>
<Point>
<coordinates>0.680830,47.395012,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Musée de l'hôtel Gouin</name>
<description><![CDATA[]]></description>
<styleUrl>#style52</styleUrl>
<Point>
<coordinates>0.684704,47.395370,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Place Plumereau</name>
<description><![CDATA[]]></description>
<styleUrl>#style11</styleUrl>
<Point>
<coordinates>0.681737,47.394421,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Basilique Saint-Martin</name>
<description><![CDATA[]]></description>
<styleUrl>#style29</styleUrl>
<Point>
<coordinates>0.682966,47.392838,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Le pont Wilson</name>
<description><![CDATA[]]></description>
<styleUrl>#style53</styleUrl>
<Point>
<coordinates>0.685240,47.399040,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Prieuré de Saint-Cosme</name>
<description><![CDATA[]]></description>
<styleUrl>#style17</styleUrl>
<Point>
<coordinates>0.651144,47.389584,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château d'Amboise</name>
<description><![CDATA[]]></description>
<styleUrl>#style28</styleUrl>
<Point>
<coordinates>0.986715,47.413338,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Le Clos Lucé</name>
<description><![CDATA[]]></description>
<styleUrl>#style38</styleUrl>
<Point>
<coordinates>0.992026,47.410236,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château d'Azay le Rideau</name>
<description><![CDATA[]]></description>
<styleUrl>#style19</styleUrl>
<Point>
<coordinates>0.465868,47.258995,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Chinon</name>
<description><![CDATA[]]></description>
<styleUrl>#style50</styleUrl>
<Point>
<coordinates>0.236056,47.168179,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Collégiale Saint-Ours</name>
<description><![CDATA[]]></description>
<styleUrl>#style30</styleUrl>
<Point>
<coordinates>0.998737,47.126526,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Tour Saint-Antoine</name>
<description><![CDATA[]]></description>
<styleUrl>#style18</styleUrl>
<Point>
<coordinates>0.998645,47.129105,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Donjon de Loches</name>
<description><![CDATA[]]></description>
<styleUrl>#style13</styleUrl>
<Point>
<coordinates>0.996682,47.124783,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Aqueduc Gallo-Romain</name>
<description><![CDATA[]]></description>
<styleUrl>#style41</styleUrl>
<Point>
<coordinates>0.568660,47.398006,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Chenonceaux</name>
<description><![CDATA[]]></description>
<styleUrl>#style3</styleUrl>
<Point>
<coordinates>1.070480,47.324570,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Barrage à Aiguilles</name>
<description><![CDATA[]]></description>
<styleUrl>#style12</styleUrl>
<Point>
<coordinates>1.044195,47.325371,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Barrage à Aiguilles</name>
<description><![CDATA[]]></description>
<styleUrl>#style7</styleUrl>
<Point>
<coordinates>0.995293,47.330112,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Barrage à Aiguilles</name>
<description><![CDATA[]]></description>
<styleUrl>#style22</styleUrl>
<Point>
<coordinates>0.944717,47.334488,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Barrage à Aiguilles</name>
<description><![CDATA[]]></description>
<styleUrl>#style37</styleUrl>
<Point>
<coordinates>0.894828,47.345539,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Chambord</name>
<description><![CDATA[]]></description>
<styleUrl>#style10</styleUrl>
<Point>
<coordinates>1.517100,47.616116,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Pagode de Chanteloup</name>
<description><![CDATA[]]></description>
<styleUrl>#style54</styleUrl>
<Point>
<coordinates>0.970058,47.391056,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Parc des minis châteaux</name>
<description><![CDATA[]]></description>
<styleUrl>#style32</styleUrl>
<Point>
<coordinates>1.002964,47.391918,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château du Rivau</name>
<description><![CDATA[]]></description>
<styleUrl>#style33</styleUrl>
<Point>
<coordinates>0.323410,47.103359,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Valmer</name>
<description><![CDATA[]]></description>
<styleUrl>#style36</styleUrl>
<Point>
<coordinates>0.887060,47.457527,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de la Bourdaisière</name>
<description><![CDATA[]]></description>
<styleUrl>#style27</styleUrl>
<Point>
<coordinates>0.839789,47.369522,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Montpoupon</name>
<description><![CDATA[]]></description>
<styleUrl>#style1</styleUrl>
<Point>
<coordinates>1.141634,47.252968,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Champchevrier</name>
<description><![CDATA[]]></description>
<styleUrl>#style35</styleUrl>
<Point>
<coordinates>0.390980,47.443565,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Gizeux</name>
<description><![CDATA[]]></description>
<styleUrl>#style4</styleUrl>
<Point>
<coordinates>0.206058,47.390671,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Montrésor</name>
<description><![CDATA[]]></description>
<styleUrl>#style40</styleUrl>
<Point>
<coordinates>1.201184,47.155758,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Donjon de Montbazon</name>
<description><![CDATA[]]></description>
<styleUrl>#style47</styleUrl>
<Point>
<coordinates>0.713300,47.285545,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Candé</name>
<description><![CDATA[]]></description>
<styleUrl>#style25</styleUrl>
<Point>
<coordinates>0.664281,47.296822,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de la Chatonnière</name>
<description><![CDATA[]]></description>
<styleUrl>#style15</styleUrl>
<Point>
<coordinates>0.421574,47.279991,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château du Bridoré</name>
<description><![CDATA[]]></description>
<styleUrl>#style20</styleUrl>
<Point>
<coordinates>1.081821,47.024578,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Nitray</name>
<description><![CDATA[]]></description>
<styleUrl>#style5</styleUrl>
<Point>
<coordinates>0.899876,47.342831,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Zoo Parc de Beauval</name>
<description><![CDATA[]]></description>
<styleUrl>#style23</styleUrl>
<Point>
<coordinates>1.352971,47.247135,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Saint-Aignan</name>
<description><![CDATA[]]></description>
<styleUrl>#style26</styleUrl>
<Point>
<coordinates>1.374176,47.269608,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Donjon de Montrichard</name>
<description><![CDATA[]]></description>
<styleUrl>#style24</styleUrl>
<Point>
<coordinates>1.186261,47.343655,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Château de Montsoreau</name>
<description><![CDATA[]]></description>
<styleUrl>#style14</styleUrl>
<Point>
<coordinates>0.062302,47.215584,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Abbaye de Fontevraud</name>
<description><![CDATA[]]></description>
<styleUrl>#style48</styleUrl>
<Point>
<coordinates>0.051777,47.181190,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Le Cadre Noir de Saumur</name>
<description><![CDATA[<div dir="ltr">Le grand manège des Ecuyers</div>]]></description>
<styleUrl>#style8</styleUrl>
<Point>
<coordinates>-0.133424,47.263535,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Collégiale Saint-Georges</name>
<description><![CDATA[]]></description>
<styleUrl>#style34</styleUrl>
<Point>
<coordinates>0.341139,46.956955,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Chapelle Saint-Louis</name>
<description><![CDATA[]]></description>
<styleUrl>#style21</styleUrl>
<Point>
<coordinates>0.317933,47.066654,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Collégiale Saint-Martin</name>
<description><![CDATA[]]></description>
<styleUrl>#style49</styleUrl>
<Point>
<coordinates>0.073847,47.211197,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>La Chartreuse du Liget</name>
<description><![CDATA[]]></description>
<styleUrl>#style2</styleUrl>
<Point>
<coordinates>1.129586,47.144066,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>La Corroirie du Liget</name>
<description><![CDATA[]]></description>
<styleUrl>#style51</styleUrl>
<Point>
<coordinates>1.139789,47.151123,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Piéta de Jéhan Fouquet</name>
<description><![CDATA[]]></description>
<styleUrl>#style45</styleUrl>
<Point>
<coordinates>1.298307,47.136562,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Eglise Notre Dame</name>
<description><![CDATA[]]></description>
<styleUrl>#style6</styleUrl>
<Point>
<coordinates>0.323088,47.012413,0.000000</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Nous allons utiliser l'exemple donné dans la documentation de Google Maps :
http://code.google.com/apis/maps/documentation/services.html#XML_Overlays
Pour adapter cet exemple à vos besoins, il vous suffit :
var url = "Mettre ici le lien que vous avez obtenu dans l'ETAPE 2";
Exemple :
var url = "http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&oe=UTF8&msa=0&msid=115115239782170342035.00045c5d8b68ccf0d0247&output=kml";
Ensuite, on optimise automatiquement l'affichage de la carte, pour que l'ensemble des informations contenues dans le fichier KML soient visibles sur la carte, grâce au code suivant :
geoXml.gotoDefaultViewport(maCarte);
<?xml version="1.0" encoding="utf-8"?>
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte ma première carte</title>
<!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=Inserez_Votre_Clef_API_Ici"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Chargement du module "maps" dans sa version "2.x" */
google.load("maps", "2.x",{"other_params":"sensor=false"});
var maCarte;
var geoXml;
var url= "http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&oe=UTF8&msa=0&msid=115115239782170342035.00045c5d8b68ccf0d0247&output=kml";
/* Fonction goXML() */
function goXML(){
/* ... fichierKML : Fichier au format KML que l'on charge pour l'afficher sur la carte ... */
geoXml = new google.maps.GeoXml(url, initialize);
}
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (google.maps.BrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));
/* ... Affiche les boutons et contrôle identiques à ceux que l'on trouve sur http://maps.google.fr ... */
maCarte.setUIToDefault();
/* ... Optimise l'affichage de la carte pour que toutes les données du fichier KML soient visibles dans la carte nommée "maCarte" ... */
geoXml.gotoDefaultViewport(maCarte);
/* ... On ajoute les données du fichier 'fichierKML' sur la carte nommée 'maCarte' ... */
maCarte.addOverlay(geoXml);
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}else{
/* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
google.setOnLoadCallback(goXML);
//]]>
</script>
</head>
<body>
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<!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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte ma première carte</title>
<!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
<script src="http://maps.google.com/maps?file=api&v=2.x&key=Inserez_Votre_Clef_API_Ici&sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var geoXml;
var maCarte;
var url = "http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&oe=UTF8&msa=0&msid=115115239782170342035.00045c5d8b68ccf0d0247&output=kml";
/* Fonction goXML() */
function goXML(){
/* ... fichierKML : Fichier au format KML que l'on charge pour l'afficher sur la carte ... */
geoXml = new GGeoXml(url, initialize);
}
/* Fonction initialize() */
function initialize() {
/* Si le navigateur est compatible avec l'API de Google Maps ... */
if (GBrowserIsCompatible()) {
/* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));
/* ... Optimise l'affichage de la carte pour que toutes les données du fichier KML soient visibles dans la carte nommée "maCarte" ... */
geoXml.gotoDefaultViewport(maCarte);
/* ... Affiche les boutons et contrôle identiques à ceux que l'on trouve sur http://maps.google.fr ... */
maCarte.setUIToDefault();
/* ... On ajoute les données du fichier 'fichierKML' sur la carte nommée 'maCarte' ... */
maCarte.addOverlay(geoXml);
/* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
}else{
/* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
}
}
//]]>
</script>
</head>
<!-- Une fois la page chargée la fonction initialize() est exécutée. -->
<!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
<body onload="goXML()" onunload="GUnload()">
<!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
<!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
<!-- Elle fera donc 100% de large et 400 pixels de haut. -->
<div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
<!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il n'est pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>
</body>
</html>
Une autre méthode possible, est d'enregistrer le fichier .KML, obtenu à l'ETAPE-2, puis de le transférer sur votre serveur, et de modifier la variable url, en ligne <strong>15</strong> ou <strong>14</strong>, comme suit :
var url = "http://www.mon-site-perso.fr/mon-repertoire/mon-fichier.kml";
Ou si vous utilisez Google Ajax API Loader :
var url = "http://www.mon-site-perso.fr/mon-repertoire/mon-fichier.kml";
