Formas

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.
Seleccionar plataforma: Android iOS JavaScript

Puedes agregar varias formas a tu mapa. Una forma es un objeto en el mapa vinculado a una coordenada de latitud y longitud. Están disponibles las siguientes formas: líneas, polígonos, círculos y rectángulos. También puedes configurar tus 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 consiste en un arreglo de ubicaciones LatLng y crea una serie de segmentos de líneas que conectan esas ubicaciones en una secuencia ordenada.

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 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 cuando construyas tu línea, o puedes 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 formato "#FFFFFF". La clase Polyline no admite colores con nombre.
  • 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 especifica si los usuarios pueden editar la forma. Consulta formas que el usuario puede 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;

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;
Ver ejemplo

Probar la muestra

Eliminar una polilínea

Para quitar una polilínea del mapa, llama al método setMap() y pasa 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 elimina la polilínea. Elimina la polilínea del mapa. En cambio, si deseas borrar la polilínea, debes quitarla del mapa y, luego, establecer la polilínea en null.

Inspeccionar una polilínea

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

  • getAt() muestra LatLng en un valor de índice determinado basado en cero.
  • insertAt() inserta un LatLng pasado en un valor de índice basado en cero determinado. Ten en cuenta que las coordenadas existentes en ese valor de índice se mueven hacia adelante.
  • removeAt() quita un LatLng en un valor de índice determinado basado en cero.

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);

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

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;
Ver ejemplo

Probar la muestra

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 mucho control sobre el aspecto de las polilíneas en tu mapa. Consulta Símbolos para obtener información sobre las flechas, las líneas punteadas, los símbolos personalizados y los símbolos animados.

Polígonos

Un polígono representa un área cerrada por una ruta cerrada (o bucle), que se define mediante una serie de coordenadas. Los objetos Polygon son similares 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 borde del polígono (el trazo), y opacidad 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, incluidas las siguientes:

  • 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 proporciona una forma sencilla de dibujar polígonos. Controla el devanado de polígonos por ti, lo que facilita el dibujo de polígonos con orificios. Consulta la documentación de la capa de datos.

Agregar un polígono

Debido a que un área poligonal puede incluir varias rutas separadas, la propiedad paths del objeto Polygon especifica un arreglo de arreglos, cada uno de tipo MVCArray. Cada arreglo define una secuencia separada de coordenadas LatLng ordenadas.

Para polígonos simples que consten de solo una ruta, puedes construir un Polygon usando un solo arreglo de coordenadas LatLng. La API de Maps JavaScript convertirá el arreglo simple en uno de arreglos tras la construcción, cuando se almacene en la propiedad paths. La API proporciona un método getPath() simple para polígonos que constan de una ruta.

La propiedad editable del polígono especifica si los usuarios pueden editar la forma. Consulta formas que el usuario puede 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;

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;
Ver ejemplo

Probar la muestra

Autocompletado de polígonos

El Polygon del ejemplo anterior consta de cuatro conjuntos de coordenadas de LatLng, pero ten en cuenta que el primero y el último definen la misma ubicación, lo que completa el bucle. Sin embargo, en la práctica, dado que los polígonos definen áreas cerradas, no es necesario 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 ruta.

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

Eliminar un polígono

Para quitar un polígono del mapa, llama al método setMap() y pasa 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 elimina el polígono. Elimina el polígono del mapa. En cambio, si deseas borrar el polígono, debes quitarlo del mapa y, luego, configurarlo como null.

Inspeccionar un polígono

Un polígono especifica su serie de coordenadas como un arreglo de arreglos, en el que cada arreglo es del tipo MVCArray. Cada arreglo de “hoja” es un arreglo de coordenadas de LatLng que especifican una ruta única. Para recuperar estas coordenadas, llama al método getPaths() del objeto Polygon. Dado que el arreglo es un MVCArray, deberás manipularlo e inspeccionarlo mediante las siguientes operaciones:

  • getAt() muestra LatLng en un valor de índice determinado basado en cero.
  • insertAt() inserta un LatLng pasado en un valor de índice basado en cero determinado. Ten en cuenta que las coordenadas existentes en ese valor de índice se mueven hacia adelante.
  • removeAt() quita un LatLng en un valor de índice determinado basado en cero.

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;

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;
Ver ejemplo

Probar la muestra

Disponer un orificio en un polígono

Para crear un área vacía dentro de un polígono, debes crear dos rutas, una dentro de la otra. Para crear el orificio, las coordenadas que definen la ruta interna deben estar en el orden opuesto a las que definen la ruta externa. Por ejemplo, si las coordenadas de la ruta externa están en el sentido de las agujas del reloj, la ruta interna debe estar en sentido antihorario.

Nota: La capa de datos controla el orden de las rutas internas y externas, lo que 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 trazado interno se enrolla 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;

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;
Ver ejemplo

Probar la muestra

Rectángulos

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

Agregar un rectángulo

Un objeto Rectangle es similar a un objeto Polygon, ya que puedes definir colores, opacidades y grosores personalizados para el borde del rectángulo (el trazo), y también opacidades y colores personalizados para el área del rectángulo (relleno). Los colores deben indicarse en estilo HTML hexadecimal numérico.

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

La propiedad editable del rectángulo especifica si los usuarios pueden editar la forma. Consulta formas que el usuario puede 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;

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;
Ver ejemplo

Probar la muestra

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 se ve 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;

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;
Ver ejemplo

Probar la muestra

Eliminar un rectángulo

Para quitar 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. Quita el rectángulo del mapa. En cambio, si deseas borrar el rectángulo, debes quitarlo del mapa y, luego, configurarlo como null.

Círculos

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

Agregar un círculo

Un objeto Circle es similar a un objeto Polygon, ya que puedes definir colores, opacidades y grosores personalizados para el borde del círculo (el trazo) y opacidades y colores personalizados para el área del círculo (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 el google.maps.LatLng del centro del círculo.
  • radius especifica el radio del círculo en metros.

La propiedad editable del círculo especifica si los usuarios pueden editar la forma. Consulta formas que el usuario puede 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;

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;
Ver ejemplo

Probar la muestra

Eliminar un círculo

Para quitar 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. Elimina el círculo del mapa. Si, en cambio, deseas eliminar el círculo, debes hacerlo desde el mapa y luego establecer el círculo en null.

Formas que el usuario puede editar y arrastrar

Al hacer que una forma sea editable, se agregan controladores que las personas pueden usar para cambiar la posición, el tamaño y el cambio de forma directamente en el mapa. También puedes hacer que una forma se pueda arrastrar para que las personas puedan moverla a otro lugar del mapa.

Los cambios realizados en el objeto por parte de los usuarios no se mantienen de una sesión a otra. Si quieres guardar las ediciones del usuario, 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) se puede establecer como editable por el usuario al 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

Hacer que se pueda arrastrar una forma

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, establece draggable en true en las opciones de 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 en un polígono o una polilínea, también debes considerar hacer que el polígono o la polilínea sea geodésico. Para ello, establece su propiedad geodesic en true.

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

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

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

En el siguiente mapa, se muestran dos triángulos de aproximadamente el mismo tamaño y las mismas dimensiones. El valor de la propiedad geodesic del triángulo rojo se estableció en true. Observa el cambio en su forma a medida que se desplaza hacia el norte.

Ver ejemplo

Escuchar eventos de edición

Cuando se edita una forma, se activa un evento al completarse la edición. Estos eventos se enumeran a continuación.

Forma Eventos
Palco radius_changed
center_changed
Polígono insert_at
remove_at
set_at

El receptor debe configurarse en la ruta del polígono. Si el polígono tiene varias rutas, se debe establecer un objeto de escucha en cada ruta.

Polilínea insert_at
remove_at
set_at

El receptor debe configurarse en la ruta 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 cómo administrar un evento de edición en un rectángulo: ver el ejemplo.

Escuchar eventos de arrastre

Cuando se arrastra una forma, los eventos se activan durante el inicio y el final de la acción de arrastre, así como durante el arrastre. 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.