Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps JavaScript API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou sélectionner un projet
  2. Activer Google Maps JavaScript API et les services connexes
  3. Créer les clés appropriées
Continuer

Afficher les informations d'un fichier KML

Présentation

Ce didacticiel a pour objectif de vous montrer comment afficher les informations d'un fichier KML dans une carte et la barre latérale Google. Pour plus d'informations sur l'utilisation de fichiers KML dans les cartes, lisez le guide des calques KML. Cliquez sur un marqueur sur la carte ci-dessous pour afficher les données dans la barre latérale.

La section ci-dessous affiche l'intégralité du code dont vous avez besoin pour créer la carte et la barre latérale.

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

/**
 * Initializes the map and calls the function that loads the KML layer.
 */
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
  loadKmlLayer(src, map);
}

/**
 * Adds a KMLLayer based on the URL passed. Clicking on a marker
 * results in the balloon content being loaded into the right-hand div.
 * @param {string} src A URL for a KML file.
 */
function loadKmlLayer(src, map) {
  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  google.maps.event.addListener(kmlLayer, 'click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}
<div id="map"></div>
<div id="capture"></div>
html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 360px;
 width: 300px;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Essayez par vous-même

Placez la souris en haut à droite du bloc de code pour le copier ou l'ouvrir dans JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      /**
       * Initializes the map and calls the function that loads the KML layer.
       */
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });
        loadKmlLayer(src, map);
      }

      /**
       * Adds a KMLLayer based on the URL passed. Clicking on a marker
       * results in the balloon content being loaded into the right-hand div.
       * @param {string} src A URL for a KML file.
       */
      function loadKmlLayer(src, map) {
        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        google.maps.event.addListener(kmlLayer, 'click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Premiers pas

Voici les étapes nécessaires à la création de la carte et de la barre latérale pour ce didacticiel :

  1. Configurer le fichier KML
  2. Afficher le calque KMLlayer
  3. Afficher les données dans la barre latérale

Configurer le fichier KML pour importation

Votre fichier KML doit être conforme à la norme KML. Pour plus de détails sur cette norme, voir le site Web de l'Open Geospatial Consortium . La documentation de Google relative à KML décrit également ce language et propose des documents de référence et conceptuels à l'attention des développeurs.

Si vous êtes simplement là pour apprendre et ne disposez pas d'un fichier KML, vous pouvez :

  • Utiliser le fichier KML suivant pour ce didacticiel :

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • Rechercher un fichier KML sur le Web. Vous pouvez pour cela utiliser l'opérateur de recherche filetype de Google.

    Pour trouver tous les fichiers KML, remplacez velodromes par n'importe quel terme de recherche ou ignorez tout simplement ce terme.

Si vous créez votre propre fichier, le code utilisé dans cet exemple suppose que :

  • Votre fichier soit publiquement hébergé sur Internet. Ceci est obligatoire pour toutes les applications qui chargent le fichier KML dans KMLLayer, de sorte que les serveurs de Google puissent trouver et récupérer le contenu à afficher sur la carte.
  • Le fichier ne se trouve pas sur une page protégée par mot de passe.
  • Vos composants aient un contenu pour fenêtre d'info. Vous pouvez incorporer ce contenu dans un élément description ou l'inclure au moyen d'un élément ExtendedData et d'un remplacement d'entité (voir ci-dessous pour en savoir plus). Les deux sont accessibles en tant que propriété infoWindowHtml du composant.

Éléments ExtendedData

Le fichier KML utilisé pour les besoins de ce didacticiel inclut les informations du composant dans un élément ExtendedData. Pour importer ces informations dans la description du composant, utilisez le remplacement d'entité, qui consiste essentiellement en une variable de la balise BalloonStyle.

Le tableau ci-dessous décrit le code pour cette section.

Code et description 
<Style id="west_campus_style">
  <IconStyle>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
    </Icon>
  </IconStyle>
  <BalloonStyle>
    <text>$[video]</text>
  </BalloonStyle>
</Style>

Le fichier KML n'a qu'un seul élément Style qui est appliqué à tous les repères.
Cet élément Style attribue une valeur de #[video] à l'élément texte de la baliseBalloonStyle.
Le format $[x] indique à l'analyseur KML de rechercher un élément Data appelé video et de l'utiliser en tant que texte de la bulle.		 
<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
          allowfullscreen></iframe><br><br>]]></value>
      </Data>
    </ExtendedData>
    <Point>
      <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
    </Point>
</Placemark>

Chaque Placemark contient un élément ExtendedData, qui lui-même contient un élément Data. Notez que chaque Placemark a un seul élément Data avec l'attribut de nom video.
Pour les besoins de ce didacticiel, le fichier utilise la vidéo intégrée YouTube comme valeur pour le texte de la bulle de chaque repère.

Vous trouverez plus de détails sur le remplacement d'entité dans le chapitre Ajouter des données personnalisées de la documentation sur le langage KML.

Afficher le calque KMLLayer

Initialiser la carte

Ce tableau décrit le code pour cette section.

Code et description 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

Pour afficher l'objet KML sur une carte, vous devez d'abord créer la carte.
Ce code crée un nouvel objet Google Map, définit ses paramètres de centrage et de zoom, puis joint la carte à l'objet div.
Pour plus d'informations sur les bases de la création d'une carte Google, voir le didacticiel Ajouter une carte Google à votre site Web.

Créer le calque KMLLayer

Ce tableau décrit le code permettant de créer un calque KMLLayer.

Code et description 
var kmlLayer = new google.maps.KmlLayer();

Crée un nouvel objet KMLLayer pour afficher les informations du fichier KML.		 
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

Le constructeur KMLLayer définit l'URL de votre fichier KML. Il définit également les propriétés de l'objet KMLLayer qui :
  • Indiquent au calque de ne pas afficher une fenêtre d'info lorsque l'on clique dessus.
  • Définissent les paramètres de centrage et de zoom de la carte jusqu'à la zone de délimitation du contenu du calque.
  • Associent la carte à l'objet Map précédemment créé.
Le guide de référence Google Maps JavaScript API dresse la liste de toutes les options disponibles pour ce calque.
Chargez votre fichier HTML pour afficher le contenu du fichier KML en tant que calque superposé à la carte de base. Toutefois, si vous cliquez sur un quelconque composant, rien ne se passe encore pour le moment.

Afficher des données dans la barre latérale

Cette section décrit les paramètres qui affichent le contenu de la fenêtre d'info dans la barre latérale lorsque l'on clique sur un composant de la carte. Cela se fait en :

  • Écoutant un événement de clic sur n'importe quel composant du calque KMLLayer.
  • Relevant les données du composant sur lequel on a cliqué.
  • Inscrivant ces données sur la barre latérale.

Ajouter un écouteur d'événement

Google Maps fournit une fonction pour écouter les événements sur la carte et y répondre, tels que les clics ou les pressions sur une touche du clavier. Cela ajoute donc un écouteur pour les événements click.

Le tableau ci-dessous décrit le code pour cette section.

Code et description 
google.maps.event.addListener(kmlLayer, 'click', function(event) {});

L'écouteur d'événement google.maps.event.addListener s'intéresse aux éléments suivants :
  • L'objet à écouter. Dans ce didacticiel, il s'agit de l'objet kmlLayer.
  • Le type d'événement à écouter. Dans ce didacticiel, il s'agit de l'événement click.
  • La fonction à appeler lorsque l'événement se produit.
Vous trouverez plus de détails sur les événements dans le Guide du développeur.

Inscrire les données des composants KML dans la barre latérale

À cette étape du didacticiel, vous avez capturé des événements de clic sur les composants du calque. Vous pouvez maintenant configurer l'application pour inscrire les données des composants et le contenu de la fenêtre d'info dans la barre latérale.

Le tableau ci-dessous décrit le code pour cette section.

Code et description 
var content = event.featureData.infoWindowHtml;

Inscrit le contenu de la fenêtre d'info dans une variable. 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Identifie l'objet div dans lequel inscrire le contenu et remplace le code HTML à l'intérieur par le contenu du composant. 
google.maps.event.addListener(kmlLayer, 'click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Ces lignes de code deviennent la fonction dans le constructeur addListener .

Maintenant, à chaque fois que vous cliquez sur un composant KML de la carte, la barre latérale est mise à jour pour afficher le contenu de sa fenêtre d'info.

Plus d’infos

En savoir plus sur l'utilisation des fichiers KML.

Envoyer des commentaires concernant…

Cette page
Commentaires sur la documentation
Google Maps JavaScript API
Google Maps JavaScript API
Commentaires sur le produit
Besoin d'aide ? Consultez notre page d'assistance.