google-maps-api-parte-2-marcadores-personalizados

Ao final do artigo passado, Parte 1, temos um simples mapa com opções básicas.

Seguiremos, à partir dessa estrutura, conhecendo alguns dos elementos e métodos que a API V3 do Google Maps nos oferece.

Atenção: esta série foi prolongada e não terá apenas 3 partes. Essa é a parte II de X

Todas as partes da série Google Maps API:

(Para baixar o código que teremos ao final deste artigo, clique aqui)

Continuando de onde paramos

Se você quiser, pode pegar o código do último artigo aqui.(Extraia para uma pasta, rode npm install. (Precisa ter NodeJs e GulpJs instalado globalmente. Dúvidas, veja o post), ou continue de onde parou.

Começando a trabalhar

Às vezes, parece meio chato fazer todo o processo de preparação do workflow, como no post anterior. (Isso que criamos apenas 2 tasks básicas) Mas agora, veremos as vantagens disso.

Para começar a trabalhar, abra a pasta do projeto no terminal, e rode

1
gulp

A task default do nosso gulpfile.js vai iniciar o servidor e abrir o navegador.

Caso não abra o seu navegador, edite o .gulpfile, ou acesse http://localhost:1337/ . Agora, toda vez que vc salvar, sua página atualiza sozinha :)

Dando scopo global ao mapa

Para que possamos manipular o mapa e inserir, por exemplo, marcadores nele, precisamos que a variável esteja acessível de fora da função.

Para fazer isso existem algumas opções, mas iremos com a mais simples: retire a palavra var de map, de dentro da função initialize() deixando apenas map =…

maps.js (a funcao initialize deve ficar assim)
1
2
3
function initialize() {
        map = new google.maps.Map(divDoMapa, opcoes);
        }

Criando Marcadores (Marker) para o Google Maps

Para criar um marcador, basta instanciar um novo objeto google.maps.Marker() em uma variável

Só que criar diversas variáveis tipo marker1, marker2, etc. não é uma boa.

Como podemos ter vários marcadores, é interessante centralizarmos seu gerenciamento em uma única variável. Dessa forma, podemos ter um array ou objeto. Usaremos array.

Isso será feito por uma função, que pode ser chamada a qualquer momento para criar um novo marcador. Dessa forma, faremos apenas uma vez, e reutilizaremos quando necessário.

Primeiro, precisamos de algumas imagens legais:

Insira, ao final do maps.js:

Crie o seguinte objeto, ao final do maps.js:

maps.js (Insira ao final do arquivo)
1
2
3
4
5
6
7
var imagens = {
  muitoBom: 'http://i.imgur.com/bFnWq8k.png'
  , bom: 'http://i.imgur.com/VnlbIoL.png'
  , medio: 'http://i.imgur.com/eNAvIvr.png'
  , ruim: 'http://i.imgur.com/uCRXqdV.png'
  , pessimo: 'http://i.imgur.com/biRJBNL.png'
}

Assim, temos algumas imagens para usar.

Agora, criamos a função criaMarcador, que aceitará 2 parâmetros: configurações do marcador e mapa.

Ao final do arquivo src/js/maps.js insira uma nova função:

maps.js (insira ao final do arquivo)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(...)
var marcadores = [];
var criaMarcador = function(marcador, mapa) {
  var posicao = new google.maps.LatLng(marcador.latitude, marcador.longitude);
  var opcoes = {
    position: posicao
    , title: marcador.titulo
    , animation: google.maps.Animation.DROP
    , icon:{
    		url: marcador.imagem || 'http://i.imgur.com/eNAvIvr.png'
    		, scaledSize: new google.maps.Size(50, 50)
    	}
    , map: mapa
  }
  var novoMarcador = new google.maps.Marker(opcoes);
  marcadores.push(novoMarcador);
  map.setCenter(novoMarcador.position)
}

Primeiro criamos fora da função o array ‘marcadores’. Aí nossa função chamada criaMarcador, aceita 2 parâmetros: marcador e mapa.

O objeto marcador usamos para inserir detalhes do marker, como marcador.titulo e marcador.imagem, por exemplo.

Note que, dentro de var opcoes o parâmetro icon é um objeto, contendo url e scaledSize. O primeiro, a url da imagem, o segundo define o tamanho final do marcador, devidamente escalado.

Aí, criamos a variável novoMarcador, que efetivamente gera um new google.maps.Marker() com as opções que definimos logo acima.

Por último, inserimos com marcadores.push() o marcador recém criado em nosso array de marcadores e então chamamos o método .setCenter() em nosso map, para a posição do marcador.
Isso centralizará o mapa nas coordenadas do marcador.

Função que adicionará o marcador.

Criaremos agora uma função para adicionar o marcador. Ela não é realmente necessária, estamos fazendo apenas para complementar o exemplo do artigo passado, adicionando um botão que insira o marcador.

Ao final do arquivo maps.js, insira:

maps.js (Insira ao final do arquivo)
1
2
3
4
5
6
7
8
9
function adiciona(){
  var marcador = {
    latitude: -25.425777
    , longitude: -49.3335829	
    , titulo: 'Novo marcador'
    , imagem: imagens.muitoBom
  }
  criaMarcador(marcador, map);
}

Essa função apenas contém um objeto com as configurações que queremos e executa a função criaMarcador com ele.

Note como definimos a imagem, utilizando o objeto: imagem: imagens.muitoBom.
Poderia ser imagem: imagens.ruim, por exemplo

Adicione a função adiciona() em um botão no index.html

index.html (insira o button ao lado do outro)
1
<button onClick="adiciona()">adiciona!</button>

Agora salve, volte ao navegador e clique, primeiro em ‘iniciar’, depois em ‘adiciona!’.

Viu? Assim criamos um marcador personalizado.

Conclusão e planos próximos:

Olha, minha intenção original era abordar, além de marcadores, rotas, places e boundaries neste artigo. Mas já são 22:54 e não deu tempo :P Como não quero perder o #1postperday, ficará para amanhã.

Além disso, recebi alguns pedidos bem interessantes referente criação de polígonos, circulos e dicas de performance, e não vai ‘caber’ em apenas 3 partes, portanto a série será prolongada.

Ou seja: não teremos mais 3 partes, teremos umas 7 :D

Espero que gostem! Na dúvida, assina a maillist pra não perder, hein? —>

Duvidas, sugestões, xingamentos? Use os comentários! (menos os xingamentos, pega mal.)

(Confira o commit com as alterações que fizemos nessa parte2 aqui)

Para baixar o código que temos até agora, clique aqui