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

Biblioteca de geometría

  1. Información general
  2. Conceptos de geometría esférica
    1. Funciones de distancia y área
    2. Funciones de navegación
  3. Codificación geométrica
  4. Funciones de polígonos y polilíneas
    1. containsLocation()
    2. isLocationOnEdge()

Información general

Los conceptos de este documento hacen referencia a funciones que solo están disponibles en la biblioteca google.maps.geometry. Esta biblioteca no se carga de forma predeterminada cuando cargas la Maps JavaScript API, pero se debe especificar explícitamente mediante el uso de un parámetro de arranque libraries.

Para obtener más información, consulta la Información general sobre bibliotecas.

La biblioteca de geometrías de la Google Maps JavaScript API proporciona funciones de utilidades para el cálculo de datos geométricos de la superficie terrestre. En la biblioteca se incluyen tres espacios de nombres:

  • spherical contiene utilidades de geometría esférica que te permiten calcular ángulos, distancias y áreas a partir de longitudes y latitudes.
  • encoding contiene utilidades para codificar y decodificar rutas de acceso de polilíneas conforme al algoritmo de polilíneas codificado.
  • poly contiene funciones de utilidades para cálculos que incluyen polígonos y polilíneas.

La biblioteca google.maps.geometry no contiene clases. En su lugar, contiene métodos estáticos en los espacios de nombres anteriores.

Conceptos de geometría esférica

Las imágenes incluidas en la Google Maps JavaScript API son bidimensionales y “planas”. La Tierra, sin embargo, es tridimensional y a menudo se la concibe como un esferoide achatado o, de manera más simple, como una esfera. Dentro de la Google Maps API, se usa una esfera, y para representar la Tierra en una superficie bidimensional (como la pantalla de tu computadora) la Google Maps API usa una proyección.

En las proyecciones 2D, las apariencias a veces pueden engañar. Puesto que para la proyección en el mapa se necesita cierta distorsión, a menudo no es posible aplicar geometría euclidiana simple. Por ejemplo, la distancia más reducida entre dos puntos de una esfera no es una línea recta, sino un círculo máximo (un tipo de línea geodésica), y los ángulos que componen un triángulo en la superficie de una esfera suman más de 180 grados.

Debido a estas diferencias, en las funciones geométricas de una esfera (o de su proyección) se debe aplicar geometría esférica para calcular construcciones como la distancia, el rumbo y el área. Dentro del espacio de nombres google.maps.geometry.spherical de la Google Maps API hay utilidades para calcular estas construcciones geométricas esféricas. Este espacio de nombres proporciona métodos estáticos para el cálculo de valores escalares a partir de coordenadas esféricas (latitudes y longitudes).

Funciones de distancia y área

La distancia entre dos puntos es la extensión del recorrido más corto entre ellos. Este recorrido se conoce como “línea geodesica”. En una esfera, todas las líneas geodésicas son segmentos de un círculo máximo. Para computar esta distancia, llama a computeDistanceBetween() y pásale dos objetos LatLng.

En lugar de ello, puedes usar computeLength() para calcular la extensión de un recorrido determinado si hay varias ubicaciones.

Los resultados de distancias se expresan en metros.

Para computar el área de un polígono (en metros cuadrados), llama computeArea() y pasa el conjunto de objetos LatLng que definen un bucle cerrado.

Al navegar en una esfera, un rumbo es un ángulo de dirección a partir de un punto de referencia fijo, generalmente el norte geográfico. Dentro de la Google Maps API, un rumbo se define en grados a partir del norte geográfico y se mide en sentido horario a partir del este verdadero (0 grados). Puedes calcular este rumbo entre dos ubicaciones usando el método computeHeading() y pasándole dos objetos from y to LatLng.

Dados un rumbo en particular, una ubicación de origen y la distancia de recorrido (en metros), puedes calcular las coordenadas del destino usando computeOffset().

Con dos objetos LatLng y un valor de 0 a 1, también puedes calcular un destino entre ellos usando el método interpolate(), que realiza una interpolación lineal esférica entre las dos ubicaciones, donde el valor indica la distancia fraccionaria que debe recorrerse entre el origen y el destino.

En el siguiente ejemplo se crean dos polilíneas cuando haces clic en dos puntos del mapa (una línea geodésica y una “recta” que conectan dos ubicaciones) y se calcula el rumbo para ir de un punto al otro:

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

var marker1, marker2;
var poly, geodesicPoly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 34, lng: -40.605}
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 40.714, lng: -74.006}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 48.857, lng: 2.352}
  });

  var bounds = new google.maps.LatLngBounds(
      marker1.getPosition(), marker2.getPosition());
  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

  poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  geodesicPoly = new google.maps.Polyline({
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  });

  update();
}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path[0].toString();
  document.getElementById('destination').value = path[1].toString();
}
<div id="map"></div>
<div id="floating-panel">
  Origin: <input type="text" readonly id="origin">
  Destination: <input type="text" readonly id="destination"><br>
  Heading: <input type="text" readonly id="heading"> degrees
</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;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
    async defer></script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

var marker1, marker2;
var poly, geodesicPoly;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 34, lng: -40.605}
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('info'));

  marker1 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 40.714, lng: -74.006}
  });

  marker2 = new google.maps.Marker({
    map: map,
    draggable: true,
    position: {lat: 48.857, lng: 2.352}
  });

  var bounds = new google.maps.LatLngBounds(
      marker1.getPosition(), marker2.getPosition());
  map.fitBounds(bounds);

  google.maps.event.addListener(marker1, 'position_changed', update);
  google.maps.event.addListener(marker2, 'position_changed', update);

  poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    map: map,
  });

  geodesicPoly = new google.maps.Polyline({
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  });

  update();
}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0], path[1]);
  document.getElementById('heading').value = heading;
  document.getElementById('origin').value = path[0].toString();
  document.getElementById('destination').value = path[1].toString();
}

Ver el ejemplo (geometry-headings.html).

Métodos de codificación:

Los recorridos dentro de la Google Maps JavaScript API a menudo se especifican como un Array de objetos LatLng. Sin embargo, la transferencia de un conjunto a menudo implica una sobrecarga. En lugar de ello, puedes usar el algoritmo de codificación de polilíneas para comprimir un recorrido determinado, que luego puedes descomprimir mediante codificación.

La biblioteca geometry contiene un espacio de nombres encoding para que las utilidades codifiquen y decodifiquen polilíneas.

El método estático encodePath() codifica el recorrido en cuestión. Puedes pasar un conjunto de objetos LatLng o un MVCArray (devuelto por Polyline.getPath()).

Para decodificar un recorrido codificado, simplemente llama a decodePath() y pasa la cadena codificada al método.

En el ejemplo siguiente se muestra un mapa de Oxford, Mississippi. Cuando se hace clic en el mapa se agrega un punto a una polilínea. A medida que se construye la polilínea, la codificación aparece debajo.

// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 34.366, lng: -89.519}
  });
  var poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', function(event) {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  var path = poly.getPath();
  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  var encodeString = google.maps.geometry.encoding.encodePath(path);
  if (encodeString) {
    document.getElementById('encoded-polyline').value = encodeString;
  }
}
<div id="map"></div>
<div id="right-panel">
  <div>Encoding:</div>
  <textarea id="encoded-polyline"></textarea>
</div>
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  width: 50%;
  float: left;
}
#right-panel {
  width: 46%;
  float: left;
}
#encoded-polyline {
  height: 100px;
  width: 100%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"
    async defer></script>
// This example requires the Geometry library. Include the libraries=geometry
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 34.366, lng: -89.519}
  });
  var poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 3,
    map: map
  });

  // Add a listener for the click event
  google.maps.event.addListener(map, 'click', function(event) {
    addLatLngToPoly(event.latLng, poly);
  });
}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * Updates the encoding text area with the path's encoded values.
 */
function addLatLngToPoly(latLng, poly) {
  var path = poly.getPath();
  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(latLng);

  // Update the text field to display the polyline encodings
  var encodeString = google.maps.geometry.encoding.encodePath(path);
  if (encodeString) {
    document.getElementById('encoded-polyline').value = encodeString;
  }
}

Ver el ejemplo (geometry-encodings.html).

Funciones de polígonos y polilíneas

El espacio de nombres poly de la biblioteca de geometría contiene funciones de utilidades que determinan si un punto determinado se encuentra dentro o cerca de un polígono o una polilínea.

containsLocation()

containsLocation(point:LatLng, polygon:Polygon)

Para determinar si un punto determinado se encuentra dentro de un polígono, pasa ambos elementos a google.maps.geometry.poly.containsLocation(). Las funciones devuelven “true” si el punto se encuentra dentro del polígono o en su borde.

El siguiente código escribe “true” en la consola del navegador si el clic que realiza el usuario se encuentra dentro del triángulo definido. De lo contrario, escribe “false”.

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886, -70.269),
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var bermudaTriangle = new google.maps.Polygon({
    paths: [
      new google.maps.LatLng(25.774, -80.190),
      new google.maps.LatLng(18.466, -66.118),
      new google.maps.LatLng(32.321, -64.757)
    ]
  });

  google.maps.event.addListener(map, 'click', function(event) {
    console.log(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle));
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Otra versión de este código dibuja un círculo rojo en el mapa si el clic se encuentra dentro del Triángulo de las Bermudas. De lo contrario, dibuja un círculo verde:

Ver el ejemplo (poly-containsLocation)

isLocationOnEdge()

isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number)

Para determinar si un punto se encuentra en una polilínea o fuera de ella, o bien en el borde de un polígono o cerca de él, pasa a google.maps.geometry.poly.isLocationOnEdge() el punto, la polilínea, el polígono y, de manera opcional, un valor de tolerancia en grados. La función devuelve “true” si la distancia entre este punto y el punto más cercano de la línea o el borde se encuentra dentro de la tolerancia especificada. El valor de tolerancia predeterminado es de 10-9 grados.

function initialize() {
  var myPosition = new google.maps.LatLng(46.0, -125.9);

  var mapOptions = {
    zoom: 5,
    center: myPosition,
    mapTypeId: 'terrain'
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);

  var cascadiaFault = new google.maps.Polyline({
    path: [
      new google.maps.LatLng(49.95, -128.1),
      new google.maps.LatLng(46.26, -126.3),
      new google.maps.LatLng(40.3, -125.4)
    ]
  });

  cascadiaFault.setMap(map);

  if (google.maps.geometry.poly.isLocationOnEdge(myPosition, cascadiaFault, 10e-1)) {
    alert("Relocate!");
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

Enviar comentarios sobre...

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