Pronto!

Para começar a desenvolver, acesse nossa documentação do desenvolvedor.

Ativar a Google Maps JavaScript API

Para começar, orientaremos você pelo Console do Desenvolvedor do Google para realizar algumas atividades:

  1. Criar ou selecionar um projeto
  2. Ativar a Google Maps JavaScript API e serviços relacionados
  3. Criar chaves apropriadas
Continuar

Formas

É 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 localizações LatLng e cria uma série de segmentos de linha que conectam essas localizações em uma ordem sequencial.

Adicionar uma polilinha

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

Os objetos Polyline são desenhados como uma série de segmentos retos no mapa. Especifique cores, espessuras e opacidades personalizadas para o traço da linha nas PolylineOptions durante a construção da linha ou altere 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 permite 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. Consulte user-editable shapes abaixo. De forma semelhante, defina 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 William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

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

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

  flightPath.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

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

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

  flightPath.setMap(map);
}

Ver o exemplo (polyline-simple.html).

Remover uma polilinha

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

flightPath.setMap(null);

Observe que o método acima não exclui a polilinha. Ele simplesmente remove a polilinha do mapa. Em vez disso, para excluir a polilinha, remova-a do mapa e defina a polilinha propriamente dita como null.

Ver o exemplo (polyline-remove.html).

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 a LatLng de um determinado valor de índice baseado em zero.
  • insertAt() insere uma LatLng passada em um determinado valor de índice baseado em zero. Observe que todas as coordenadas existentes nesse valor de índice são movidas adiante.
  • removeAt() remove uma LatLng de 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.

var poly;
var map;

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

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

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

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

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

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

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

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

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

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

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

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

Ver o exemplo (polyline-complex.html).

Personalizar uma polilinha

Adicione imagens vetoriais a uma polilinha na forma de símbolos. A combinação dos símbolos com a classe PolylineOptions oferece um controle abrangente sobre a aparência das polilinhas no mapa. Consulte Symbols para obter 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, identificado por uma série de coordenadas. Os objetos Polygon são semelhantes a objetos Polyline: consistem em 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.

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 oferece uma forma simples de desenhar polígonos. Ela processa o enrolamento de polígonos para você, facilitando o desenho de polígonos com buracos. Consulte a documentação da camada de dados.

Adicionar um polígono

Como uma área poligonal pode incluir diversos caminhos separados, a propriedade paths do objeto Polygon especifica uma matriz de matrizes, cada uma delas do tipo MVCArray. Cada matriz define uma sequência separada de coordenadas ordenadas LatLng.

Para polígonos simples que consistem em apenas um caminho, construa um Polygon usando uma única matriz de coordenadas LatLng. A Google Maps JavaScript API converte a matriz simples em uma matriz de matrizes durante a construção ao armazená-la na propriedade paths. A API oferece um método simples getPath() para polígonos que consistem em 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. De forma semelhante, defina a propriedade draggable para permitir que os usuários arrastem a forma.

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

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

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

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a simple polygon representing the Bermuda Triangle.

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

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

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

Ver o exemplo (polygon-simple.html).

Preenchimento automático de polígonos

O Polygon no exemplo acima consiste em quatro conjuntos de coordenadas LatLng, mas observe que o primeiro e o último conjuntos definem o mesmo local, concluindo 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 Google Maps JavaScript API conclui automaticamente o polígono, desenhando um traço que conecta a última e a primeira localização de qualquer caminho.

O exemplo a seguir é idêntico ao anterior, exceto pela última LatLng, que é omitida: Ver o exemplo (polygon-autoclose.html).

Remover um polígono

Para remover um polígono do mapa, chame o método setMap() passando null como 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. Ele simplesmente remove o polígono do mapa. Em vez disso, para excluir o polígono, remova-o do mapa e defina o polígono propriamente dito como null.

Inspecionar um polígono

Um polígono especifica a série de coordenadas como uma matriz de matrizes, onde cada matriz é do tipo MVCArray. Cada matriz "folha" é uma matriz de coordenadas LatLng especificando um único caminho. Para recuperar essas coordenadas, chame o método getPaths() do Polygon. Como a matriz é uma MVCArray, é necessário manipulá-la e inspecioná-la usando as seguintes operações:

  • getAt() retorna a LatLng de um determinado valor de índice baseado em zero.
  • insertAt() insere uma LatLng passada em um determinado valor de índice baseado em zero. Observe que todas as coordenadas existentes nesse valor de índice são movidas adiante.
  • removeAt() remove uma LatLng de 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.

var map;
var infoWindow;

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

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

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

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

  infoWindow = new google.maps.InfoWindow;
}

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

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

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

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

  infoWindow.open(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

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

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

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

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

  infoWindow = new google.maps.InfoWindow;
}

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

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

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

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

  infoWindow.open(map);
}

Ver o exemplo (polygon-arrays.html).

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, se as coordenadas do caminho externo estão na ordem horária, o caminho interno deve estar 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 da camada de dados.

O exemplo a seguir desenha um polígono com dois caminhos, com o caminho interno enrolado na direção oposta do caminho externo.

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

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

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

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

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a triangular polygon with a hole in it.

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

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

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

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

Veja o exemplo (polygon-hole.html).

Retângulos

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

Adicionar um retângulo

Um Rectangle é semelhante a um Polygon, pois permite definir cores, espessuras e opacidades personalizadas 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 devem ser indicadas no estilo HTML numérico hexadecimal.

Ao contrário de um Polygon, não é necessário definir paths para um Rectangle. Em vez disso, um retângulo tem a 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. Consulte formas editáveis pelo usuário abaixo. De forma semelhante, defina a propriedade draggable para permitir que os usuários arrastem o retângulo.

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

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

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example adds a red rectangle to a map.

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

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

Ver o exemplo (rectangle-simple.html).

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

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

function initMap() {

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

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

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

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

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

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

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

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

Ver o exemplo (rectangle-zoom.html).

Remover um retângulo

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

rectangle.setMap(null);

Observe que o método acima não exclui o retângulo. Ele simplesmente remove o retângulo do mapa. Em vez disso, para excluir o retângulo, remova-o do mapa e defina o retângulo propriamente dito como null.

Círculos

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

Adicionar um círculo

Um Circle é semelhante a um Polygon, pois permite definir cores, espessuras e opacidades personalizadas 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, não é necessário definir paths para um Circle. Em vez disso, um círculo tem duas propriedades adicionais que definem sua forma:

  • center especifica a 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. De forma semelhante, defina 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.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

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

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example creates circles on the map, representing populations in North
// America.

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

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

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

Ver o exemplo (circle-simple.html).

Remover um círculo

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

circle.setMap(null);

Observe que o método acima não exclui o círculo. Ele simplesmente remove o círculo do mapa. Em vez disso, para excluir o círculo, remova-o do mapa e defina o círculo propriamente dito como null.

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

Torne uma forma editável para adicionar manipuladores a ela, que podem ser usados pelas pessoas para alterar a posição, a forma e o tamanho da forma diretamente no mapa. Além disso, torne uma forma arrastável para permitir que as pessoas a movam para diferentes locais no mapa.

As alterações efetuadas nos objetos pelos usuários não persistem entre sessões. Para salvar as edições do usuário, é necessário capturar e armazenar as informações.

Tornar uma forma editável

Qualquer forma (polilinhas, polígonos e retângulos) pode ser configurada 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 o exemplo (user-editable-shapes.html).

Tornar uma forma arrastável

Por padrão, uma forma desenhada no mapa tem posição fixa. Para permitir que usuários arrastem uma forma para uma localização diferente no mapa, defina draggable como true nas opções da 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 tornar um polígono ou polilinha arrastável, considere também torná-lo geodésicos definindo a propriedade geodesic como true.

Um polígono geodésico retém a forma geográfica verdadeira quando é movido. Por isso, a exibição do polígono é distorcida com a movimentação para norte ou para sul na projeção Mercator. Os polígonos não geodésicos sempre retêm a aparência inicial na tela.

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

Para saber mais sobre sistemas de coordenadas, consulte a documentação de MapTypes.

O mapa a seguir mostra dois triângulos com tamanho e dimensões aproximadamente iguais. A propriedade geodesic do triângulo vermelho está definida como true. Observe como sua forma muda à medida que se desloca para o norte.

Ver o exemplo (polygon-draggable.html).

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

O ouvinte deve ser definido no caminho do polígono. Se o polígono tem vários caminhos, o ouvinte deve ser definido em cada caminho.

Polilinha insert_at
remove_at
set_at

O ouvinte deve ser definindo 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 do processamento de um evento de edição em um retângulo: Veja o exemplo (rectangle-event.html).

Escutar eventos de arrastar

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

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

Para saber mais sobre o processamento de eventos, consulte a documentação sobre eventos.

Enviar comentários sobre…

Google Maps JavaScript API
Google Maps JavaScript API
Precisa de ajuda? Acesse nossa página de suporte.