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

Símbolos

  1. Introdução
  2. Propriedades de um símbolo
  3. Símbolos predefinidos
  4. Adicionar um símbolo a um marcador
  5. Adicionar um símbolo a uma polilinha
  6. Animar um símbolo

Introdução

Os símbolos são úteis para usar um ícone baseado em vetor em um marcador ou para adicionar uma imagem a uma polilinha.

Um Symbol é uma imagem baseada em vetor que pode ser exibida em um objeto Marker ou Polyline. A forma do símbolo é definida por um caminho usando a notação de caminho SVG. Apesar de path ser a única propriedade obrigatória, o objeto Symbol oferece diversas propriedades, permitindo personalizar aspectos visuais, como a cor e a espessura de traços e preenchimentos. Consulte a lista de propriedades abaixo.

Vários símbolos predefinidos estão disponíveis com a classe SymbolPath. Consulte a lista abaixo.

Propriedades de um símbolo

Observe que o comportamento padrão de um Symbol varia ligeiramente, dependendo da exibição em um marcador ou em uma polilinha. Essas variações são descritas na lista de propriedades a seguir.

Um Symbol oferece as seguintes propriedades:

  • path (obrigatório) é o caminho que define a forma do símbolo. Use um dos caminhos predefinidos em google.maps.SymbolPath ou defina um caminho personalizado usando a notação de caminho SVG. Observação: os caminhos de vetor em uma polilinha não devem exceder um quadrado de 22x22 px. Se o caminho inclui pontos fora do quadrado, é necessário ajustar a propriedade scale para um valor fracionário, como 0.2, para que os pontos dimensionados resultantes sejam ajustados ao quadrado.
  • anchor define a posição do símbolo em relação ao marcador ou polilinha. As coordenadas do caminho do símbolo são convertidas para a esquerda e para cima pelas coordenadas x e y da âncora, respectivamente. Por padrão, um símbolo é ancorado em (0, 0). A posição é expressa no mesmo sistema de coordenadas que o caminho do símbolo.
  • fillColor é a cor do preenchimento do símbolo (ou seja, a região limitada pelo traço). Todas as cores CSS3 são permitidas, exceto cores nomeadas estendidas. Para símbolos em marcadores, o padrão é "black". Para símbolos em polilinhas, o padrão é a cor do traço da polilinha correspondente.
  • fillOpacity define a opacidade relativa (ou seja, a falta de transparência) do preenchimento do símbolo. Os valores variam de 0.0 (totalmente transparente) a 1.0 (totalmente opaco). O padrão é 0.0.
  • rotation é o ângulo da rotação do símbolo, expresso em graus no sentido horário. Por padrão, um marcador de símbolo tem uma rotação 0 e um símbolo em uma polilinha é girado de acordo com o ângulo da borda em que está posicionado. A definição da rotação de um símbolo em uma polilinha fixa a rotação desse símbolo, que deixa de seguir a curva da linha.
  • scale define o valor da alteração da escala do tamanho do símbolo. Para marcadores de símbolo, a escala padrão é 1. Após a alteração de escala, o símbolo pode ter qualquer tamanho. Para símbolos em uma polilinha, a escala padrão é a espessura do traço da polilinha. Após a alteração de escala, o símbolo deve estar dentro de um quadrado de 22x22 px, centralizado na âncora do símbolo.
  • strokeColor é a cor do contorno do símbolo. Todas as cores CSS3 são permitidas, exceto cores nomeadas estendidas. Para símbolos em marcadores, o padrão é "black". Para símbolos em uma polilinha, a cor padrão é a cor do traço da polilinha.
  • strokeOpacity define a opacidade relativa (ou seja, a falta de transparência) do traço do símbolo. Os valores variam de 0.0 (totalmente transparente) a 1.0 (totalmente opaco). Para marcadores de símbolo, o padrão é 1.0. Para símbolos em polilinhas, o padrão é a opacidade do traço da polilinha.
  • strokeWeight define a espessura do contorno do símbolo. O padrão é a scale do símbolo.

Símbolos predefinidos

A Google Maps JavaScript API oferece alguns símbolos incorporados que podem ser adicionados a marcadores ou polilinhas usando a classe SymbolPath.

Os símbolos padrão incluem um círculo e dois tipos de setas. Estão disponíveis setas para frente e para trás. Isso é particularmente útil para polilinhas porque a orientação de um símbolo na polilinha é fixa. A direção para frente é considerada como a direção para o término da polilinha.

O traço e o preenchimento dos símbolos predefinidos podem ser alterados usando as opções de símbolo padrão.

Estão incluídos os seguintes símbolos predefinidos:

Nome Descrição Exemplo
google.maps.SymbolPath.CIRCLE Um círculo.
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW Uma seta apontando para trás, fechada em todos os lados.
google.maps.SymbolPath.FORWARD_CLOSED_ARROW Uma seta apontando para frente, fechada em todos os lados.
google.maps.SymbolPath.BACKWARD_OPEN_ARROW Uma seta apontando para trás, aberta em um lado.
google.maps.SymbolPath.FORWARD_OPEN_ARROW Uma seta apontando para frente, aberta em um lado.

Adicionar um símbolo a um marcador

Para exibir um ícone baseado em vetor em um marcador, passe um literal de objeto Symbol com o caminho desejado para a propriedade icon do marcador.

O exemplo a seguir cria um ícone usando um dos caminhos de vetor predefinidos.

// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

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

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    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 uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API.

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

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    draggable: true,
    map: map
  });

}

Ver o exemplo (marker-symbol-predefined).

O exemplo a seguir usa a notação de caminho SVG para criar um ícone personalizado para um marcador.

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

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

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    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 uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border.

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

  var goldStar = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow',
    fillOpacity: 0.8,
    scale: 1,
    strokeColor: 'gold',
    strokeWeight: 14
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: goldStar,
    map: map
  });
}

Ver o exemplo (marker-symbol-custom).

Adicionar um símbolo a uma polilinha

Para exibir símbolos em uma polilinha, defina a propriedade icons[] do objeto PolylineOptions. A matriz icons[] aceita um ou mais literais de objeto IconSequence com as seguintes propriedades:

  • icon (obrigatório) é o símbolo a ser renderizado na linha.
  • offset determina a distância do início da linha onde o ícone será renderizado. Essa distância pode ser expressa como uma porcentagem do comprimento da linha (por exemplo, "50%") ou em pixels (por exemplo, "50px"). O padrão é "100%".
  • repeat determina a distância entre ícones consecutivos na linha. Essa distância pode ser expressa como uma porcentagem do comprimento da linha (por exemplo, "50%") ou em pixels (por exemplo, "50px"). Para desativar a repetição do ícone, especifique "0". O padrão é "0".

A combinação dos símbolos com a classe PolylineOptions oferece um controle abrangente sobre a aparência das polilinhas no mapa. Veja a seguir alguns exemplos de personalizações possíveis.

Setas

Use a propriedade IconSequence.offset para adicionar setas no início ou no fim da polilinha.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

Ver o exemplo (overlay-symbol-arrow).

Linhas tracejadas

Aplique um efeito de linha tracejada definindo a opacidade da polilinha como 0 e sobrepondo um símbolo opaco sobre a linha em intervalos regulares.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

Ver o exemplo (overlay-symbol-dashed).

Caminhos personalizados

Os símbolos personalizados permitem adicionar várias formas a uma polilinha.

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

Ver o exemplo (overlay-symbol-custom).

Animar um símbolo

Anime um símbolo ao longo de um caminho usando a função window.setInterval() do DOM para alterar o deslocamento do símbolo em intervalos regulares.

// This example adds an animated symbol to a polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 20.291, lng: 153.027},
    zoom: 6,
    mapTypeId: 'terrain'
  });

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}
<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 an animated symbol to a polyline.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 20.291, lng: 153.027},
    zoom: 6,
    mapTypeId: 'terrain'
  });

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#393'
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
    var count = 0;
    window.setInterval(function() {
      count = (count + 1) % 200;

      var icons = line.get('icons');
      icons[0].offset = (count / 2) + '%';
      line.set('icons', icons);
  }, 20);
}

Ver o exemplo (overlay-symbol-animate).

Enviar comentários sobre…

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