do Google Developers

Introdução

Um marcador identifica um local no mapa. Por padrão, um marcador usa uma imagem padrão. Os marcadores podem exibir imagens personalizadas, caso em que geralmente são chamados de “ícones”. Marcadores e ícones são objetos do tipo Marker. Você pode definir um ícone personalizado no construtor do marcador ou chamando setIcon() no marcador. Veja mais sobre como personalizar a imagem do marcador abaixo.

Em termos gerais , os marcadores são um tipo de sobreposição. Para obter informações sobre outros tipos de sobreposição, consulte Desenhar no mapa.

Os marcadores são projetados para serem interativos. Por exemplo, por padrão, eles recebem "click" eventos, para que você possa adicionar um ouvinte de evento para abrir uma janela de informações exibindo informações personalizadas. Você pode permitir que os usuários movam um marcador no mapa definindo o marcador “s draggable propriedade para true. Para obter mais informações sobre marcadores arrastáveis, consulte abaixo.

Adicionar um marcador

O construtor google.maps.Marker leva um único Marker options literal de objeto, especificando as propriedades iniciais do marcador.

Os campos a seguir são particularmente importantes e normalmente definidos ao construir um marcador:

• position (obrigatório) especifica um LatLng que identifica a localização inicial do marcador. Uma maneira de recuperar um LatLng é usando o serviço de geocodificação.
• map (opcional) especifica o Map no qual colocar o marcador. Se você não especificar o mapa na construção do marcador, o marcador será criado, mas não será anexado (ou exibido) no mapa. Você pode adicionar o marcador posteriormente chamando o marcador “s setMap() método.

O exemplo a seguir adiciona um marcador simples a um mapa em Uluru, no centro da Austrália:

No exemplo acima, o marcador é colocado no mapa na construção do marcador usando a propriedade map nas opções do marcador. Como alternativa, você pode adicionar o marcador ao mapa diretamente usando o marcador “s setMap() método, conforme mostrado no exemplo abaixo:

O marcador “s title aparecerá como uma dica de ferramenta.

Se você não deseja passar nenhum Marker options no construtor do marcador, passe um objeto vazio {} no último argumento do construtor.

Veja o exemplo

Remover um marcador

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

marker.setMap(null);

Observe que o acima método não exclui o marcador. Ele remove o marcador do mapa. Se, em vez disso, deseja excluir o marcador, você deve removê-lo do mapa e, em seguida, definir o próprio marcador para null.

Se você deseja gerenciar um conjunto de marcadores, você deve criar uma matriz para conter os marcadores. Usando essa matriz, você pode chamar setMap() em cada marcador na matriz, por sua vez, quando precisar remover os marcadores. Você pode excluir os marcadores removendo-os do mapa e definindo a matriz “s length como 0, o que remove todas as referências ao marcadores.

Ver exemplo

Animar um marcador

Você pode animar os marcadores para que exibam movimento dinâmico em uma variedade de circunstâncias diferentes. Para especificar a maneira como um marcador é animado, use a propriedade do marcador “s animation, do tipo google.maps.Animation. Os seguintes Animation valores são suportados:

• DROP indica que o marcador deve cair do topo de o mapa para sua localização final quando colocado pela primeira vez no mapa. A animação será interrompida assim que o marcador parar e animation será revertido para null. Este tipo de animação é geralmente especificado durante a criação do Marker.
• BOUNCE indica que o marcador deve saltar Lugar, colocar. Um marcador saltando continuará saltando até que sua animation propriedade seja explicitamente definida como null.

Você pode iniciar uma animação em um marcador existente chamando setAnimation() no objeto Marker.

Se você tiver muitos marcadores , você pode não querer soltá-los no mapa todos de uma vez. Você pode usar setTimeout() para espaçar as animações de seus marcadores usando um padrão como o mostrado abaixo:

function drop() { for (var i =0; i markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); }}

Ver exemplo

Personalizar uma imagem de marcador

Se quiser exibir uma letra ou número em um marcador, você pode usar um rótulo de marcador.Se precisar de mais personalização, você pode definir um ícone para mostrar em vez da imagem do marcador padrão. Definir um ícone envolve definir uma série de propriedades que determinam o comportamento visual do marcador.

As seções abaixo descrevem rótulos de marcadores, ícones simples, ícones complexos e símbolos (ícones vetoriais).

Rótulos de marcador

Um rótulo de marcador é uma letra ou número que aparece dentro de um marcador. A imagem do marcador nesta seção exibe um rótulo de marcador com a letra “B” nele. Você pode especificar um rótulo de marcador como uma string ou um objeto MarkerLabel que inclui uma string e outras propriedades de rótulo.

Ao criar um marcador, você pode especificar um label propriedade no objeto MarkerOptions. Como alternativa, você pode chamar setLabel() no objeto Marker para definir o rótulo em um marcador existente.

O exemplo a seguir exibe marcadores rotulados quando o usuário clica no mapa :

Ícones simples

No caso mais básico, um ícone pode indicar uma imagem a ser usada em vez do ícone de alfinete padrão do Google Maps. Para especificar esse ícone, defina a propriedade “s icon do marcador para o URL de uma imagem. A API JavaScript do Google Maps dimensionará o ícone automaticamente.

Ícones complexos

Você pode querer especificar formas complexas para indicar regiões que são clicáveis e especificar como os ícones devem aparecer em relação a outras sobreposições (sua “ordem de pilha”). Os ícones especificados dessa maneira devem definir seus icon propriedades para um objeto do tipo Icon.

Icon objetos definem uma imagem. Eles também definem o size do ícone, o origin do ícone (se a imagem que você deseja fizer parte de um imagem em um sprite, por exemplo), e o anchor onde o ponto de acesso do ícone “deve ser localizado (que é baseado na origem).

Se você estiver usando um rótulo com um marcador personalizado, você pode posicionar o rótulo com a propriedade labelOrigin em objeto.

Converter MarkerImage objetos para digitar Icon

Até a versão 3.10 da API JavaScript do Google Maps, ícones complexos eram definidos como objetos MarkerImage. O literal de objeto Icon foi adicionado na versão 3.10 e substitui MarkerImage da versão 3.11 em diante. Icon literais de objeto suportam os mesmos parâmetros de MarkerImage, permitindo que você converta facilmente um MarkerImage a um Icon removendo o construtor, envolvendo os parâmetros anteriores em {} “se adicionando os nomes de cada parâmetro. Por exemplo:

torna-se

Símbolos

Além de imagens raster, um marcador suporta a exibição de caminhos vetoriais chamados Symbols . Para exibir um caminho de vetor, passe um objeto literal Symbol com o caminho desejado para a propriedade “s icon do marcador. Você pode usar um dos caminhos predefinidos em google.maps.SymbolPath ou definir um caminho personalizado usando a notação de caminho SVG.

Para obter mais informações, consulte a documentação de símbolos.

Faça um marcador arrastável

Para permitir que os usuários arrastem um marcador para um local diferente no mapa, defina draggable como true nas opções do marcador.

Personalização adicional do marcador

Para um marcador totalmente personalizado, consulte o exemplo de pop-up personalizado.