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

Service Elevation

Présentation

Le service Elevation fournit des données d'altitude pour des points géographiques situés à la surface de la Terre, y compris les fonds marins (lesquels renvoient des valeurs négatives). Si Google ne dispose pas des mesures d'altitude exactes du point géographique précis demandé, le service retourne une valeur d'interpolation moyenne basée sur les quatre points géographiques les plus proches connus.

L'objet ElevationService vous fournit une interface simple pour obtenir les données d'altitude de tous les points géographiques sur Terre. Il vous offre également la possibilité d'obtenir des données d'altitude échantillonnées le long d'un tracé, afin de calculer les variations d'altitude équidistantes au cours d'un itinéraire. L'objet ElevationService communique avec le service Elevation de Google Maps API, qui reçoit les demandes d'altitude et retourne des données d'altitude.

Le service Elevation vous permet de développer des applications de randonnée ou de cyclisme, de géolocalisation mobile, ou encore de topographie basse résolution.

Premiers pas

Avant d'utiliser le service Elevation dans Google Maps JavaScript API, assurez-vous que Google Maps Elevation API est activée dans la Google API Console, dans le projet que vous avez configuré pour Google Maps JavaScript API.

Pour afficher la liste des API activées :

  1. Allez à la Google API Console.
  2. Cliquez sur le bouton Select a project, sélectionnez le projet que vous avez configuré pour Google Maps JavaScript API et cliquez sur Open.
  3. Recherchez Google Maps Elevation API dans la liste des API affichées dans le Dashboard.
  4. Si vous trouvez l'API dans la liste, vous pouvez continuer. Si l'API ne figure pas dans la liste, vous devez l'activer :
    1. En haut de la page, sélectionnez ENABLE API pour afficher l'onglet Library. Vous pouvez également sélectionner Library dans le menu de gauche.
    2. Recherchez Google Maps Elevation API, puis sélectionnez-la dans la liste des résultats.
    3. Sélectionnez ENABLE. Une fois le processus terminé, Google Maps Elevation API apparaît dans la liste des API sur le Dashboard.

Limites d'utilisation et politiques

Quotas

Le service Elevation est soumis aux limites d'utilisation suivantes :

Utilisation du service Elevation avec le plan Standard

  • 2 500 requêtes gratuites par jour (en additionnant les requêtes côté client et côté serveur). activer la facturation pour bénéficier de quotas journaliers supérieurs, facturés à 0,50 USD / 1 000 requêtes supplémentaires, jusqu'à 100 000 requêtes par jour.
  • 512 lieux par requête.
  • 50 requêtes par seconde (en additionnant les requêtes côté client et côté serveur).

Utilisation du service Elevation avec le plan Premium

  • Quota journalier gratuit partagé de 100 000 requêtes par tranche de 24 heures ; requêtes supplémentaires dans le cadre de l'achat annuel de crédits Maps API.
  • 512 lieux par requête.
  • Illimité requêtes côté client par seconde et par projet. Notez que l'API côté serveur est limitée à 50 requêtes par seconde.

La limite du taux est appliquée par session utilisateur, indépendamment du nombre d'utilisateurs qui partagent le même projet.

La limite du taux par session évite que les services côté client soient utilisés pour des requêtes groupées. Si vous souhaitez calculer des altitudes pour des points géographiques statiques connus, utilisez plutôt le service Web Google Maps Elevation API.

Politiques

Le service Elevation doit être utilisé conformément aux politiques de Google Maps Elevation API.

Requêtes d'altitude

Étant donné que Google Maps API doit appeler un serveur externe, l'accès au service Elevation est asynchrone. Pour cette raison, vous devez définir une méthode de rappel à exécuter à la fin de la requête. Cette méthode de rappel doit traiter le ou les résultats. Notez que le service Elevation retourne un code de statut (ElevationStatus) et un tableau d'objets ElevationResult séparés.

L'objet ElevationService gère deux types de requêtes :

  • Les requêtes pour des points géographiques distincts à l'aide de la méthode getElevationForLocations(), qui reçoit une liste d'un ou plusieurs points géographiques au moyen via un objet LocationElevationRequest.
  • Les requêtes d'altitude pour une série de points le long d'un tracé à l'aide de la méthode getElevationAlongPath(), qui reçoit un ensemble ordonné de sommets du tracé via un objet PathElevationRequest. Lorsque vous demandez des altitudes le long d'un tracé, vous devez également transmettre un paramètre indiquant le nombre d'échantillons à utiliser le long de ce tracé.

Chacune de ces méthodes doit également utiliser une méthode de rappel pour gérer les résultats ElevationResult et ElevationStatus retournés.

Requêtes d'altitude de point géographique

Un littéral objet LocationElevationRequest contient le champ suivant :

{
  locations[]: LatLng
}

locations (obligatoire) définit le ou les points géographiques sur Terre pour lesquels les données d'altitude doivent être calculées. Ce paramètre nécessite un tableau d'objets LatLng.

Vous pouvez insérer autant de coordonnées que vous le souhaitez dans un tableau, tant que vous ne dépassez pas les quotas du service. Notez toutefois qu'en transmettant plusieurs coordonnées à la fois, l'exactitude des données renvoyées peut être moindre que lorsque votre demande ne porte que sur une seule coordonnée.

Requêtes d'altitude de tracé échantillonné

Un littéral objet PathElevationRequest contient les champs suivants :

{
  path[]: LatLng,
  samples: Number
}

Ces champs sont décrits ci-dessous :

  • path (obligatoire) définit un tracé sur Terre pour lequel les données d'altitude doivent être calculées. Le paramètre path définit un ensemble d'au moins deux paires ordonnées {latitude,longitude} au moyen d'un tableau contenant au minimum deux objets LatLng.
  • samples (obligatoire) détermine le nombre de points échantillonnés le long d'un tracé, pour lesquels les données d'altitude doivent être calculées. Le paramètre samples divise le tracé path donné en un ensemble ordonné de points équidistants le long du tracé.

Comme pour les requêtes de position, le paramètre path désigne un ensemble de valeurs de latitude et longitude. Toutefois, contrairement à une requête de position, le chemin path spécifie un ensemble ordonné de sommets. Plutôt que de calculer les données d'altitude uniquement au niveau des sommets, les requêtes de tracé sont échantillonnées tout au long du tracé, où chaque échantillon est équidistant des autres (y compris les extrémités).

Réponses aux requêtes d'altitude

Pour chaque requête valide, le service Elevation renvoie au rappel défini un ensemble d'objets ElevationResult accompagnés d'un objet ElevationStatus.

Statuts d'altitude

Chaque demande d'altitude renvoie un code ElevationStatus dans sa fonction de rappel. Ce code status contient l'une des valeurs suivantes :

  • OK indique que la requête de service a réussi.
  • INVALID_REQUEST indique que la requête de service a été mal formulée.
  • OVER_QUERY_LIMIT indique que le demandeur a dépassé le quota de requêtes autorisées.
  • REQUEST_DENIED indique que le service n'a pas pu exécuter la requête, probablement à cause d'un paramètre non valide.
  • UNKNOWN_ERROR indique une erreur inconnue.

Pour vérifier la bonne exécution du rappel, examinez le code de statut, qui doit être OK.

Résultats d'altitude

Une fois l'exécution réussie, l'argument results de votre fonction de rappel contient un ensemble d'objets ElevationResult. Chaque objet contient les éléments suivants :

  • Un élément location (contenant les objets LatLng) de la position pour laquelle les données d'altitude sont calculées. Notez que pour les requêtes de tracé, l'ensemble des éléments location contient un échantillon de points le long du tracé.
  • Un élément elevation indiquant l'altitude du point géographique, en mètres.
  • Une valeur resolution, indiquant la distance maximale entre les points de données à partir desquels l'altitude a été interpolée, en mètres. Cette propriété est omise si la résolution n'est pas connue. Notez que les données d'altitude sont moins précises (valeurs resolution plus élevées) lorsque plusieurs points sont transmis. Pour obtenir la valeur d'altitude la plus précise possible pour un point, vous devez effectuer une requête indépendante.

Exemples d'altitude

Le code suivant traduit un clic sur une carte en une requête d'altitude au moyen de l'objet LocationElevationRequest :

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 63.333, lng: -150.5},  // Denali.
    mapTypeId: 'terrain'
  });
  var elevator = new google.maps.ElevationService;
  var infowindow = new google.maps.InfoWindow({map: map});

  // Add a listener for the click event. Display the elevation for the LatLng of
  // the click inside the infowindow.
  map.addListener('click', function(event) {
    displayLocationElevation(event.latLng, elevator, infowindow);
  });
}

function displayLocationElevation(location, elevator, infowindow) {
  // Initiate the location request
  elevator.getElevationForLocations({
    'locations': [location]
  }, function(results, status) {
    infowindow.setPosition(location);
    if (status === 'OK') {
      // Retrieve the first result
      if (results[0]) {
        // Open the infowindow indicating the elevation at the clicked position.
        infowindow.setContent('The elevation at this point <br>is ' +
            results[0].elevation + ' meters.');
      } else {
        infowindow.setContent('No results found');
      }
    } else {
      infowindow.setContent('Elevation service failed due to: ' + status);
    }
  });
}
<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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 63.333, lng: -150.5},  // Denali.
    mapTypeId: 'terrain'
  });
  var elevator = new google.maps.ElevationService;
  var infowindow = new google.maps.InfoWindow({map: map});

  // Add a listener for the click event. Display the elevation for the LatLng of
  // the click inside the infowindow.
  map.addListener('click', function(event) {
    displayLocationElevation(event.latLng, elevator, infowindow);
  });
}

function displayLocationElevation(location, elevator, infowindow) {
  // Initiate the location request
  elevator.getElevationForLocations({
    'locations': [location]
  }, function(results, status) {
    infowindow.setPosition(location);
    if (status === 'OK') {
      // Retrieve the first result
      if (results[0]) {
        // Open the infowindow indicating the elevation at the clicked position.
        infowindow.setContent('The elevation at this point <br>is ' +
            results[0].elevation + ' meters.');
      } else {
        infowindow.setContent('No results found');
      }
    } else {
      infowindow.setContent('Elevation service failed due to: ' + status);
    }
  });
}

Voir l'exemple (elevation-simple.html)

L'exemple suivant construit une polyligne en fonction d'un ensemble de coordonnées et affiche les données d'altitude le long de ce tracé en utilisant Google Visualization API. (Vous devez chargez cette API en utilisant Google Common Loader.) Une requête d'altitude est créée en utilisant l'objet PathElevationRequest :

// Load the Visualization API and the columnchart package.
google.load('visualization', '1', {packages: ['columnchart']});

function initMap() {
  // The following path marks a path from Mt. Whitney, the highest point in the
  // continental United States to Badwater, Death Valley, the lowest point.
  var path = [
      {lat: 36.579, lng: -118.292},  // Mt. Whitney
      {lat: 36.606, lng: -118.0638},  // Lone Pine
      {lat: 36.433, lng: -117.951},  // Owens Lake
      {lat: 36.588, lng: -116.943},  // Beatty Junction
      {lat: 36.34, lng: -117.468},  // Panama Mint Springs
      {lat: 36.24, lng: -116.832}];  // Badwater, Death Valley

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: path[1],
    mapTypeId: 'terrain'
  });

  // Create an ElevationService.
  var elevator = new google.maps.ElevationService;

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(path, elevator, map) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: '#0000CC',
    strokeOpacity: 0.4,
    map: map
  });

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator.getElevationAlongPath({
    'path': path,
    'samples': 256
  }, plotElevation);
}

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation(elevations, status) {
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== 'OK') {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
        status;
    return;
  }
  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // Extract the data from which to populate the chart.
  // Because the samples are equidistant, the 'Sample'
  // column here does double duty as distance along the
  // X axis.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Sample');
  data.addColumn('number', 'Elevation');
  for (var i = 0; i < elevations.length; i++) {
    data.addRow(['', elevations[i].elevation]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}
<div>
  <div id="map" style="height:250px;"></div>
  <div id="elevation_chart"></div>
</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;
}
<script src="https://www.google.com/jsapi"></script>
 <!-- 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>
// Load the Visualization API and the columnchart package.
google.load('visualization', '1', {packages: ['columnchart']});

function initMap() {
  // The following path marks a path from Mt. Whitney, the highest point in the
  // continental United States to Badwater, Death Valley, the lowest point.
  var path = [
      {lat: 36.579, lng: -118.292},  // Mt. Whitney
      {lat: 36.606, lng: -118.0638},  // Lone Pine
      {lat: 36.433, lng: -117.951},  // Owens Lake
      {lat: 36.588, lng: -116.943},  // Beatty Junction
      {lat: 36.34, lng: -117.468},  // Panama Mint Springs
      {lat: 36.24, lng: -116.832}];  // Badwater, Death Valley

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: path[1],
    mapTypeId: 'terrain'
  });

  // Create an ElevationService.
  var elevator = new google.maps.ElevationService;

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(path, elevator, map) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: '#0000CC',
    strokeOpacity: 0.4,
    map: map
  });

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator.getElevationAlongPath({
    'path': path,
    'samples': 256
  }, plotElevation);
}

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation(elevations, status) {
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== 'OK') {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
        status;
    return;
  }
  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // Extract the data from which to populate the chart.
  // Because the samples are equidistant, the 'Sample'
  // column here does double duty as distance along the
  // X axis.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Sample');
  data.addColumn('number', 'Elevation');
  for (var i = 0; i < elevations.length; i++) {
    data.addRow(['', elevations[i].elevation]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}

Voir l'exemple (elevation-paths.html)

Envoyer des commentaires concernant…

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