Formas y líneas

Selecciona la plataforma: Android iOS JavaScript

Puedes agregar varias formas a tu mapa. Una forma es un objeto del mapa que está asociado a una coordenada de latitud y longitud. Estas son las formas disponibles: líneas, polígonos, círculos y rectángulos. También puedes configurar las formas para que los usuarios puedan editarlas o arrastrarlas.

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 consta de un array de ubicaciones LatLng y crea una serie de segmentos de líneas que conectan esas ubicaciones en una secuencia ordenada.

Cómo agregar una polilínea

El constructor Polyline toma un conjunto de PolylineOptions que especifica las coordenadas LatLng de la línea y un conjunto de opciones de diseño para ajustar el comportamiento visual de la polilínea.

Los objetos Polyline se dibujan como una serie de segmentos rectos en el mapa. Al crear tu línea, puedes especificar colores, opacidades y grosores personalizados para el trazo en PolylineOptions, o puedes cambiar estas propiedades después de la construcción. Una polilínea admite las siguientes opciones de diseño para el trazo:

• strokeColor especifica un color HTML hexadecimal con el formato "#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.

La propiedad editable de la polilínea indica si los usuarios pueden editar la forma. Consulta la sección Formas que los usuarios pueden editar a continuación. De manera similar, puedes configurar la propiedad draggable para permitir que los usuarios arrastren la línea.

TypeScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

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

  const 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 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const 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 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;
index.js

Nota: El código JavaScript se genera al compilar el fragmento de TypeScript.

Ver ejemplo

Prueba la muestra

JSFiddle.net Google Cloud Shell

Cómo quitar una polilínea

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

flightPath.setMap(null);

Ten en cuenta que, con el método anterior, no se borra la polilínea. Simplemente se quita del mapa. Si deseas borrar la polilínea, debes quitarla del mapa y, luego, establecer su valor como null.

Cómo inspeccionar una polilínea

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

• getAt() muestra un objeto LatLng con un valor de índice determinado basado en cero.
• insertAt() inserta un objeto LatLng que se pasó con un valor de índice determinado basado en cero. Ten en cuenta que las coordenadas existentes con ese valor de índice se desplazan hacia delante.
• removeAt() quita un objeto LatLng con un valor de índice determinado basado en cero.

Nota: No puedes recuperar el elemento de orden i de un array mediante la sintaxis mvcArray[i]. Debes usar mvcArray.getAt(i).

TypeScript

// 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.

let poly: google.maps.Polyline;
let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    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: google.maps.MapMouseEvent) {
  const path = poly.getPath();

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

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

// 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.
let poly;
let 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) {
  const 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.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

window.initMap = initMap;
index.js

Nota: El código JavaScript se genera al compilar el fragmento de TypeScript.

Ver ejemplo

Prueba la muestra

JSFiddle.net Google Cloud Shell

Cómo personalizar una polilínea

Puedes agregar imágenes basadas en vectores a una polilínea en forma de símbolos. La combinación de símbolos y la clase PolylineOptions te da mucho control sobre el aspecto de las polilíneas de tu mapa. Consulta el artículo Símbolos para obtener información sobre las flechas, las líneas discontinuas, los símbolos personalizados y los símbolos animados.

Polígonos

Un polígono representa un área delimitada por un trazado cerrado (o bucle), que se define a través de una serie de coordenadas. Los objetos Polygon son similares a los objetos Polyline, ya que constan de una serie de coordenadas en 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 (el relleno). Los colores deben indicarse en formato HTML hexadecimal. No se admiten nombres de colores.

Los objetos Polygon pueden describir formas complejas, incluidas las siguientes:

• Múltiples áreas no contiguas definidas por un solo polígono
• Áreas con agujeros
• Intersecciones de una o más áreas

Para definir una forma compleja, debes usar un polígono con varios trazados.

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

Cómo agregar un polígono

Dado que un área poligonal puede incluir varios trazados separados, la propiedad paths del objeto Polygon especifica un array de arrays, cada uno de tipo MVCArray. Cada array define una secuencia separada de coordenadas LatLng ordenadas.

En el caso de los polígonos simples que constan de un solo trazado, puedes construir un Polygon con un único array de coordenadas LatLng. La API de Maps JavaScript convertirá el array simple en un array de arrays después de la construcción, cuando se almacene en la propiedad paths. La API proporciona un método getPath() simple para los polígonos que constan de un trazado.

Nota: Aunque construyas un polígono simple de esta manera, deberás recuperar los valores del polígono manipulando el trazado como un MVCArray.

La propiedad editable del polígono indica si los usuarios pueden editar la forma. Consulta la sección Formas que los usuarios pueden editar a continuación. De manera similar, puedes configurar la propiedad draggable para permitir que los usuarios arrastren la forma.

TypeScript

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

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

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

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

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const 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.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js

Nota: El código JavaScript se genera al compilar el fragmento de TypeScript.

Ver ejemplo

Prueba la muestra

JSFiddle.net Google Cloud Shell

Autocompletado de polígonos

El Polygon del ejemplo anterior consta de cuatro conjuntos de coordenadas LatLng, pero ten en cuenta que el primer y el último conjunto definen la misma ubicación, lo que completa el bucle. No obstante, dado que los polígonos definen áreas cerradas, en la práctica no necesitas especificar el último conjunto de coordenadas. La API de Maps JavaScript completará automáticamente el polígono dibujando un trazo que conecte la última ubicación con la primera para cualquier trazado.

El siguiente ejemplo es idéntico al anterior, excepto que se omite el último conjunto LatLng: ver ejemplo.

Cómo quitar un polígono

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

bermudaTriangle.setMap(null);

Ten en cuenta que, con el método anterior, no se borra el polígono. Simplemente se quita del mapa. Si deseas borrar el polígono, debes quitarlo del mapa y, luego, establecer su valor como null.

El proceso para quitar un polígono se asemeja al de las polilíneas. Para ver cómo funciona el código con una polilínea, consulta este ejemplo.

Cómo inspeccionar un polígono

Un polígono especifica su serie de coordenadas como un array de arrays, en el que cada array es del tipo MVCArray. Cada array "hoja" es un array de coordenadas LatLng que especifican un trazado único. Para recuperar estas coordenadas, llama al método getPaths() del objeto Polygon. Dado que el array es un MVCArray, deberás inspeccionarlo y manipularlo mediante las siguientes operaciones:

• getAt() muestra un objeto LatLng con un valor de índice determinado basado en cero.
• insertAt() inserta un objeto LatLng que se pasó con un valor de índice determinado basado en cero. Ten en cuenta que las coordenadas existentes con ese valor de índice se desplazan hacia delante.
• removeAt() quita un objeto LatLng con un valor de índice determinado basado en cero.

Nota: No puedes recuperar el elemento de orden i de un array mediante la sintaxis mvcArray[i]. Debes usar mvcArray.getAt(i).

TypeScript

// 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.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

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

  // Define the LatLng coordinates for the polygon.
  const triangleCoords: google.maps.LatLngLiteral[] = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Construct the polygon.
  const 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();
}

function showArrays(event: any) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this as google.maps.Polygon;
  const vertices = polygon.getPath();

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

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const 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);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

// 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.
let map;
let 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.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Construct the polygon.
  const 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();
}

function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this;
  const vertices = polygon.getPath();
  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const 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);
}

window.initMap = initMap;
index.js

Nota: El código JavaScript se genera al compilar el fragmento de TypeScript.

Ver ejemplo

Prueba la muestra

JSFiddle.net Google Cloud Shell

Cómo colocar un agujero en un polígono

Para crear un área vacía dentro de un polígono, debes crear dos trazados, uno dentro del otro. Para crear el agujero, 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 están en sentido horario, el trazado interno debe hallarse en el sentido contrario.

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

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

TypeScript

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
    }
  );

  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { 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.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];

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

  bermudaTriangle.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

// This example creates a triangular polygon with a hole in it.
function initMap() {
  const 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.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { 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.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];
  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
index.js

Nota: El código JavaScript se genera al compilar el fragmento de TypeScript.

Ver ejemplo

Prueba la muestra

JSFiddle.net Google Cloud Shell

Rectángulos

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

Cómo agregar un rectángulo

Un Rectangle es similar a un Polygon, ya 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 dentro del rectángulo (el relleno). Los colores deben indicarse en formato HTML numérico hexadecimal.

A diferencia de Polygon, no defines paths para Rectangle. Un rectángulo tiene una propiedad bounds que define su forma especificando google.maps.LatLngBounds para el rectángulo.

La propiedad editable del rectángulo indica si los usuarios pueden editar la forma. Consulta la sección Formas que los usuarios pueden editar a continuación. De manera similar, puedes configurar la propiedad draggable para permitir que los usuarios arrastren el rectángulo.

TypeScript

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

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

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;
index.js

Nota: El código JavaScript se genera al compilar el fragmento de TypeScript.

Ver ejemplo

Prueba la muestra

JSFiddle.net Google Cloud Shell

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

TypeScript

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

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 11,
      center: { lat: 40.74852, lng: -73.981687 },
      mapTypeId: "terrain",
    }
  );

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

  map.addListener("zoom_changed", () => {
    // 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,
      bounds: map.getBounds() as google.maps.LatLngBounds,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 40.74852, lng: -73.981687 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // 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,
      bounds: map.getBounds(),
    });
  });
}

window.initMap = initMap;
index.js

Nota: El código JavaScript se genera al compilar el fragmento de TypeScript.

Ver ejemplo

Prueba la muestra

JSFiddle.net Google Cloud Shell

Cómo quitar un rectángulo

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

rectangle.setMap(null);

Ten en cuenta que, con el método anterior, no se borra el rectángulo. Simplemente se quita del mapa. Si deseas borrar el rectángulo, debes quitarlo del mapa y, luego, establecer su valor como null.

El proceso para quitar un rectángulo se asemeja al de las polilíneas. Para ver cómo funciona el código con una polilínea, consulta este ejemplo.

Círculos

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

Cómo agregar un círculo

Un Circle es similar a un Polygon, ya 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 dentro del círculo (el relleno). Los colores deben indicarse en formato HTML numérico hexadecimal.

A diferencia de Polygon, no defines paths para Circle. En cambio, un círculo tiene dos propiedades adicionales que definen su forma:

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

La propiedad editable del círculo indica si los usuarios pueden editar la forma. Consulta la sección Formas que los usuarios pueden editar a continuación. De manera similar, puedes configurar la propiedad draggable para permitir que los usuarios arrastren el círculo.

TypeScript

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

// First, create an object containing LatLng and population for each city.

interface City {
  center: google.maps.LatLngLiteral;
  population: number;
}

const citymap: Record<string, City> = {
  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(): void {
  // Create the map.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 37.09, 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 (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

Nota: Consulta la guía sobre cómo utilizar TypeScript y Google Maps.

JavaScript

const 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.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 37.09, 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 (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

window.initMap = initMap;
index.js

Nota: El código JavaScript se genera al compilar el fragmento de TypeScript.

Ver ejemplo

Prueba la muestra

JSFiddle.net Google Cloud Shell

Cómo quitar un círculo

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

circle.setMap(null);

Ten en cuenta que, con el método anterior, no se borra el círculo. Simplemente se quita del mapa. Si deseas borrar el círculo, debes quitarlo del mapa y, luego, establecer su valor como null.

El proceso para quitar un círculo se asemeja al de las polilíneas. Para ver cómo funciona el código con una polilínea, consulta este ejemplo.

Formas que los usuarios pueden editar y arrastrar

Al permitir que una forma se pueda editar, se agregan controladores que los usuarios pueden usar para cambiar la posición, la forma y el tamaño directamente en el mapa. También puedes permitir que una forma sea arrastrable para que los usuarios tengan la posibilidad de moverla a un lugar diferente del mapa.

Los cambios que los usuarios realicen en un objeto no se conservan de una sesión a otra. Si deseas que se guarden estas ediciones, debes capturar y almacenar la información por tu cuenta.

Cómo hacer que una forma se pueda editar

Cualquier forma (polilíneas, polígonos, círculos y rectángulos) se puede configurar para que los usuarios puedan editarla; para ello, debes establecer editable en true en las opciones de la forma.

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 ejemplo

Cómo hacer que una forma se pueda arrastrar

De manera predeterminada, una forma dibujada en el mapa permanecerá fija en su posición. Para permitir que los usuarios arrastren una forma a una ubicación diferente en el mapa, debes establecer draggable en 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
});

Cuando habilites el arrastre de un polígono o una polilínea, también debes considerar la posibilidad de que estos sean geodésicos. Para ello, debes establecer la propiedad geodesic en true.

Un polígono geodésico conservará su verdadera forma geográfica cuando se mueva, lo que 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 conservarán su aspecto inicial en la pantalla.

En una polilínea geodésica, los segmentos correspondientes 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 en la proyección Mercator.

Para obtener más información sobre los sistemas de coordenadas, consulta la guía de coordenadas de mapas y mosaicos.

En el siguiente mapa, 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 estableció en true. Observa cómo cambia su forma a medida que se desplaza hacia el norte.

Ver ejemplo

Cómo escuchar eventos de edición

Al editar una forma, se activa un evento cuando la edición se completa. A continuación, se enumeran estos eventos.

Forma	Eventos
Círculo	radius_changed center_changed
Polígono	insert_at remove_at set_at El objeto de escucha debe configurarse en el trazado del polígono. Si el polígono tiene varios trazados, debe configurarse un objeto de escucha en cada uno.
Polilínea	insert_at remove_at set_at El objeto de escucha debe configurarse en el trazado de la polilínea.
Rectángulo	bounds_changed

Algunos fragmentos de código útiles:

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 sobre cómo controlar un evento de edición en un rectángulo: ver ejemplo.

Cómo escuchar eventos de arrastre

Al arrastrar una forma, se activan eventos cuando comienza y finaliza la acción de arrastre, y durante esta. Los siguientes eventos 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 cómo controlar eventos, consulta la documentación sobre eventos.