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

Formas

Puedes agregar varias formas a tu mapa. Una forma es un objeto del mapa y se vincula a una coordenada de latitud y longitud. Se encuentran disponibles las siguientes formas: líneas, polígonos, círculos y rectángulos. También puedes configurar tus formas para que los usuarios puedan editar o arrastrarlos.

Polilíneas

Para dibujar una línea en tu mapa usa una polilínea. La clase Polyline define una superposición lineal de segmentos de líneas conectados en el mapa. Un objeto Polyline consiste en un arreglo de ubicaciones de LatLng y crea una serie de segmentos de líneas que conectan dichas ubicaciones en una secuencia ordenada.

Agregar una polilínea

El constructor de Polyline toma un conjunto de PolylineOptions que especifican las coordenadas de LatLng de la línea y un conjunto de estilos para ajustar el comportamiento visual de la polilínea.

Los objetos Polyline se dibujan como una serie de segmentos rectos en el mapa. Puedes especificar colores, opacidades y grosores personalizados para el trazo de la línea dentro de PolylineOptions al construir tu línea, o bien cambiar estas propiedades después de la construcción. Una polilínea admite los siguientes estilos de trazo:

  • strokeColor especifica un color HTML hexadecimal con el formata "#FFFFFF". La clase Polyline no admite colores con nombres.
  • strokeOpacity especifica un valor numérico entre 0.0 y 1.0 para determinar la opacidad del color de la línea. El valor predeterminado es 1.0.
  • strokeWeight especifica el ancho de la línea en píxeles

En la propiedad editable de la polilínea se especifica si los usuarios pueden editar la forma. Consulta la sección sobre formas que el usuario puede editar, a continuación. Asimismo, puedes configurar la propiedad draggable para permitir que los usuarios arrastren la línea.

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(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>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

Ver el ejemplo (polyline-simple.html).

Eliminar una polilínea

Para eliminar una polilínea del mapa, llama al método setMap() y pasa null como argumento. En el ejemplo siguiente, flightPath es un objeto de polilínea:

flightPath.setMap(null);

Ten en cuenta que con el método anterior no se elimina la polilínea. Simplemente se retira del mapa. Si en realidad deseas eliminar la polilínea, debes hacerlo desde el mapa y luego fijar el valor de la polilínea en null.

Ver el ejemplo (polyline-remove.html).

Inspeccionar una polilínea

Una polilínea especifica una serie de coordenadas como un arreglo de objetos LatLng. Estas coordenadas determinan el trazado de la línea. Para recuperar las coordenadas, llama a getPath(), que devolverá un arreglo del tipo MVCArray. Puedes manipular e inspeccionar el arreglo mediante las siguientes operaciones:

  • getAt() devuelve el objeto LatLng en un valor determinado de índice basado en cero.
  • insertAt() inserta un objeto LatLng aprobado en un valor determinado de índice basado en cero. Ten en cuenta que las coordenadas existentes en dicho valor de índice se desplazan hacia adelante.
  • removeAt() devuelve un objeto LatLng en un valor determinado de índice basado en cero.
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

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

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    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>
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

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

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

Ver el ejemplo (polyline-complex.html).

Personalizar una polilínea

Puedes agregar imágenes basadas en vectores a una polilínea con forma de símbolos. Con una combinación de símbolos y la clase PolylineOptions, tienes un amplio control del aspecto de las polilíneas de tu mapa. Consulta la sección Símbolos para obtener información sobre flechas, íneas punteadas, símbolos personalizados y símbolos animados.

Polígonos

Un polígono representa un área cerrada por un trazado cerrado (o bucle), que se define a través de una serie de coordenadas. Los objetos Polygon se asemejan a los objetos Polyline en que constan de una serie de coordenadas que forman una secuencia ordenada. Los polígonos se dibujan con un trazo y un relleno. Puedes definir colores, opacidades y grosores personalizados para el contorno del polígono (el trazo), y también opacidades y colores personalizados para el área delimitada (relleno). Los colores deben indicarse en formato HTML hexadecimal. No se admiten nombres de colores.

Los objetos Polygon pueden describir formas complejas, entre las que se incluyen:

  • Múltiples áreas no contiguas múltiples definidas por un solo polígono;
  • areas con orificios en ellas;
  • intersecciones de una o más áreas.

Para definir una forma compleja, deberás usar un polígono con varios trazados.

Nota: La capa de datos permite dibujar polígonos de manera simple. Se encarga de controlar el devanado de polígonos, lo cual facilita el dibujo de polígonos con orificios. Consulta la documentación de la capa de datos.

Agregar un polígono

Debido a que en un área poligonal pueden incluirse varios trazados separados, la propiedad paths del objeto Polygon especifica un arreglo de arreglos y cada uno de ellos es del tipo MVCArray. Cada arreglo define una secuencia separada de coordenadas de LatLng ordenadas.

En el caso de polígonos simples que consten de solo un trazado, puedes construir un objeto Polygon mediante un arreglo único de coordenadas de LatLng. La Google Maps JavaScript API convertirá el arreglo simple en un arreglo de arreglos tras la construcción, al almacenarlo en la propiedad paths. La API proporciona un método getPath() simple para polígonos que constan de un trazado.

En la propiedad editable del polígono se especifica si los usuarios pueden editar la forma. Consulta la sección sobre formas que el usuario puede editar, a continuación. Asimismo, puedes configurar la propiedad draggable para permitir que los usuarios arrastren la forma.

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(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>
// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

Ver el ejemplo (polygon-simple.html).

Autocompletado de polígonos

El objeto Polygon del ejemplo anterior consta de cuatro conjuntos de coordenadas de LatLng, pero debes tener en cuenta que el primero y último conjunto definen la misma ubicación, la cual completa el bucle. Debido a que los polígonos definen áreas cerradas, sin embargo, en la práctica no necesitas especificar el último conjunto de coordenadas. La Google Maps JavaScript API completará de manera automática el polígono dibujando un trazo que conecte la última ubicación con la primera para cualquier trazado.

El ejemplo siguiente es idéntico al previo, con la excepción de que se omite el último objeto LatLng: Ver el ejemplo (polygon-autoclose.html).

Eliminar un polígono

Para eliminar un polígono del mapa, llama al método setMap() y pasa null como argumento. En el ejemplo siguiente, bermudaTriangle es un objeto de polígono:

bermudaTriangle.setMap(null);

Ten en cuenta que con el método anterior no se elimina el polígono. Simplemente se retira del mapa. Si en realidad deseas eliminar el polígono, debes hacerlo desde el mapa y luego fijar el valor del polígono en null.

Inspeccionar un polígono

Un polígono especifica su serie de coordenadas como un arreglo de arreglos y cada uno de estos es del tipo MVCArray. Cada arreglo “hoja” es un arreglo de coordenadas de LatLng que especifican un trazado único. Para recuperar estas coordenadas, llama al getPaths() del objeto Polygon. Debido a que el arreglo es un MVCArray, deberás manipularlo e inspeccionarlo mediante las siguientes operaciones:

  • getAt() devuelve el objeto LatLng en un valor determinado de índice basado en cero.
  • insertAt() inserta un objeto LatLng aprobado en un valor determinado de índice basado en cero. Ten en cuenta que las coordenadas existentes en dicho valor de índice se desplazan hacia adelante.
  • removeAt() devuelve un objeto LatLng en un valor determinado de índice basado en cero.
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(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>
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

Ver el ejemplo (polygon-arrays.html).

Disponer un orificio en un polígono

Para crear un área vacía dentro de un polígono, debes crear dos trazados, un al lado del otro. Para crear el orificio, las coordenadas que definen el trazado interno deben tener el orden opuesto al de aquellas que definen el trazado externo. Por ejemplo, si las coordenadas del trazado externo se hayan en el sentido de las agujas del reloj, el trazado interno debe hallarse en el sentido contrario al de las agujas del reloj.

Nota: La capa de datos controla el orden de los trazados internos y externos, lo cual facilita el dibujo de polígonos con orificios. Consulta la documentación de la capa de datos.

En el siguiente ejemplo, se dibuja un polígono con dos trazados y el interno se orienta en la dirección opuesta a la del externo.

// This example creates a triangular polygon with a hole in it.

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

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(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>
// This example creates a triangular polygon with a hole in it.

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

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

Ver el ejemplo (polygon-hole.html).

Rectángulos

Además de una clase Polygon genérica, en la Google Maps JavaScript API se incluye una clase específica para objetos Rectangle a fin de simplificar su construcción.

Agregar un rectángulo

Un objeto Rectangle se asemeja a un objeto Polygon en que puedes definir colores, opacidades y grosores personalizados para el contorno del rectángulo (el trazo), y también opacidades y colores personalizados para el área delimitada de este (relleno). Los colores deben indicarse en formato HTML numérico hexadecimal.

A diferencia de lo que sucede con los objetos Polygon, no puedes definir la propiedad paths para un Rectangle. En lugar de ello, en un rectángulo se incluye una propiedad bounds que define su forma especificando un objeto google.maps.LatLngBounds para el rectángulo.

En la propiedad editable del rectángulo se especifica si los usuarios pueden editar la forma. Consulta la sección sobre formas que el usuario puede editar, a continuación. Asimismo, puedes configurar la propiedad draggable para permitir que los usuarios arrastren el rectángulo.

// This example adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}
<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>
// This example adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}

Ver el ejemplo (rectangle-simple.html).

Con el código siguiente se crea un rectángulo cada vez que el usuario cambia el zoom en el mapa. El tamaño del rectángulo se ve determinado por el viewport.

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}
<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>
// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}

Ver el ejemplo (rectangle-zoom.html).

Eliminar un rectángulo

Para eliminar un rectángulo del mapa, llama al método setMap() y pasa null como argumento.

rectangle.setMap(null);

Ten en cuenta que con el método anterior no se elimina el rectángulo. Simplemente se retira del mapa. Si en realidad deseas eliminar el rectángulo, debes hacerlo desde el mapa y luego fijar el valor del rectángulo en null.

Círculos

Además de la clase Polygon genérica, en la Google Maps JavaScript API se incluye una clase específica para objetos Circle a fin de simplificar su construcción.

Agregar un círculo

Un objeto Circle se asemeja a un objeto Polygon en que puedes definir colores, opacidades y grosores personalizados para el contorno del círculo (el trazo), y también opacidades y colores personalizados para el área delimitada de este (relleno). Los colores deben indicarse en formato HTML numérico hexadecimal.

A diferencia de lo que sucede con los objetos Polygon, no puedes definir la propiedad paths para un Circle. En lugar de ello, un círculo tiene dos propiedades adicionales que definen su forma:

  • center especifica el objeto google.maps.LatLng del centro del círculo.
  • radius especifica el radio del círculo en metros.

En la propiedad editable del círculo se especifica si los usuarios pueden editar la forma. Consulta la sección sobre formas que el usuario puede editar, a continuación. Asimismo, puedes configurar la propiedad draggable para permitir que los usuarios arrastren el círculo.

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}
<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>
// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}

Ver el ejemplo (circle-simple.html).

Eliminar un círculo

Para eliminar un círculo del mapa, llama al método setMap() y pasa null como argumento.

circle.setMap(null);

Ten en cuenta que con el método anterior no se elimina el círculo. Simplemente se retira del mapa. Si en realidad deseas eliminar el círculo, debes hacerlo desde el mapa y luego fijar el valor del círculo en null.

Formas que el usuario puede editar y arrastrar

Cuando se hace posible la edición de una forma, se le agregan asas que los usuarios pueden emplear para cambiar la posición, la forma y el tamaño de manera directa en el mapa. También puedes hacer que una forma pueda arrastrarse, para que los usuarios tengan la posibilidad de moverla a un sitio diferente del mapa.

Los cambios realizados en el objeto por parte de los usuarios no se mantienen de una sesión a otra. Si deseas que se guarden estas ediciones, debes capturar y almacenar la información tú mismo.

Hacer que se pueda editar una forma

Cualquier forma (polilíneas, polígonos, círculos y rectángulos) puede configurarse para que el usuario pueda editarla fijando, en las opciones de esta, el valor de editable en true.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

Ver el ejemplo (user-editable-shapes.html).

Hacer que se pueda arrastrar una forma

De manera predeterminada, una forma dibujada en el mapa permanecerá fija en su posición. Para que los usuarios puedan arrastrar una forma hasta una ubicación diferente del mapa, fija draggable en el valor true en las opciones de la forma.

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

Al habilitar la posibilidad de arrastre en un polígono o una polilínea, también debes considerar hacer que estos se conviertan en líneas geodésicas fijando el valor de su propiedad geodesic en true.

Un polígono geodésico conservará su verdadera forma geográfica cuando se mueva, lo cual hará que se muestre distorsionado al moverse hacia el norte o el sur en la proyección Mercator. Los polígonos no geodésicos siempre conservan su apariencia inicial en la pantalla.

En una polilínea geodésica, los segmentos de esta se dibujan como el trazado más corto entre dos puntos de la superficie terrestre suponiendo que la Tierra es una esfera, en contraposición a lo que sucede con las líneas rectas de la proyección Mercator.

Para obtener más información sobre los sistemas de coordenadas, consulta la documentación sobre MapTypes.

En el mapa siguiente se muestran dos triángulos que tienen dimensiones y tamaños prácticamente idénticos. El valor de la propiedad geodesic del triángulo rojo se ha fijado en true. Observa el cambio en su forma a medida que se desplaza hacia el norte.

Ver el ejemplo (polygon-draggable.html).

Escuchar eventos de edición

Cuando se edita una forma, se activa un evento al completarse la edición. A continuación, se muestran los eventos en cuestión.

Forma Eventos
Círculo radius_changed
center_changed
Polígono insert_at
remove_at
set_at

El receptor debe configurarse en el trazado del polígono. Si el polígono tiene varios trazados, debe configurarse en cada uno un receptor.

Polilínea insert_at
remove_at
set_at

El receptor debe configurarse en el trazado de la polilínea.

Rectángulo bounds_changed

Algunos fragmentos de código:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

Consulta un ejemplo de administración de un evento de edición en un rectángulo: Ver el ejemplo (rectangle-event.html).

Escuchar eventos de arrastre

Cuando se arrastra una forma, se activan eventos al iniciarse y finalizar la acción de arrastre, y durante esta. Los eventos siguientes se activan para polilíneas, polígonos, círculos y rectángulos.

Evento Descripción
dragstart Se activa cuando el usuario comienza a arrastrar la forma.
drag Se activa de manera repetida mientras el usuario arrastra la forma.
dragend Se activa cuando el usuario deja de arrastrar la forma.

Para obtener más información sobre administración de eventos, consulta la documentación sobre eventos.

Enviar comentarios sobre...

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