Formas

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.
Selecione a plataforma: Android iOS JavaScript

É possível adicionar várias formas a um mapa. Uma forma é um objeto no mapa, vinculado a uma coordenada de latitude/longitude. As seguintes formas estão disponíveis: linhas, polígonos, círculos e retângulos. Também é possível configurar as formas para que os usuários possam editá-las ou arrastá-las.

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 consiste em 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 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, pesos e opacidades personalizados para o traço da linha em PolylineOptions ao construir sua linha ou alterar essas propriedades após a construção. Uma polilinha permite os estilos de traço a seguir:

  • strokeColor especifica uma cor HTML hexadecimal no formato "#FFFFFF". A classe Polyline não é compatível com cores nomeadas.
  • 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 largura da linha em pixels.

A propriedade editable da polilinha especifica se os usuários podem editar a forma. Veja as formas editáveis pelo usuário abaixo. Da mesma forma, é possível definir a propriedade draggable para permitir que os usuários arrastem a linha.

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 exemplo

Testar amostra

Remover uma polilinha

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

flightPath.setMap(null);

Observe que o método acima não exclui a polilinha. Ela remove a polilinha do mapa. Para excluir a polilinha, remova-a do mapa e defina a polilinha 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 retornará uma matriz do tipo MVCArray. É possível manipular e inspecionar a matriz usando as seguintes operações:

  • getAt() retorna o objeto LatLng com um determinado valor de índice baseado em zero.
  • insertAt() insere uma LatLng transmitida com um determinado valor de índice baseado em zero. As coordenadas atuais com esse valor de índice são movidas para frente.
  • removeAt() remove um objeto LatLng com um determinado valor de índice baseado em zero.

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;

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 exemplo

Testar amostra

Personalizar uma polilinha

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

Polígonos

Um polígono representa uma área envolvida por um caminho (ou loop) fechado, que é definido por uma série de coordenadas. Os objetos Polygon são parecidos com os objetos 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. Você pode definir cores, pesos e opacidades personalizadas para a borda do polígono (o traço) e cores e opacidades personalizadas para a área delimitada (o preenchimento). As cores precisam ser indicadas em formato HTML hexadecimal. Nomes de cores não são permitidos.

Os objetos Polygon podem descrever formas complexas, incluindo:

  • Várias áreas não contíguas definidas por um único polígono.
  • Áreas com furos internos.
  • 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 fornece uma maneira simples de desenhar polígonos. Ela lida com o enrolamento de polígonos, facilitando a exibição de polígonos com buracos. Consulte a documentação da camada de dados.

Adicionar um polígono

Como uma área poligonal pode incluir vários caminhos separados, a propriedade paths do objeto Polygon especifica uma matriz, cada uma do tipo MVCArray. Cada matriz define uma sequência separada 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 converterá a matriz simples em uma matriz no momento da construção ao armazená-la na propriedade paths. A API oferece um método getPath() simples para polígonos que consistem em um caminho.

A propriedade editable do polígono especifica se os usuários podem editar a forma. Veja formas editáveis pelo usuário abaixo. Da mesma forma, é possível definir a propriedade draggable para permitir que os usuários arrastem a 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 exemplo

Testar amostra

Preenchimento automático de polígonos

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

O exemplo a seguir é idêntico ao anterior, exceto que o último LatLng é omitido: ver exemplo.

Remover um polígono

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

bermudaTriangle.setMap(null);

Observe que o método acima não exclui o polígono. Ela remove o polígono do mapa. Se você quiser excluir o polígono, remova-o do mapa e defina o próprio polígono como null.

Inspecionar um polígono

Um polígono especifica a série de coordenadas como uma matriz, em que cada matriz é do tipo MVCArray. Cada matriz "quot;leaf" é 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, você precisará manipular e inspecioná-la usando as seguintes operações:

  • getAt() retorna o objeto LatLng com um determinado valor de índice baseado em zero.
  • insertAt() insere uma LatLng transmitida com um determinado valor de índice baseado em zero. As coordenadas atuais com esse valor de índice são movidas para frente.
  • removeAt() remove um objeto LatLng com um determinado valor de índice baseado em zero.

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 exemplo

Testar amostra

Colocar um buraco em um polígono

Para criar uma área vazia dentro de um polígono, é necessário criar dois caminhos, um dentro do outro. Para criar o buraco, as coordenadas que definem o caminho interno precisam estar na ordem oposta às que definem o caminho externo. Por exemplo, se as coordenadas do caminho externo estiverem no sentido horário, o caminho interno precisará estar no sentido anti-horário.

Observação:a camada de dados gerencia a ordem dos caminhos internos e externos para você. Assim, é mais fácil desenhar polígonos com buracos. Consulte a documentação da camada de dados.

O exemplo a seguir desenha um polígono com dois caminhos, com o caminho interno ferido na direção oposta ao caminho 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 exemplo

Testar amostra

Retângulos

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

Adicionar um retângulo

Um Rectangle é semelhante a um Polygon, no qual é possível definir cores, pesos e opacidades personalizados para a borda do retângulo (o traço) e cores e opacidades personalizadas para a área dentro do retângulo (o preenchimento). As cores precisam ser indicadas em estilo HTML numérico hexadecimal.

Ao contrário de um Polygon, você não define paths para um Rectangle. Em vez disso, um retângulo tem uma propriedade bounds que define sua forma especificando um google.maps.LatLngBounds para o retângulo.

A propriedade editable do retângulo especifica se os usuários podem editar a forma. Veja as formas editáveis pelo usuário abaixo. Da mesma forma, você pode definir a propriedade draggable para permitir que os usuários arrastem o retâ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 exemplo

Testar amostra

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

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 exemplo

Testar amostra

Remover um retângulo

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

rectangle.setMap(null);

Observe que o método acima não exclui o retângulo. O retângulo é removido do mapa. Se você quiser excluir o retângulo, remova-o do mapa e defina o próprio retângulo como null.

Círculos

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

Adicionar um círculo

Um Circle é semelhante a um Polygon, no qual é possível definir cores, pesos e opacidades personalizados para a borda do círculo (o traço) e cores e opacidades personalizadas para a área dentro do círculo (o preenchimento). As cores devem ser indicadas no estilo HTML numérico hexadecimal.

Ao contrário de um Polygon, você não define paths para um Circle. Em vez disso, um círculo tem duas propriedades adicionais que definem a forma:

  • center especifica o 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. Veja formas editáveis pelo usuário abaixo. Da mesma forma, você pode definir a propriedade draggable para permitir que os usuários arrastem o 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 exemplo

Testar amostra

Remover um círculo

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

circle.setMap(null);

Observe que o método acima não exclui o círculo. Ela remove o círculo do mapa. Se você quiser excluir o círculo, remova-o do mapa e defina o próprio círculo como null.

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

Tornar uma forma editável adiciona alças à forma, que as pessoas podem usar para reposicionar, remodelar e redimensionar a forma diretamente no mapa. Também é possível arrastar uma forma para que as pessoas possam movê-la para outro lugar no mapa.

As alterações efetuadas nos objetos pelos usuários não persistem entre sessões. Se você quiser salvar as edições do usuário, precisará capturar e armazenar as informações por conta própria.

Tornar uma forma editável

Qualquer forma (polilinhas, polígonos, círculos e retângulos) pode ser definida como editável pelo usuário, definindo editable como true nas opções da 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 exemplo

Tornar uma forma arrastável

Por padrão, uma forma desenhada no mapa tem posição fixa. Para permitir que os usuários arrastem uma forma para outro local no mapa, defina draggable como true nas opções 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
});

Ao ativar o recurso de arrastar em um polígono ou polilinha, considere também definir o polígono ou polilinha geodésica, definindo a propriedade geodesic como true.

Um polígono geodésico manterá sua forma geográfica verdadeira quando for movido, fazendo com que o polígono pareça distorcido à medida que é movido para o norte ou para o sul na projeção de Mercator. Os polígonos não geodésicos sempre manterão a aparência inicial na tela.

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

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 de aproximadamente o mesmo tamanho e dimensões. A propriedade geodesic definida para o triângulo vermelho é true. Observe como sua forma muda à medida que se desloca para o norte.

Ver exemplo

Escutar eventos de edição

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

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

A escuta deve ser definida no caminho do polígono. Se o polígono tiver vários caminhos, será necessário definir um listener em cada um deles.

Polyline insert_at
remove_at
set_at

A escuta precisa ser definida no caminho da polilinha.

Retângulo bounds_changed

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

Veja um exemplo de processamento de um evento de edição em um retângulo: Ver exemplo.

Escutar eventos de arrastar

Quando uma forma é arrastada, os eventos são acionados no início e no fim da ação de arrastar, assim como durante a ação de arrastar. Os eventos a seguir são disparados para polilinhas, polígonos, círculos e retângulos.

Evento Descrição
dragstart Disparado quando o usuário começa a arrastar a forma.
drag Disparado repetidamente enquanto o usuário está arrastando a forma.
dragend Acionado quando o usuário para de arrastar a forma.

Para mais informações sobre o gerenciamento de eventos, consulte a documentação sobre eventos.