GOOGLE MAPS - FICHIER KML - MA CARTE - INSERER UNE CARTE DANS UNE SITE
PRESENTATION
Dans cet exemple, nous allons :
- Etape-1 : créer et personnaliser une carte
grâce à l'onglet "Mes Cartes" de http://maps.google.fr/,
- Etape-2 : récupérer le lien pointant
vers le fichier KML de la carte nouvellement créée,
- Etape-3 : utiliser les données du fichier KML pour les intégrer sur la carte incluse dans les pages de votre site internet personnel.
ETAPE 1 : Créer une carte personnelle sur maps.google.fr
Pour créer votre carte personnelle, allez sur http://maps.google.fr/, cliquez sur l'onglet "Mes Cartes", puis sur le bouton "Créer une nouvelle carte". Créez votre compte Google Maps si nécessaire (Gratuit).
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 : Ma carte.
ETAPE 2 : Récupérer le lien pointant vers le fichier KML de la carte nouvellement créée
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.
Son contenu ressemble à ceci :
<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://earth.google.com/kml/2.1"> <Document> <name>TOTO</name> <description><![CDATA[TOTO]]></description> <NetworkLink> <Url> <name>TOTO</name> <href>http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&msa=0&msid=115115239782170342035.000001120f1e7b0ba07b2&output=kml</href> </Url> </NetworkLink> </Document> </kml>
Copiez l'adresse ( en bleue ) 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&msa=0&msid=115115239782170342035.000001120f1e7b0ba07b2&output=kml
Notez que c'est cette adresse que nous allons utiliser dans l'étape 3.
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 :
- icône,
- polyline,
- marqueur et sa fenêtre,
- surface.
Contenu du fichier .KML :
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Document>
<name>TOTO</name>
<description><![CDATA[TOTO]]></description>
<Style id="style44">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/ltblu-pushpin.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style28">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/red-dot.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style65">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/green-dot.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style48">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/ltblue-dot.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style31">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/yellow-dot.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style38">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/purple-dot.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style13">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/pink-dot.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style25">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/blue.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style4">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/blue-pushpin.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style60">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/restaurant.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style70">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/coffeehouse.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style67">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/bar.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style21">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/snack_bar.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style35">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/drinking_water.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style40">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/lodging.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style2">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/wheel_chair_accessible.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style18">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/shopping.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style56">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/movies.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style6">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/grocerystore.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style1">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/convienancestore.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style8">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/arts.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style24">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/homegardenbusiness.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style76">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/electronics.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style32">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/mechanic.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style9">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/pharmacy-us.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style74">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/realestate.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style41">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/salon.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style5">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/dollar.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style52">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/parkinglot.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style34">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/gas.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style14">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/bus.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style71">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/cabs.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style43">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/truck.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style19">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/rail.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style16">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/plane.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style58">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/ferry.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style54">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/helicopter.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style29">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/question.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style50">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/info.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style46">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/flag.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style59">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/earthquake.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style55">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/webcam.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style64">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/postoffice-us.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style53">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/police.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style57">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/firedept.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style11">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/hospitals.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style12">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/landmarks-jp.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style66">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/landmarks-jp.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style26">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/phone.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style39">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/caution.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style17">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/postoffice-jp.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style73">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/hotsprings.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style69">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/tree.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style36">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/campfire.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style33">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/picnic.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style47">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/campground.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style42">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/rangerstation.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style49">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/toilets.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style22">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/POI.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style27">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/hiker.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style51">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/cycling.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style37">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/motorcycling.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style7">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/horsebackriding.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style63">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/sportvenue.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style15">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/golfer.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style45">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/trail.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style72">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/water.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style30">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/snowflake_simple.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style23">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/marina.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style20">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/fishing.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style3">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/sailing.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style75">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/swimming.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style62">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/ms/icons/waterfalls.png</href>
</Icon>
</IconStyle>
</Style>
<Style id="style10">
<LineStyle>
<color>73FF0000</color>
<width>5</width>
</LineStyle>
</Style>
<Style id="style61">
<LineStyle>
<color>40000000</color>
<width>3</width>
</LineStyle>
<PolyStyle>
<color>73FF0000</color>
<fill>1</fill>
<outline>1</outline>
</PolyStyle>
</Style>
<Style id="style68">
<LineStyle>
<color>40000000</color>
<width>3</width>
</LineStyle>
<PolyStyle>
<color>730066FF</color>
<fill>1</fill>
<outline>1</outline>
</PolyStyle>
</Style>
<Placemark>
<name>Repère 1</name>
<description><![CDATA[Tets1
<br>]]></description>
<styleUrl>#style44</styleUrl>
<Point>
<coordinates>0.034332,48.142723,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 4</name>
<description><![CDATA[]]></description>
<styleUrl>#style28</styleUrl>
<Point>
<coordinates>0.118103,48.156925,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 5</name>
<description><![CDATA[]]></description>
<styleUrl>#style65</styleUrl>
<Point>
<coordinates>0.181274,48.164253,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 6</name>
<description><![CDATA[]]></description>
<styleUrl>#style48</styleUrl>
<Point>
<coordinates>0.079651,48.171124,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 7</name>
<description><![CDATA[]]></description>
<styleUrl>#style31</styleUrl>
<Point>
<coordinates>0.077076,48.155781,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 8</name>
<description><![CDATA[]]></description>
<styleUrl>#style38</styleUrl>
<Point>
<coordinates>0.089951,48.163223,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 9</name>
<description><![CDATA[]]></description>
<styleUrl>#style13</styleUrl>
<Point>
<coordinates>0.096645,48.158756,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 10</name>
<description><![CDATA[]]></description>
<styleUrl>#style25</styleUrl>
<Point>
<coordinates>0.059052,48.159100,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 11</name>
<description><![CDATA[]]></description>
<styleUrl>#style4</styleUrl>
<Point>
<coordinates>0.054760,48.152687,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 12</name>
<description><![CDATA[]]></description>
<styleUrl>#style60</styleUrl>
<Point>
<coordinates>0.071068,48.151314,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 13</name>
<description><![CDATA[]]></description>
<styleUrl>#style70</styleUrl>
<Point>
<coordinates>0.079308,48.152458,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 14</name>
<description><![CDATA[]]></description>
<styleUrl>#style67</styleUrl>
<Point>
<coordinates>0.084114,48.144096,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 15</name>
<description><![CDATA[]]></description>
<styleUrl>#style21</styleUrl>
<Point>
<coordinates>0.064888,48.143639,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 16</name>
<description><![CDATA[]]></description>
<styleUrl>#style35</styleUrl>
<Point>
<coordinates>0.049782,48.140892,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 17</name>
<description><![CDATA[]]></description>
<styleUrl>#style40</styleUrl>
<Point>
<coordinates>0.062141,48.136768,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 18</name>
<description><![CDATA[]]></description>
<styleUrl>#style2</styleUrl>
<Point>
<coordinates>0.083771,48.139744,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 19</name>
<description><![CDATA[]]></description>
<styleUrl>#style18</styleUrl>
<Point>
<coordinates>0.106430,48.149368,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 20</name>
<description><![CDATA[]]></description>
<styleUrl>#style56</styleUrl>
<Point>
<coordinates>0.108833,48.134476,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 21</name>
<description><![CDATA[]]></description>
<styleUrl>#style6</styleUrl>
<Point>
<coordinates>0.074501,48.129665,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 22</name>
<description><![CDATA[]]></description>
<styleUrl>#style1</styleUrl>
<Point>
<coordinates>0.129776,48.148678,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 23</name>
<description><![CDATA[]]></description>
<styleUrl>#style8</styleUrl>
<Point>
<coordinates>0.096474,48.126453,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 24</name>
<description><![CDATA[]]></description>
<styleUrl>#style24</styleUrl>
<Point>
<coordinates>0.130806,48.135849,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 25</name>
<description><![CDATA[]]></description>
<styleUrl>#style76</styleUrl>
<Point>
<coordinates>0.046005,48.131039,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 26</name>
<description><![CDATA[]]></description>
<styleUrl>#style32</styleUrl>
<Point>
<coordinates>0.058365,48.120037,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 27</name>
<description><![CDATA[]]></description>
<styleUrl>#style9</styleUrl>
<Point>
<coordinates>0.072441,48.121185,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 28</name>
<description><![CDATA[]]></description>
<styleUrl>#style74</styleUrl>
<Point>
<coordinates>0.106773,48.173412,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 29</name>
<description><![CDATA[]]></description>
<styleUrl>#style41</styleUrl>
<Point>
<coordinates>0.131836,48.167915,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 30</name>
<description><![CDATA[]]></description>
<styleUrl>#style5</styleUrl>
<Point>
<coordinates>0.150719,48.163109,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 31</name>
<description><![CDATA[]]></description>
<styleUrl>#style52</styleUrl>
<Point>
<coordinates>0.145912,48.159443,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 32</name>
<description><![CDATA[]]></description>
<styleUrl>#style34</styleUrl>
<Point>
<coordinates>0.167885,48.151199,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 34</name>
<description><![CDATA[]]></description>
<styleUrl>#style14</styleUrl>
<Point>
<coordinates>0.156384,48.139515,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 33</name>
<description><![CDATA[]]></description>
<styleUrl>#style71</styleUrl>
<Point>
<coordinates>0.150719,48.147648,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 35</name>
<description><![CDATA[]]></description>
<styleUrl>#style43</styleUrl>
<Point>
<coordinates>0.145397,48.137569,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 36</name>
<description><![CDATA[]]></description>
<styleUrl>#style19</styleUrl>
<Point>
<coordinates>0.132523,48.160706,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 37</name>
<description><![CDATA[]]></description>
<styleUrl>#style16</styleUrl>
<Point>
<coordinates>0.158100,48.159328,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 38</name>
<description><![CDATA[]]></description>
<styleUrl>#style58</styleUrl>
<Point>
<coordinates>0.110207,48.162994,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 39</name>
<description><![CDATA[]]></description>
<styleUrl>#style54</styleUrl>
<Point>
<coordinates>0.106859,48.157211,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 40</name>
<description><![CDATA[]]></description>
<styleUrl>#style29</styleUrl>
<Point>
<coordinates>0.120678,48.165798,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 41</name>
<description><![CDATA[]]></description>
<styleUrl>#style50</styleUrl>
<Point>
<coordinates>0.100679,48.166885,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 42</name>
<description><![CDATA[]]></description>
<styleUrl>#style46</styleUrl>
<Point>
<coordinates>0.112524,48.169693,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 43</name>
<description><![CDATA[]]></description>
<styleUrl>#style59</styleUrl>
<Point>
<coordinates>0.123854,48.174385,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 44</name>
<description><![CDATA[]]></description>
<styleUrl>#style55</styleUrl>
<Point>
<coordinates>0.121450,48.161964,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 45</name>
<description><![CDATA[]]></description>
<styleUrl>#style64</styleUrl>
<Point>
<coordinates>0.090981,48.170437,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 46</name>
<description><![CDATA[]]></description>
<styleUrl>#style53</styleUrl>
<Point>
<coordinates>0.102911,48.161106,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 47</name>
<description><![CDATA[]]></description>
<styleUrl>#style57</styleUrl>
<Point>
<coordinates>0.125656,48.170208,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 48</name>
<description><![CDATA[]]></description>
<styleUrl>#style11</styleUrl>
<Point>
<coordinates>0.115271,48.165569,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 49</name>
<description><![CDATA[]]></description>
<styleUrl>#style12</styleUrl>
<Point>
<coordinates>0.107031,48.167290,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 50</name>
<description><![CDATA[]]></description>
<styleUrl>#style66</styleUrl>
<Point>
<coordinates>0.095959,48.165226,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 51</name>
<description><![CDATA[]]></description>
<styleUrl>#style26</styleUrl>
<Point>
<coordinates>0.116129,48.160587,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 52</name>
<description><![CDATA[]]></description>
<styleUrl>#style39</styleUrl>
<Point>
<coordinates>0.110378,48.160587,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 53</name>
<description><![CDATA[]]></description>
<styleUrl>#style17</styleUrl>
<Point>
<coordinates>0.089951,48.159157,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 54</name>
<description><![CDATA[]]></description>
<styleUrl>#style73</styleUrl>
<Point>
<coordinates>0.128231,48.165398,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 55</name>
<description><![CDATA[]]></description>
<styleUrl>#style69</styleUrl>
<Point>
<coordinates>0.085402,48.167400,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 56</name>
<description><![CDATA[]]></description>
<styleUrl>#style36</styleUrl>
<Point>
<coordinates>0.083427,48.162594,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 57</name>
<description><![CDATA[]]></description>
<styleUrl>#style33</styleUrl>
<Point>
<coordinates>0.103083,48.157097,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 58</name>
<description><![CDATA[]]></description>
<styleUrl>#style47</styleUrl>
<Point>
<coordinates>0.096045,48.154980,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 59</name>
<description><![CDATA[]]></description>
<styleUrl>#style42</styleUrl>
<Point>
<coordinates>0.098534,48.162308,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 60</name>
<description><![CDATA[]]></description>
<styleUrl>#style49</styleUrl>
<Point>
<coordinates>0.091925,48.166828,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 61</name>
<description><![CDATA[]]></description>
<styleUrl>#style22</styleUrl>
<Point>
<coordinates>0.105486,48.164539,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 62</name>
<description><![CDATA[]]></description>
<styleUrl>#style27</styleUrl>
<Point>
<coordinates>0.113039,48.154518,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 63</name>
<description><![CDATA[]]></description>
<styleUrl>#style51</styleUrl>
<Point>
<coordinates>0.124626,48.159157,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 64</name>
<description><![CDATA[]]></description>
<styleUrl>#style37</styleUrl>
<Point>
<coordinates>0.082998,48.158871,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 65</name>
<description><![CDATA[]]></description>
<styleUrl>#style7</styleUrl>
<Point>
<coordinates>0.087719,48.155552,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 66</name>
<description><![CDATA[]]></description>
<styleUrl>#style63</styleUrl>
<Point>
<coordinates>0.103769,48.153145,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 67</name>
<description><![CDATA[]]></description>
<styleUrl>#style15</styleUrl>
<Point>
<coordinates>0.111408,48.165684,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 68</name>
<description><![CDATA[]]></description>
<styleUrl>#style45</styleUrl>
<Point>
<coordinates>0.125141,48.164654,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 69</name>
<description><![CDATA[]]></description>
<styleUrl>#style72</styleUrl>
<Point>
<coordinates>0.100508,48.170666,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 70</name>
<description><![CDATA[]]></description>
<styleUrl>#style30</styleUrl>
<Point>
<coordinates>0.119562,48.169922,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 71</name>
<description><![CDATA[]]></description>
<styleUrl>#style23</styleUrl>
<Point>
<coordinates>0.124197,48.155151,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 72</name>
<description><![CDATA[]]></description>
<styleUrl>#style20</styleUrl>
<Point>
<coordinates>0.117846,48.152859,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 73</name>
<description><![CDATA[]]></description>
<styleUrl>#style3</styleUrl>
<Point>
<coordinates>0.091581,48.153088,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 74</name>
<description><![CDATA[]]></description>
<styleUrl>#style75</styleUrl>
<Point>
<coordinates>0.128489,48.160934,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Repère 75</name>
<description><![CDATA[]]></description>
<styleUrl>#style62</styleUrl>
<Point>
<coordinates>0.107546,48.154808,0.000000</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Ligne 2</name>
<styleUrl>#style10</styleUrl>
<LineString>
<tessellate>1</tessellate>
<coordinates>
0.063343,48.177189,0.000000
0.101109,48.183601,0.000000
0.121365,48.181541,0.000000
0.147629,48.175472,0.000000
0.138016,48.161278,0.000000
0.149002,48.153488,0.000000
0.167027,48.146160,0.000000
0.149174,48.143982,0.000000
0.153809,48.131268,0.000000
0.121365,48.130466,0.000000
0.119476,48.145130,0.000000
0.092869,48.144787,0.000000
0.087376,48.132984,0.000000
0.074673,48.138599,0.000000
0.073986,48.147762,0.000000
0.058537,48.150856,0.000000
0.057163,48.143410,0.000000
0.052357,48.136307,0.000000
0.038624,48.138828,0.000000
0.037594,48.158642,0.000000
</coordinates>
</LineString>
</Placemark>
<Placemark>
<name>Forme 1</name>
<styleUrl>#style61</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
0.064373,48.188408,0.000000
0.042915,48.188980,0.000000
0.040684,48.177647,0.000000
0.056133,48.172268,0.000000
0.063000,48.177418,0.000000
0.064373,48.188408,0.000000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
<Placemark>
<name>Forme 2</name>
<styleUrl>#style68</styleUrl>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<tessellate>1</tessellate>
<coordinates>
0.040512,48.177189,0.000000
0.027294,48.170208,0.000000
0.024548,48.161507,0.000000
0.037594,48.158756,0.000000
0.053730,48.158756,0.000000
0.055962,48.172039,0.000000
0.040512,48.177189,0.000000
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Document>
</kml>
ETAPE 3 : Utiliser les données du fichier KML pour les intégrer sur la carte incluse dans votre site internet
Nous allons utiliser l'exemple donné dans la documentation de Google Maps :
http://www.google.com/apis/maps/documentation/#XML_Overlays
[1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> [2] <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> [3] <head> [4] <script src="http://maps.google.com/maps?file=api&v=2.x&key= Mettez Votre Clef API Ici " type="text/javascript"></script> [5] <style type="text/css"> [6] v\:* { [7] behavior:url(#default#VML); [8] } [9] </style> [10] <script type="text/javascript"> [11] var MaCarte; [12] var geoXml; [13] [14] function load() { [15] if (GBrowserIsCompatible()) { [16] /* Remplacez ci-dessous, le chemin figurant entre guillemets, par le chemin pointant vers votre fichier .KML */ [17] geoXml = new GGeoXml("http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&msa=0&msid=115115239782170342035.000001120f1e7b0ba07b2&output=kml") [18] MaCarte = new GMap2(document.getElementById("EmplacementDeMacarte")); [19] /* Centre la carte "MaCarte" au milieu des repères : Latitude : 48.158871 - Longitude : 0.082998 - Zoom : 12 */ [20] MaCarte.setCenter(new GLatLng(48.158871,0.082998), 12); [21] /* Ajout sur la carte "MaCarte" des boutons "Grands controles" */ [22] MaCarte.addControl(new GLargeMapControl()); [23] /* Ajout des données du fichier .KML sur la carte "MaCarte" */ [24] MaCarte.addOverlay(geoXml); [25] } [26] } [27] [28] /* Fonction permettant de masquer ou afficher les données du fichier .KML sur la carte */ [29] function toggleMyKml() { [30] if (geoXml.isHidden()) { [31] geoXml.show(); [32] } else { [33] geoXml.hide(); [34] } [35] } [36] </script> [37] </head> [38] [39] <body onload="load()" onunload="GUnload()"> [40] <div id="EmplacementDeMacarte" style="width: 640px; height: 480px; float:left; border: 1px solid black;"></div> [41] <br/> [42] <input type="button" value="Afficher / Masquer KML" onClick="toggleMyKml();"/> [43] </body> [44] </html>
Pour télécharger / copier le code cliquez
ici, et n'oubliez pas de remplacer la clef API par la vôtre.
Pour adapter cet exemple à vos besoins, il vous suffit en :
Ligne [4] :
d'insérer votre cle API à l'emplacement indiqué,
Ligne [17] :
de modifier la variable geoXml comme suit :
var geoXml = new GGeoXml("Mettre ici le lien que vous avez obtenu dans l'ETAPE 2");
Ligne [20] :
de modifier la Latitude, la Longitude,
et le Zoom pour centrer votre carte au milieu de tous
vos marqueurs, polygones et polylines :
MaCarte.setCenter(new GLatLng(Latitude,
Longitude), Zoom);
Exemple : MaCarte.setCenter(new GLatLng(48.499471,
0.156418), 9);
RESULTAT
REMARQUES
Une autre méthode possible, est d'enregistrer le contenu du fichier .KML, obtenu à l'ETAPE-2, puis de le transférer sur votre serveur, et de modifier la variable geoXml, en Ligne [14], comme suit :
var geoXml = new GGeoXml("http://www.mon-site-perso.fr/mon-repertoire/mon-fichier.kml");
| http://www.touraineverte.com | © 2008 | fadamaps37arobasegmailpointcom