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

Clustering de marcadores

Visão geral

Este tutorial mostra como usar os grupos de marcadores para exibir um grande número de marcadores em um mapa. Você pode usar a biblioteca MarkerClusterer em combinação com a Google Maps JavaScript API para combinar marcadores próximos em grupos e simplificar a exibição dos marcadores no mapa.

Para ver como o agrupamento de marcadores funciona, veja o mapa abaixo.

O número em um grupo indica quantos marcadores ele contém. Observe que, ao aumentar o zoom em qualquer um dos locais do grupo, o número no grupo diminui e você começa a ver os marcadores individuais no mapa. Afastar o zoom do mapa consolida os marcadores novamente em grupos.

O exemplo abaixo mostra o código inteiro de que você precisa para criar esse mapa.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: -28.024, lng: 140.887}
  });

  // Create an array of alphabetical characters used to label the markers.
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
  {lat: -31.563910, lng: 147.154312},
  {lat: -33.718234, lng: 150.363181},
  {lat: -33.727111, lng: 150.371124},
  {lat: -33.848588, lng: 151.209834},
  {lat: -33.851702, lng: 151.216968},
  {lat: -34.671264, lng: 150.863657},
  {lat: -35.304724, lng: 148.662905},
  {lat: -36.817685, lng: 175.699196},
  {lat: -36.828611, lng: 175.790222},
  {lat: -37.750000, lng: 145.116667},
  {lat: -37.759859, lng: 145.128708},
  {lat: -37.765015, lng: 145.133858},
  {lat: -37.770104, lng: 145.143299},
  {lat: -37.773700, lng: 145.145187},
  {lat: -37.774785, lng: 145.137978},
  {lat: -37.819616, lng: 144.968119},
  {lat: -38.330766, lng: 144.695692},
  {lat: -39.927193, lng: 175.053218},
  {lat: -41.330162, lng: 174.865694},
  {lat: -42.734358, lng: 147.439506},
  {lat: -42.734358, lng: 147.501315},
  {lat: -42.735258, lng: 147.438000},
  {lat: -43.999792, lng: 170.463352}
]
<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>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

Sua vez de tentar

Passe o cursor na parte superior direita do bloco de código para copiar o código ou abri-lo no JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Clustering</title>
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: -28.024, lng: 140.887}
        });

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var markers = locations.map(function(location, i) {
          return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
          });
        });

        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers,
            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      }
      var locations = [
        {lat: -31.563910, lng: 147.154312},
        {lat: -33.718234, lng: 150.363181},
        {lat: -33.727111, lng: 150.371124},
        {lat: -33.848588, lng: 151.209834},
        {lat: -33.851702, lng: 151.216968},
        {lat: -34.671264, lng: 150.863657},
        {lat: -35.304724, lng: 148.662905},
        {lat: -36.817685, lng: 175.699196},
        {lat: -36.828611, lng: 175.790222},
        {lat: -37.750000, lng: 145.116667},
        {lat: -37.759859, lng: 145.128708},
        {lat: -37.765015, lng: 145.133858},
        {lat: -37.770104, lng: 145.143299},
        {lat: -37.773700, lng: 145.145187},
        {lat: -37.774785, lng: 145.137978},
        {lat: -37.819616, lng: 144.968119},
        {lat: -38.330766, lng: 144.695692},
        {lat: -39.927193, lng: 175.053218},
        {lat: -41.330162, lng: 174.865694},
        {lat: -42.734358, lng: 147.439506},
        {lat: -42.734358, lng: 147.501315},
        {lat: -42.735258, lng: 147.438000},
        {lat: -43.999792, lng: 170.463352}
      ]
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Como ilustração simples, este tutorial adiciona um conjunto de marcadores ao mapa usando a matriz locations. Você pode usar outras fontes para obter marcadores para o mapa. Para obter mais informações, leia o guia sobre como criar marcadores.

Para entender o agrupamento de marcadores

A biblioteca MarkerClusterer usa a técnica de agrupamento com base em grade que divide o mapa em quadrados de certo tamanho (o tamanho muda em cada nível de zoom) e agrupa os marcadores em cada quadrado da grade. Ela cria um grupo em um marcador particular e adiciona marcadores que estejam dentro de seus limites ao grupo. Ela repete esse processo até que todos os marcadores estejam alocados aos grupos de marcadores baseados na grade mais próximos com base no nível de zoom do mapa.

Se os marcadores estiverem dentro dos limites de mais de um grupo existente, a Maps JavaScript API determina a distância entre o marcador e cada grupo e adiciona-o ao grupo mais próximo.

Você pode definir uma opção de MarkerClusterer para ajustar a posição do grupo para refletir a distância média entre todos os marcadores contidos nele. Você também pode personalizar a MarkerClusterer para modificar outros parâmetros, como o tamanho da grade, o ícone do grupo, o texto do grupo, entre outros.

Adição de um agrupador de marcadores

Siga as etapas abaixo para adicionar um agrupador de marcadores:

  1. Obtenha a biblioteca de agrupamento de marcadores e imagens do Github e armazene-as em um servidor acessível ao aplicativo.
    A biblioteca JavaScript e os arquivos de imagem da MarkerClusterer estão disponíveis no repositório do Google Maps no GitHub. Baixe ou copie os seguintes arquivos do Github para um local acessível ao aplicativo:

  2. Adicione a biblioteca de agrupamento de marcadores à sua página.

    No código deste tutorial, o script abaixo especifica o local do arquivo da biblioteca markerclusterer.js em https://developers.google.com.

    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    

    Altere o caminho para especificar o local onde você salvou o mesmo arquivo.


  3. Adicione um agrupador de marcadores em seu aplicativo.

    O código abaixo adiciona um agrupador de marcadores ao mapa.

    var markerCluster = new MarkerClusterer(map, markers,
                {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
          }
    

    Esse exemplo passa a matriz markers à MarkerClusterer. Ele também especifica o local de todas as cinco imagens no parâmetro imagePath. Substitua-o com o caminho do local onde você salvou os mesmos arquivos de imagem.

Saiba mais

Você pode ver exemplos mais complexos de agrupamento de marcadores no repositório do Google Maps no GitHub.

Enviar comentários sobre…

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