/
Criar marcador / Create marker

Criar marcador / Create marker

Função que cria um marcador no mapa a partir de uma coordenada.

Figura 1 - Bloco Criar marcador

 

Este bloco faz parte do plugin Google Maps Api. Para visualizá-lo, é necessário instalar o plugin.

Compatibilidade

  • Bloco cliente: cronapi.maps.createMarker()

Retorno

O bloco não possui retorno.

Parâmetros

Id do mapa

Identificador (id) do componente Google Maps em que será criado o marcador. Para selecioná-lo é necessário vincular o bloco de programação a um formulário de referência, confira no tópico "Propriedades do Blockly" da documentação Bloco de Programação.

  • Posição: 1

  • Inglês: Map Id

  • Tipo: Objeto / Object

  • Exemplo: "map5108"

 

O campo "Identificador" correto a ser utilizado deve seguir o padrão "map" + quatro números aleatórios (ex: map5108). Para mais detalhes, consulte o tópico "Identificador" da documentação Usando a API do Google Maps em seu projeto

Id do marcador

Define um ID para o marcador que será criado.

  • Posição: 2

  • Inglês: Marker Id

  • Tipo: Texto / String

  • Exemplo: "IdMarcador"

Título

Define um título que será exibido em um tooltip no ponto marcado.

  • Posição: 3

  • Inglês: Title

  • Tipo: Texto / String

  • Exemplo: "Sede Techne"

Ponto

Recebe a coordenada em que será exibido o marcador. Deve-se utilizar o retorno do bloco Criar coordenada

  • Posição: 4

  • Inglês: Point

  • Tipo: Objeto / Object

  • Exemplo: retorno do bloco Criar coordenada

Ícone

Define o caminho da imagem que será exibida como marcador no mapa. Se nenhum caminho for informado, será utilizado o ícone de localização padrão do Google Maps.

  • Posição: 5

  • Inglês: Icon

  • Tipo: Texto / String

  • Exemplo: "src/main/webapp/public/assets/imagem.png"

Janela de informações

Define o conteúdo que será exibido em uma pequena janela após clicar no marcador. É possível incluir textos informativos sobre o local, com suporte a formatação utilizando HTML e CSS.

  • Posição: 6

  • Inglês: Information window

  • Tipo: Texto / String

  • Exemplo: "<h2 style="text-align: center;">Techne</h2>"

Opções avançadas

Recebe um objeto com propriedades que definem comportamentos do marcador, como animações ou outras ações, conforme descrito na documentação oficial.

  • Posição: 7

  • Inglês: Advanced options

  • Tipo: Texto / String

  • Exemplo: "{"opacity": 0.6}"

Exemplo

Na função da imagem abaixo, o bloco Criar marcador adiciona um marcador em um componente Google Maps, utilizando as coordenadas definidas no bloco Criar coordenada. Em "Opções avançadas", inserimos um código para diminuir a opacidade do marcador. Como nenhum ícone personalizado foi especificado, será exibido o ícone padrão de localização do Google Maps.

Para exibir o mapa na aplicação precisamos inicializar o mapa, para isso, utilize o bloco de programação Inicializar Mapa. É nele que definimos os pontos iniciais de latitude e longitude, que devem ser os mesmos do bloco Criar marcador. Para obter o resultado semelhante ao da Figura 2.1, configure o parâmetro "Zoom" do bloco como "Rua". Para mais detalhes de configuração, consulte a documentação Usando a API do Google Maps em seu projeto. Após inicializar o mapa, executamos a função abaixo.

Figura 2 - Exemplo de uso do bloco Criar marcador

 

Na imagem a seguir, podemos visualizar o resultado de execução da função da Figura 2.

Figura 2.1 - Resultado de execução da função da Figura 2

Nesta página