Formas e linhas

É possível adicionar várias formas a um mapa. Elas são objetos vinculados a uma coordenada de latitude/longitude. Estas são as formas disponíveis: linhas, polígonos, círculos e retângulos. Também é possível usar uma configuração em que os usuários podem editar ou arrastar as formas.

Polilinhas

Para desenhar uma linha no mapa, use uma polilinha. A classe Polyline define uma sobreposição linear de segmentos de linha conectados no mapa. Um objeto Polyline é composto por uma matriz de locais LatLng e cria uma série de segmentos de linha que conectam esses locais em uma sequência ordenada.

Adicionar uma polilinha

O construtor de Polyline usa um conjunto de PolylineOptions para especificar as coordenadas de LatLng da linha e um conjunto de estilos para ajustar o comportamento visual da polilinha.

Objetos Polyline são desenhados como uma série de segmentos retos no mapa. Você pode especificar cores, espessuras e opacidades personalizadas para o traço da linha em PolylineOptions durante a construção dela, ou alterar essas propriedades posteriormente. Uma polilinha permite os estilos de traço a seguir:

• strokeColor especifica uma cor HTML hexadecimal no formato "#FFFFFF". A classe Polyline não permite cores com nome.
• strokeOpacity especifica um valor numérico entre 0.0 e 1.0 para determinar a opacidade da cor da linha. O padrão é 1.0.
• strokeWeight especifica a espessura da linha em pixels.

A propriedade editable da polilinha especifica se os usuários podem editar a forma. Consulte formas editáveis pelo usuário a seguir. Da mesma maneira, você pode definir a propriedade draggable para permitir que os usuários arrastem a linha.

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

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

Remover uma polilinha

Para remover uma polilinha do mapa, chame o método setMap(), transmitindo null como argumento. No exemplo a seguir, flightPath é um objeto de polilinha:

flightPath.setMap(null);

O método acima não exclui a polilinha, apenas a remove do mapa. Se a sua intenção é a exclusão, remova a polilinha do mapa e defina-a como null.

Inspecionar uma polilinha

Uma polilinha especifica uma série de coordenadas como uma matriz de objetos LatLng. Essas coordenadas determinam o caminho da linha. Para recuperar as coordenadas, chame getPath(), que retorna uma matriz do tipo MVCArray. Manipule e inspecione a matriz usando as operações a seguir:

• getAt() retorna o objeto LatLng com um determinado valor de índice baseado em zero.
• insertAt() insere um objeto LatLng transmitido com um determinado valor de índice baseado em zero. Todas as coordenadas existentes nesse valor são repassadas.
• removeAt() remove um objeto LatLng com um determinado valor de índice baseado em zero.

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

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

Personalizar uma polilinha

Adicione imagens vetoriais a uma polilinha na forma de símbolos. Com uma combinação de símbolos e da classe PolylineOptions, você tem um grande controle sobre a aparência das polilinhas no seu mapa. Consulte informações sobre setas, linhas tracejadas, símbolos personalizados e símbolos animados em Símbolos.

Polígonos

Um polígono representa uma área envolvida por um caminho (ou loop) fechado, identificado por uma série de coordenadas. Os objetos Polygon são parecidos com os Polyline, porque são formados por uma série de coordenadas em uma sequência ordenada. Os polígonos são desenhados com um traço e um preenchimento. Defina cores, espessuras e opacidades personalizadas para a borda do polígono (o traço) e cores e opacidades personalizadas para a área envolvida (o preenchimento). Indique as cores no formato HTML hexadecimal. Nomes de cores não são permitidos.

Objetos Polygon podem descrever formas complexas, incluindo:

• Várias áreas não contíguas definidas por um único polígono.
• Áreas com buracos.
• Interseções de uma ou mais áreas.

Para definir uma forma complexa, use um polígono com vários caminhos.

Observação: a camada de dados oferece uma maneira simples de desenhar polígonos. Ela processa a rotação dos polígonos para você, facilitando o desenho de polígonos com buracos. Consulte a documentação sobre camada de dados.

Adicionar um polígono

Como uma área poligonal pode incluir vários caminhos diferentes, a propriedade paths do objeto Polygon especifica uma matriz de matrizes. Cada uma é do tipo MVCArray e define uma sequência diferente de coordenadas LatLng ordenadas.

Para polígonos simples que consistem em apenas um caminho, você pode construir um Polygon usando uma única matriz de coordenadas LatLng. A API Maps JavaScript converte a matriz simples em uma matriz de matrizes durante a construção, ao armazená-la na propriedade paths. A API apresenta um método getPath() simples para polígonos compostos por um caminho.

A propriedade editable do polígono especifica se os usuários podem editar a forma. Consulte formas editáveis pelo usuário abaixo. Da mesma maneira, você pode definir a propriedade draggable para permitir que os usuários arrastem a forma.

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

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

Preenchimento automático de polígonos

O objeto Polygon no exemplo acima consiste em quatro conjuntos de coordenadas LatLng. No entanto, os primeiros e os últimos conjuntos definem o mesmo local, o que completa o loop. Na prática, como os polígonos definem áreas fechadas, não é necessário especificar o último conjunto de coordenadas. A API Maps JavaScript completa automaticamente o polígono, desenhando um traço que conecta o último ao primeiro local de qualquer caminho específico.

O exemplo a seguir é idêntico ao anterior, exceto pela omissão do último objeto LatLng.

Remover um polígono

Para remover um polígono do mapa, chame o método setMap(), transmitindo null como argumento. No exemplo a seguir, bermudaTriangle é um objeto de polígono:

bermudaTriangle.setMap(null);

O método acima não exclui o polígono, apenas o remove do mapa. Se a sua intenção é a exclusão, remova o polígono do mapa e defina-o como null.

Inspecionar um polígono

Um polígono especifica uma série de coordenadas como uma matriz de matrizes, em que cada uma é do tipo MVCArray. Cada "folha" é uma matriz de coordenadas LatLng que especificam um único caminho. Para recuperar essas coordenadas, chame o método getPaths() do objeto Polygon. Como a matriz é um MVCArray, ela precisa ser processada e inspecionada usando as seguintes operações:

• getAt() retorna o objeto LatLng com um determinado valor de índice baseado em zero.
• insertAt() insere um objeto LatLng transmitido com um determinado valor de índice baseado em zero. Todas as coordenadas existentes nesse valor são repassadas.
• removeAt() remove um objeto LatLng com um determinado valor de índice baseado em zero.

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

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

Colocar um buraco em um polígono

Para criar uma área vazia em um polígono, é necessário criar dois caminhos, um dentro do outro. Para criar o buraco, as coordenadas que definem o caminho interno devem estar na ordem oposta das que definem o caminho externo. Por exemplo, para coordenadas do caminho externo no sentido horário, o caminho interno tem que ser na ordem anti-horária.

Observação: a camada de dados processa a ordem dos caminhos internos e externos para você, facilitando o desenho de polígonos com buracos. Consulte a documentação sobre a camada de dados.

O exemplo a seguir desenha um polígono com dois caminhos, sendo que o interno segue a direção oposta do externo.

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

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

Retângulos

Além de uma classe Polygon genérica, a API Maps JavaScript inclui uma classe específica para objetos Rectangle, simplificando a construção.

Adicionar um retângulo

Um Rectangle é semelhante a um Polygon, em que você pode definir cores, espessuras e opacidades personalizadas para a borda do retângulo (o traço) e cores e opacidades personalizadas para a área dentro dele (o preenchimento). As cores devem ser indicadas no estilo HTML numérico hexadecimal.

Diferentemente de um Polygon, não é possível definir paths para um Rectangle. Os retângulos têm uma propriedade bounds que define a forma especificando um objeto google.maps.LatLngBounds para eles.

A propriedade editable do retângulo especifica se os usuários podem editar a forma. Consulte formas editáveis pelo usuário a seguir. Você também pode definir a propriedade draggable para permitir que os usuários arrastem o retângulo.

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

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

O código a seguir cria um retângulo cada vez que o usuário muda o zoom no mapa. O tamanho do retângulo é determinado pela janela de visualização.

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

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

Remover um retângulo

Para remover um retângulo do mapa, chame o método setMap(), transmitindo null como argumento.

rectangle.setMap(null);

O método acima não exclui o retângulo, apenas o remove do mapa. Se a sua intenção é a exclusão, remova o retângulo do mapa e defina-o como null.

Círculos

Além da classe Polygon genérica, a API Maps JavaScript inclui uma classe específica para objetos Circle, simplificando a construção.

Adicionar um círculo

Um Circle é semelhante a um Polygon, em que você pode definir cores, espessuras e opacidades personalizadas para a borda do círculo (o traço) e cores e opacidades personalizadas para a área dentro dele (o preenchimento). As cores devem ser indicadas no estilo HTML numérico hexadecimal.

Diferentemente de um Polygon, não é possível definir paths para um objeto Circle. O círculo tem duas propriedades adicionais que definem a forma:

• center especifica o objeto google.maps.LatLng do centro do círculo.
• radius especifica o raio do círculo, em metros.

A propriedade editable do círculo especifica se os usuários podem editar a forma. Consulte formas editáveis pelo usuário abaixo. Da mesma maneira, você pode definir a propriedade draggable para permitir que os usuários arrastem o 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.

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

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

Remover um círculo

Para remover um círculo do mapa, chame o método setMap(), transmitindo null como argumento.

circle.setMap(null);

O método acima não exclui o círculo, apenas o remove do mapa. Se a sua intenção é a exclusão, remova o círculo do mapa e defina-o como null.

Formas editáveis e arrastáveis pelo usuário

Uma forma que se torna editável recebe alças, que as pessoas usam para mudar a posição, o formato e o tamanho dela diretamente no mapa. Também é possível tornar uma forma arrastável de modo que seja movida para diferentes locais no mapa.

As mudanças feitas nos objetos pelos usuários não persistem de uma sessão a outra. Para salvar as edições, capture e armazene as informações manualmente.

Tornar uma forma editável

Qualquer forma (polilinhas, polígonos, círculos e retângulos) pode ser definida como editável pelo usuário, configurando editable como true nas opções dela.

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

Exemplo

Tornar uma forma arrastável

Por padrão, uma forma desenhada no mapa tem posição fixa. Quando você define draggable como true nas opções, os usuários podem arrastar a forma para um local diferente no mapa.

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

Ao permitir que um polígono ou uma polilinha sejam arrastados, considere também torná-los geodésicos, definindo a propriedade geodesic como true.

Quando um polígono geodésico é movido, a forma geográfica é mantida, fazendo com que pareça distorcido na movimentação para norte ou sul na projeção de Mercator. Os não geodésicos sempre mantêm a aparência inicial na tela.

Em uma polilinha geodésica, os segmentos são desenhados na projeção de Mercator como o caminho mais curto entre dois pontos na superfície da Terra (supondo que ela seja uma esfera), em vez de linhas retas.

Para mais informações sobre sistemas de coordenadas, consulte o guia sobre coordenadas de mapa e bloco.

O mapa a seguir mostra dois triângulos com tamanhos e dimensões quase iguais. No triângulo vermelho, a propriedade geodesic é definida como true. Observe como o formato dele muda quando é deslocado para o norte.

Exemplo

Ouvir eventos de edição

Quando uma forma é editada, um evento é disparado na conclusão da edição. Esses eventos são listados abaixo.

Alguns snippets de código úteis:

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.');
});

Este é um exemplo do processamento de um evento de edição em um retângulo.

Ouvir eventos de arrastar

Quando uma forma é arrastada, são disparados eventos no início, no término e durante a ação. Os eventos a seguir são disparados para polilinhas, polígonos, círculos e retângulos.

Consulte a documentação para mais informações sobre como tratar eventos.