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

Importer des données dans des cartes

Présentation

Découvrez comment importer des données GeoJSON à partir d'une source locale ou distante, puis les afficher sur votre carte. Ce didacticiel s'appuie sur la carte ci-dessous pour illustrer diverses techniques d'importation de données dans des cartes.

La section ci-dessous affiche l'intégralité du code nécessaire pour créer la carte dans ce didacticiel.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(2.8,-187.3),
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');
  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });
  }
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- 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>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      // Loop through the results array and place a marker for each
      // set of coordinates.
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1],coords[0]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Charger les données

Cette section explique comment charger des données qui se trouvent dans le même domaine que votre application Maps JavaScript API ou dans un autre domaine.

Charger des données qui se trouvent dans le même domaine

Le calque Google Maps Data fournit un conteneur pour des données géospatiales arbitraires (y compris GeoJSON). Si les données se trouvent dans un fichier hébergé dans le même domaine que votre application Maps JavaScript API, vous pouvez les charger à l'aide de la méthode map.data.loadGeoJson(). Le fichier doit résider dans le même domaine, mais vous pouvez l'héberger dans un autre sous-domaine. Par exemple, vous pouvez envoyer une requête à files.example.com à partir de www.example.com.

map.data.loadGeoJson('data.json');

Charger des données qui se trouvent dans un autre domaine

Vous pouvez également envoyer une requête pour obtenir des données qui se trouvent sur un autre domaine que le vôtre, dans la mesure où la configuration du domaine autorise une telle requête. Cette autorisation s'appuie sur la norme CORS (partage de ressources d'origines croisées). Si les requêtes inter-domaines ont été autorisées dans un domaine, l'en-tête de réponse doit inclure la déclaration suivante :

Access-Control-Allow-Origin: *

Pour déterminer si la norme CORS est activée dans un domaine donné, utilisez les outils de développeur Chrome (DevTools).

Pour charger des données qui se trouvent dans un tel domaine, procédez comme pour charger des données JSON issues du même domaine :

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

Requête JSONP

Vous ne pouvez utiliser cette technique que si le domaine cible prend en charge les requêtes JSONP.

Pour réaliser une requête JSONP, utilisez createElement() afin d'ajouter une balise script dans l'en-tête de votre document.

var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);

Lorsque le script s'exécute, le domaine cible transmet les données en tant qu'argument à un autre script, généralement nommé callback(). Le domaine cible définit le nom du script de rappel, qui correspond au premier nom affiché sur la page lorsque vous chargez l'URL cible dans un navigateur.

Par exemple, chargez http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp dans une fenêtre de navigateur pour afficher le nom du script de rappel, soit eqfeed_callback.

Vous devez définir le script de rappel dans votre code :

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

Utilisez la méthode addGeoJson() pour placer les données GeoJSON analysées sur la carte.

Styliser vos données

Vous pouvez modifier l'apparence de vos données en ajoutant des données GeoJSON à un objet Map. Pour plus d'informations sur la stylisation des données, lisez le guide du développeur.

En savoir plus

  • GeoJSON est un format ouvert très courant, consacré à l'encodage des données géographiques et basé sur JSON (JavaScript Object Notation - notation des objets du langage JavaScript). Les méthodes et outils JavaScript conçus pour les données JSON sont également compatibles avec GeoJSON. Pour plus d'informations, voir le guide du développeur.
  • JSONP signifie « padded JSON » (JSON encapsulé). Il s'agit d'une méthode de communication utilisée dans les programmes JavaScript qui s'exécutent dans les navigateurs Web, pour obtenir des données auprès d'un serveur résidant dans un autre domaine.

Envoyer des commentaires concernant…

Google Maps JavaScript API
Google Maps JavaScript API
Besoin d'aide ? Consultez notre page d'assistance.