Eso es todo.

Para comenzar a desarrollar, consulta nuestra documentación para desarrolladores.

Activar la Google Maps JavaScript API

Para que puedas comenzar, te proporcionaremos orientación en la Google Developers Console a fin de que hagas primero algunas acciones:

  1. Crear o seleccionar un proyecto
  2. Activar la Google Maps JavaScript API y servicios relacionados
  3. Crear claves correspondientes
Continuar

Servicio de elevación

Información general

El servicio de elevación proporciona datos de elevación para ubicaciones sobre la superficie del planeta, incluidas determinadas áreas del lecho marino (para las cuales se devuelven valores negativos). En aquellos casos en los cuales Google no cuente con mediciones de elevación exactas para la ubicación precisa de tu solicitud, el servicio realizará una interpolación y devolverá un valor promediado recurriendo a las cuatro ubicaciones más cercanas.

El objeto ElevationService te proporciona una interfaz simple para realizar consultas sobre ubicaciones del planeta y obtener datos de elevación. A su vez, es posible que solicites datos de elevación muestreados en rutas de acceso, lo que te permite calcular los cambios de elevación equidistantes en las rutas. El objeto ElevationService se comunica con el servicio de elevación de la Google Maps API, el cual recibe solicitudes de elevación y devuelve datos de elevación.

Con el servicio de elevación, puedes desarrollar aplicaciones para realizar caminatas y recorridos en bicicleta, aplicaciones de posicionamiento móvil o aplicaciones de consultas en baja resolución.

Primeros pasos

Antes de usar el servicio de elevación de la Google Maps JavaScript API, debes asegurarte de que Google Maps Elevation API esté habilitada en la Google API Console, en el mismo proyecto que configuraste para la Google Maps JavaScript API.

Para ver tu lista de API habilitadas:

  1. Ingresa a Google API Console.
  2. Haz clic en el botón Select a project, luego selecciona el mismo proyecto que configuraste para la Google Maps JavaScript API y haz clic en Open.
  3. En la lista de API del Panel de control, busca Google Maps Elevation API.
  4. Si ves la API en la lista, no necesitas hacer nada más. Si la API no está en la lista, habilítala:
    1. En la parte superior de la página, selecciona ENABLE API para mostrar la pestaña Library. Como alternativa, en el menú lateral izquierdo, selecciona Library.
    2. Busca Google Maps Elevation API y luego selecciónala en la lista de resultados.
    3. Selecciona ENABLE. Cuando finalice el proceso, Google Maps Elevation API aparecerá en la lista de API del Panel de control.

Límites y políticas de uso

Cuotas

Los siguientes límites de uso se encuentran en vigencia para el servicio de elevación:

Uso del servicio de elevación con el plan estándar

  • 2500 solicitudes gratis por día, calculadas como la suma de las consultas del cliente y el servidor; habilitar facturación para acceder a las cuotas diarias por un costo de USD 0,50 cada 1000 solicitudes adicionales, hasta 100 000 solicitudes diarias.
  • 512 ubicaciones por solicitud.
  • 50 solicitudes por segundo, calculadas como la suma de las consultas del cliente y el servidor combinadas.

Uso del servicio de elevación con el plan premium

  • Cuota gratuita diaria compartida de 100 000 solicitudes cada 24 horas; las solicitudes adicionales se cargarán a la compra anual de créditos de Maps API..
  • 512 ubicaciones por solicitud.
  • Ilimitado solicitudes del cliente por segundo, por proyecto. Ten en cuenta que la API del servidor tiene una cantidad límite de 50 solicitudes por segundo.

El límite de índice se aplica por sesión de usuario, independientemente de la cantidad de usuarios que compartan el mismo proyecto.

El límite de índice por sesión evita el uso de servicios del cliente para solicitudes por lotes. Si deseas calcular elevaciones de ubicaciones estáticas y conocidas, usa el servicio web de la Google Maps Elevation API.

Políticas

El uso del servicio de elevación debe cumplir con las políticas que se describen para la Google Maps Elevation API.

Solicitudes de elevación

El acceso al servicio de elevación es asincrónico, ya que la Google Maps API debe realizar una llamada a un servidor externo. Por esta razón, debes pasar un método callback para la ejecución al completarse la solicitud. Este método callback debe procesar los resultados. Ten en cuenta que el servicio de elevación devuelve un código de estado (ElevationStatus) y un conjunto de objetos ElevationResult separados.

ElevationService administra dos tipos de solicitudes:

  • Solicitudes de ubicaciones separadas y discretas a través del método getElevationForLocations(), que recibe una lista con una o más ubicaciones a través de un objeto LocationElevationRequest.
  • Solicitudes de elevación en una serie de puntos conectados en una ruta de acceso a través del método getElevationAlongPath(), que recibe un conjunto ordenado de vértices de ruta de acceso dentro de un objeto PathElevationRequest. Al solicitar elevaciones en rutas de acceso, también debes pasar un parámetro que indique la cantidad de ejemplos que deseas tomar en dicha ruta de acceso.

Cada uno de estos métodos también debe pasar un método callback para administrar los objetos ElevationResult y ElevationStatus devueltos.

Solicitudes de elevación de ubicación

El literal de objeto LocationElevationRequest contiene el siguiente campo:

{
  locations[]: LatLng
}

locations (obligatorio) define las ubicaciones terrestres a partir de las cuales deben devolverse datos de elevación. Este parámetro toma una matriz de valores LatLng.

Puedes pasar cualquier número de coordenadas múltiples dentro de un conjunto en tanto no excedas las cuotas de servicio. Ten en cuenta que cuando se pasan coordenadas múltiples, la precisión de los datos devueltos puede ser inferior que cuando se solicitan datos para una única coordenada.

Solicitudes de elevación de rutas de acceso muestreadas

El literal de objeto PathElevationRequest contiene los siguientes campos:

{
  path[]: LatLng,
  samples: Number
}

Estos campos se explican a continuación:

  • path (obligatorio) define un trayecto en el planeta para el cual deben devolverse datos de elevación. El parámetro path define un conjunto de dos o más pares ordenados {latitude,longitude} a través de un conjunto de dos o más objetos LatLng.
  • samples (obligatorio) especifica la cantidad de puntos de ejemplo a lo largo de un trayecto para el cual deben devolverse datos de elevación. El parámetro samples divide el parámetro path determinado en un conjunto ordenado de puntos equidistantes a lo largo del trayecto.

Como en el caso de las solicitudes posicionales, en el parámetro path se especifica un conjunto de valores de latitud y longitud. Sin embargo, a diferencia de lo que sucede con las solicitudes posicionales, el parámetro path especifica un conjunto ordenado de vértices. En lugar de devolverse datos de elevación en los vértices, se muestrean solicitudes de rutas de acceso en la extensión de dichas rutas, en las cuales los ejemplos son equidistantes entre sí (incluidos los puntos finales).

Respuestas de elevación

Por cada solicitud válida, el servicio de elevación devolverá al callback definido un conjunto de objetos ElevationResult con un objeto ElevationStatus.

Estados de elevación

Cada solicitud de elevación devuelve un código ElevationStatus dentro de su función de callback. Este código status contendrá uno de los siguientes valores:

  • OK; indica que la solicitud de servicio se realizó con éxito.
  • INVALID_REQUEST; indica que la solicitud de servicio no tiene el formato correcto.
  • OVER_QUERY_LIMIT; indica que el solicitante excedió la cuota.
  • REQUEST_DENIED; indica que el servicio no completó la solicitud, probablemente debido a un parámetro incorrecto.
  • UNKNOWN_ERROR; indica un error desconocido.

Debes controlar que tu callback se haya realizado correctamente verificando que este código de estado sea OK.

Resultados de elevación

Una vez que la aplicación sea exitosa, el argumento results de tu función de callback contendrá un conjunto de objetos ElevationResult. Estos objetos contienen los siguientes elementos:

  • Un elemento location (con objetos LatLng) de la posición para la cual se computan datos de elevación. Ten en cuenta que para las solicitudes de trayectos, el conjunto de elementos location contendrá los puntos muestreados a lo largo de ese trayecto.
  • Un elemento elevation que indica la elevación de la ubicación en metros.
  • Un valor resolution que indica la distancia máxima entre puntos de datos a partir de los cuales se interpoló la elevación, en metros. Esta propiedad estará ausente si se desconoce la resolución. Ten en cuenta que los datos de elevación se vuelven más toscos (valores resolution mayores) cuando se pasan múltiples puntos. Para obtener el valor de elevación más preciso para un punto, deben realizarse consultas independientes.

Ejemplos de elevación

El siguiente código traduce un clic sobre un mapa en una solicitud de elevación a través del objeto 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);
    }
  });
}

Ver el ejemplo (elevation-simple.html).

En el siguiente ejemplo, se construye una polilínea a partir de un conjunto determinado de coordenadas y se muestran datos de elevación de la ruta de acceso en cuestión a través de la Google Visualization API. (Debes cargar esta API a través del cargador común de Google). Se construye una solicitud de elevación usando 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)'
  });
}

Ver el ejemplo (elevation-paths.html).

Enviar comentarios sobre...

Google Maps JavaScript API
Google Maps JavaScript API
Si necesitas ayuda, visita nuestra página de asistencia.