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

Camada de desenho (biblioteca)

  1. Visão geral
  2. Uso da biblioteca
  3. Opções do DrawingManager
  4. Atualização do controle de ferramentas de desenho
  5. Eventos de desenho

Visão geral

A classe DrawingManager oferece uma interface gráfica para que os usuários desenhem polígonos, retângulos, polilinhas, círculos e marcadores no mapa.

Uso da biblioteca

As ferramentas de desenho são uma biblioteca independente, separada do código JavaScript principal da Maps API. Para usar a funcionalidade contida nessa biblioteca, você precisa primeiro carregá-la usando o parâmetro libraries no URL de bootstrap da Maps API:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
</script>

Após adicionar o parâmetro de bibliotecas, crie um objeto DrawingManager da seguinte forma:

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

Opções do DrawingManager

O construtor DrawingManager aceita um conjunto de opções que definem o grupo de controles a ser exibido, a posição do controle e o estado inicial do desenho.

  • A propriedade drawingMode do DrawingManager define o estado inicial do desenho do DrawingManager. Ela aceita uma constante google.maps.drawing.OverlayType. O padrão é null. Nesse caso, na inicialização do DrawingManager, o modo do cursor é não desenho.
  • A propriedade drawingControl do DrawingManager define a visibilidade da interface de seleção de ferramentas de desenho no mapa. Ela aceita um valor booleano.
  • Também é possível definir a posição do controle e os tipos de sobreposições a serem representados no controle usando a propriedade drawingControlOptions do DrawingManager.
    • position define a posição do controle de desenho no mapa e aceita uma constante google.maps.ControlPosition.
    • drawingModes é uma matriz de constantes google.maps.drawing.OverlayType e define os tipos de sobreposição a incluir no seletor de forma do controle de desenho. O ícone da mão sempre está presente, permitindo que o usuário interaja com o mapa sem desenhar. A ordem das ferramentas no controle corresponde à ordem em que são declaradas na matriz.
  • Um conjunto de propriedades padrão pode ser atribuído a cada tipo de sobreposição, definindo a aparência da sobreposição quando criada pela primeira vez. Elas são definidas na propriedade {overlay}Options da sobreposição (onde {overlay} representa o tipo de sobreposição). Por exemplo, as propriedades de preenchimento, traço, zIndex e capacidade de receber cliques de um círculo são definidas com a propriedade circleOptions. Todos os valores de tamanho, localização ou mapa passados são ignorados. Para obter detalhes completos sobre quais propriedades podem ser definidas, consulte a documentação de referência da API.

Observação: para tornar uma forma editável pelo usuário após sua criação, defina a propriedade editable como true.

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

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

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap"
     async defer></script>
// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

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

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}

Ver o exemplo (drawing-tools.html).

Atualização do controle de ferramentas de desenho

Para atualizar o objeto DrawingManager após sua criação, chame setOptions() e passe novos valores.

drawingManager.setOptions({
  drawingControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT,
    drawingModes: ['marker']
  }
});

Para ocultar ou mostrar o controle de ferramentas de desenho:

// To hide:
drawingManager.setOptions({
  drawingControl: false
});

// To show:
drawingManager.setOptions({
  drawingControl: true
});

Para remover o controle de ferramentas de desenho do objeto map:

drawingManager.setMap(null);

Quando o controle de desenho é oculto, as ferramentas de desenho não são exibidas, mas toda a funcionalidade da classe DrawingManager permanece disponível. Dessa forma, você pode implementar seu próprio controle. A remoção do DrawingManager do objeto map desativa toda a funcionalidade de desenho. Para restaurar os recursos de desenho, é necessário reconectar o objeto ao mapa com drawingManager.setMap(map) ou construir um novo objeto DrawingManager.

Eventos de desenho

Quando uma sobreposição de forma é criada, dois eventos são gerados:

  • Um evento {overlay}complete (onde {overlay} representa o tipo de sobreposição, como circlecomplete, polygoncomplete etc). Uma referência para a sobreposição é passada como argumento.
  • Um evento overlaycomplete. Um literal de objeto contendo o OverlayType e uma referência para a sobreposição são passados como argumento.
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
  var radius = circle.getRadius();
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
  if (event.type == 'circle') {
    var radius = event.overlay.getRadius();
  }
});

Observe que eventos de google.maps.Map, como click e mousemove, ficam desativados enquanto o mapa é desenhado.

Enviar comentários sobre…

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