-->
Api Google Maps flèche Kml Kmz flèche Utilisation du fichier KML pour insérer une carte sur un site internet personnel.

UTILISER LE FICHIER KML GENERE DANS "MES CARTES"
POUR CREER UNE CARTE DANS UNE PAGE WEB - GGeoXml

Article créé le : 27/04/2009
 

Présentation

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 contenu du 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 dans 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/, 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 : Ma carte Publique.

Capture écran Mes cartes

ETAPE 2 : Récupérer le contenu du lien pointant vers le fichier KML de la carte 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.

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>Insérer cette carte dans une page web</name>
	<description><![CDATA[Importation des données d'un fichier .kml créé avec l'onglet mes cartes de Google Maps, pour insérer ces données dans une carte personnelle]]></description>
	<NetworkLink>
		<name>Insérer cette carte dans une page web</name>
		<Link>
			<href>http://maps.google.fr/maps/ms?ie=UTF8&amp;hl=fr&amp;vps=1&amp;jsv=154c&amp;oe=UTF8&amp;msa=0&amp;msid=115115239782170342035.00045c5d8b68ccf0d0247&amp;output=kml</href>
		</Link>
	</NetworkLink>
</Document>
</kml>

Copiez l'adresse contenue entre les balises <href></href>, puis remplacez les &amp; par &

Ce qui nous donne au final :

  http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&vps=1&jsv=154c&oe=UTF8&msa=0&msid=115115239782170342035.00045c5d8b68ccf0d0247&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.2">
<Document>
  <name>Insérer cette carte dans une page web</name>
  <description><![CDATA[Importation des données d'un fichier .kml créé avec l'onglet mes cartes de Google Maps, pour insérer ces données dans une carte personnelle]]></description>
  <Style id="style32">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/pushpin/blue-pushpin_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style29">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/paddle/red-circle_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style55">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/paddle/grn-circle_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style9">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/paddle/ltblu-circle_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style58">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/paddle/ylw-circle_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style15">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/paddle/purple-circle_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style70">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/paddle/pink-circle_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style61">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/paddle/blu-blank_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style16">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/pushpin/blue-pushpin_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style50">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/dining_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style11">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/coffee_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style21">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/bars_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style26">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/snack_bar_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style65">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/drinking_water_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style40">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/lodging_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style51">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/wheel_chair_accessible_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style5">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/shopping_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style43">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/movies_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style18">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/grocery_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style74">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/convenience_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style35">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/arts_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style4">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/homegardenbusiness_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style20">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/electronics_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style66">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/mechanic_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style13">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/pharmacy_rx_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style37">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/realestate_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style42">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/salon_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style67">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/dollar_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style44">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style69">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/gas_stations_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style71">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/bus_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style72">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/cabs_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style68">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/truck_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style59">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/rail_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style52">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/airports_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style31">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/ferry_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style24">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/heliport_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style73">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/info_circle_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style56">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/info_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style49">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/flag_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style38">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/earthquake_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style48">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/webcam_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style27">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/post_office_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style25">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/police_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style23">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/firedept_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style75">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/hospitals_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style76">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/landmark_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style53">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/landmark_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style6">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/phone_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style45">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/caution_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style62">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/post_office_jp_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style8">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/hotsprings_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style63">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/parks_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style60">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/campfire_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style1">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/picnic_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style14">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/campground_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style30">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/ranger_station_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style12">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/toilets_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style17">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/poi_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style54">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/hiker_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style3">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/cycling_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style10">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/motorcycling_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style41">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/horsebackriding_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style46">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/play_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style2">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/golf_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style36">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/trail_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style19">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/water_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style39">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/snowflake_simple_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style47">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/marina_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style33">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/fishing_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style7">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/sailing_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style64">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/swimming_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style28">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/kml/shapes/waterfalls_maps.png</href>
      </Icon>
    </IconStyle>
  </Style>
  <Style id="style22">
    <LineStyle>
      <color>73FF0000</color>
      <width>5</width>
    </LineStyle>
  </Style>
  <Style id="style57">
    <LineStyle>
      <color>40000000</color>
      <width>3</width>
    </LineStyle>
    <PolyStyle>
      <color>73FF0000</color>
      <fill>1</fill>
      <outline>1</outline>
    </PolyStyle>
  </Style>
  <Style id="style34">
    <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>
    <Snippet>Tets1 </Snippet>
    <description><![CDATA[Tets1
<br>]]></description>
    <styleUrl>#style32</styleUrl>
    <Point>
      <coordinates>0.034332,48.142723,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 4</name>
    <styleUrl>#style29</styleUrl>
    <Point>
      <coordinates>0.118103,48.156925,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 5</name>
    <styleUrl>#style55</styleUrl>
    <Point>
      <coordinates>0.181274,48.164253,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 6</name>
    <styleUrl>#style9</styleUrl>
    <Point>
      <coordinates>0.079651,48.171124,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 7</name>
    <styleUrl>#style58</styleUrl>
    <Point>
      <coordinates>0.077076,48.155781,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 8</name>
    <styleUrl>#style15</styleUrl>
    <Point>
      <coordinates>0.089951,48.163223,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 9</name>
    <styleUrl>#style70</styleUrl>
    <Point>
      <coordinates>0.096645,48.158756,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 10</name>
    <styleUrl>#style61</styleUrl>
    <Point>
      <coordinates>0.059052,48.159100,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 11</name>
    <styleUrl>#style16</styleUrl>
    <Point>
      <coordinates>0.054760,48.152687,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 12</name>
    <styleUrl>#style50</styleUrl>
    <Point>
      <coordinates>0.071068,48.151314,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 13</name>
    <styleUrl>#style11</styleUrl>
    <Point>
      <coordinates>0.079308,48.152458,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 14</name>
    <styleUrl>#style21</styleUrl>
    <Point>
      <coordinates>0.084114,48.144096,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 15</name>
    <styleUrl>#style26</styleUrl>
    <Point>
      <coordinates>0.064888,48.143639,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 16</name>
    <styleUrl>#style65</styleUrl>
    <Point>
      <coordinates>0.049782,48.140892,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 17</name>
    <styleUrl>#style40</styleUrl>
    <Point>
      <coordinates>0.062141,48.136768,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 18</name>
    <styleUrl>#style51</styleUrl>
    <Point>
      <coordinates>0.083771,48.139744,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 19</name>
    <styleUrl>#style5</styleUrl>
    <Point>
      <coordinates>0.106430,48.149368,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 20</name>
    <styleUrl>#style43</styleUrl>
    <Point>
      <coordinates>0.108833,48.134476,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 21</name>
    <styleUrl>#style18</styleUrl>
    <Point>
      <coordinates>0.074501,48.129665,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 22</name>
    <styleUrl>#style74</styleUrl>
    <Point>
      <coordinates>0.129776,48.148678,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 23</name>
    <styleUrl>#style35</styleUrl>
    <Point>
      <coordinates>0.096474,48.126453,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 24</name>
    <styleUrl>#style4</styleUrl>
    <Point>
      <coordinates>0.130806,48.135849,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 25</name>
    <styleUrl>#style20</styleUrl>
    <Point>
      <coordinates>0.046005,48.131039,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 26</name>
    <styleUrl>#style66</styleUrl>
    <Point>
      <coordinates>0.058365,48.120037,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 27</name>
    <styleUrl>#style13</styleUrl>
    <Point>
      <coordinates>0.072441,48.121185,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 28</name>
    <styleUrl>#style37</styleUrl>
    <Point>
      <coordinates>0.106773,48.173412,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 29</name>
    <styleUrl>#style42</styleUrl>
    <Point>
      <coordinates>0.131836,48.167915,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 30</name>
    <styleUrl>#style67</styleUrl>
    <Point>
      <coordinates>0.150719,48.163109,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 31</name>
    <styleUrl>#style44</styleUrl>
    <Point>
      <coordinates>0.145912,48.159443,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 32</name>
    <styleUrl>#style69</styleUrl>
    <Point>
      <coordinates>0.167885,48.151199,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 34</name>
    <styleUrl>#style71</styleUrl>
    <Point>
      <coordinates>0.156384,48.139515,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 33</name>
    <styleUrl>#style72</styleUrl>
    <Point>
      <coordinates>0.150719,48.147648,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 35</name>
    <styleUrl>#style68</styleUrl>
    <Point>
      <coordinates>0.145397,48.137569,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 36</name>
    <styleUrl>#style59</styleUrl>
    <Point>
      <coordinates>0.132523,48.160706,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 37</name>
    <styleUrl>#style52</styleUrl>
    <Point>
      <coordinates>0.158100,48.159328,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 38</name>
    <styleUrl>#style31</styleUrl>
    <Point>
      <coordinates>0.110207,48.162994,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 39</name>
    <styleUrl>#style24</styleUrl>
    <Point>
      <coordinates>0.106859,48.157211,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 40</name>
    <styleUrl>#style73</styleUrl>
    <Point>
      <coordinates>0.120678,48.165798,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 41</name>
    <styleUrl>#style56</styleUrl>
    <Point>
      <coordinates>0.100679,48.166885,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 42</name>
    <styleUrl>#style49</styleUrl>
    <Point>
      <coordinates>0.112524,48.169693,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 43</name>
    <styleUrl>#style38</styleUrl>
    <Point>
      <coordinates>0.123854,48.174385,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 44</name>
    <styleUrl>#style48</styleUrl>
    <Point>
      <coordinates>0.121450,48.161964,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 45</name>
    <styleUrl>#style27</styleUrl>
    <Point>
      <coordinates>0.090981,48.170437,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 46</name>
    <styleUrl>#style25</styleUrl>
    <Point>
      <coordinates>0.102911,48.161106,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 47</name>
    <styleUrl>#style23</styleUrl>
    <Point>
      <coordinates>0.125656,48.170208,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 48</name>
    <styleUrl>#style75</styleUrl>
    <Point>
      <coordinates>0.115271,48.165569,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 49</name>
    <styleUrl>#style76</styleUrl>
    <Point>
      <coordinates>0.107031,48.167290,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 50</name>
    <styleUrl>#style53</styleUrl>
    <Point>
      <coordinates>0.095959,48.165226,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 51</name>
    <styleUrl>#style6</styleUrl>
    <Point>
      <coordinates>0.116129,48.160587,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 52</name>
    <styleUrl>#style45</styleUrl>
    <Point>
      <coordinates>0.110378,48.160587,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 53</name>
    <styleUrl>#style62</styleUrl>
    <Point>
      <coordinates>0.089951,48.159157,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 54</name>
    <styleUrl>#style8</styleUrl>
    <Point>
      <coordinates>0.128231,48.165398,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 55</name>
    <styleUrl>#style63</styleUrl>
    <Point>
      <coordinates>0.085402,48.167400,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 56</name>
    <styleUrl>#style60</styleUrl>
    <Point>
      <coordinates>0.083427,48.162594,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 57</name>
    <styleUrl>#style1</styleUrl>
    <Point>
      <coordinates>0.103083,48.157097,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 58</name>
    <styleUrl>#style14</styleUrl>
    <Point>
      <coordinates>0.096045,48.154980,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 59</name>
    <styleUrl>#style30</styleUrl>
    <Point>
      <coordinates>0.098534,48.162308,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 60</name>
    <styleUrl>#style12</styleUrl>
    <Point>
      <coordinates>0.091925,48.166828,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 61</name>
    <styleUrl>#style17</styleUrl>
    <Point>
      <coordinates>0.105486,48.164539,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 62</name>
    <styleUrl>#style54</styleUrl>
    <Point>
      <coordinates>0.113039,48.154518,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 63</name>
    <styleUrl>#style3</styleUrl>
    <Point>
      <coordinates>0.124626,48.159157,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 64</name>
    <styleUrl>#style10</styleUrl>
    <Point>
      <coordinates>0.082998,48.158871,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 65</name>
    <styleUrl>#style41</styleUrl>
    <Point>
      <coordinates>0.087719,48.155552,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 66</name>
    <styleUrl>#style46</styleUrl>
    <Point>
      <coordinates>0.103769,48.153145,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 67</name>
    <styleUrl>#style2</styleUrl>
    <Point>
      <coordinates>0.111408,48.165684,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 68</name>
    <styleUrl>#style36</styleUrl>
    <Point>
      <coordinates>0.125141,48.164654,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 69</name>
    <styleUrl>#style19</styleUrl>
    <Point>
      <coordinates>0.100508,48.170666,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 70</name>
    <styleUrl>#style39</styleUrl>
    <Point>
      <coordinates>0.119562,48.169922,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 71</name>
    <styleUrl>#style47</styleUrl>
    <Point>
      <coordinates>0.124197,48.155151,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 72</name>
    <styleUrl>#style33</styleUrl>
    <Point>
      <coordinates>0.117846,48.152859,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 73</name>
    <styleUrl>#style7</styleUrl>
    <Point>
      <coordinates>0.091581,48.153088,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 74</name>
    <styleUrl>#style64</styleUrl>
    <Point>
      <coordinates>0.128489,48.160934,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Repère 75</name>
    <styleUrl>#style28</styleUrl>
    <Point>
      <coordinates>0.107546,48.154808,0.000000</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Ligne 2</name>
    <styleUrl>#style22</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>#style57</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>#style34</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 insérer dans la carte affichée sur votre site

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 en :

  • Repère 1  Repère 1 : d'insérer votre clé API à l'emplacement indiqué,
  • Repère 2  Repère 2 : de modifier la variable geoXml comme suit :
  var fichierXML = new GGeoXml("Mettre ici le lien que vous avez obtenu dans l'ETAPE 2");

Exemple :

  var fichierXML = new GGeoXml("http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&vps=1&jsv=154c&oe=UTF8&msa=0&msid=115115239782170342035.00045c5d8b68ccf0d0247&output=kml");
  • Repère 3  Repère 3 : 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.159444, 0.099907), 12);

Carte

Code

Code : Avec Google Ajax API Loader

  • <?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 AJAX APIs en précisant votre clé -->
  • <script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_Votre_Clef_API_ Ici"></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 fichierXML;
  • var url= "http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&vps=1&jsv=154c&oe=UTF8&msa=0&msid=115115239782170342035.00045c5d8b68ccf0d0247&output=kml";
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (google.maps.BrowserIsCompatible()) {
  • /* ... fichierXML : Fichier au format XML que l'on charge pour l'afficher sur la carte ... */
  • fichierXML = new google.maps.GeoXml(url);
  • /* ... 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"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 48.159444, la Longitude 0.099907, avec un niveau de zoom égal à 12 ... */
  • maCarte.setCenter(new google.maps.LatLng(48.159444,0.099907), 12);
  • /* ... Affiche les boutons et contrôles 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(fichierXML);
  • /* 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');
  • }
  • }
  • /* Appelle la fonction "initialize" lorsque la page web sera chargée */
  • google.setOnLoadCallback(initialize);
  • //]]>
  • </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>

Code : Sans Google Ajax API Loader

  • <?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=Insérez_Votre_Clef_API_ Ici&sensor=false"
  • type="text/javascript"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • var maCarte;
  • var fichierKML;
  • var url= "http://maps.google.fr/maps/ms?ie=UTF8&hl=fr&vps=1&jsv=154c&oe=UTF8&msa=0&msid=115115239782170342035.00045c5d8b68ccf0d0247&output=kml";
  • /* Fonction initialize() */
  • function initialize() {
  • /* ... fichierKML : Fichier au format KML que l'on charge pour l'afficher sur la carte ... */
  • fichierKML = new GGeoXml(url);
  • /* 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"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 48.159444, la Longitude 0.099907, avec un niveau de zoom égal à 12 ... */
  • maCarte.setCenter(new GLatLng(48.159444,0.099907), 12);
  • /* ... 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(fichierKML);
  • /* 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="initialize()" 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>

Remarque(s)

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 fichierXML, en Repère 2  Repère 2, comme suit : 


  var fichierXML = new GGeoXml("http://www.mon-site-perso.fr/mon-repertoire/mon-fichier.kml");

Ou si vous utilisez Google Ajax API Loader :


  var fichierXML = new google.maps.GeoXml("http://www.mon-site-perso.fr/mon-repertoire/mon-fichier.kml");