28

Nov

Marcador customizado no Google Maps

Posted by Robson  Published in Javascript

O Google Maps é tão popular que até o novo Monopoly é feito usando ele (Já viram o Monopoly City Streets??).

Acho que todo mundo sabe que sua api é aberta e qualquer um pode integrá-lo em qualquer site, de forma que cada vez mais ele é usado em páginas e mashups, mas me incomoda muito o fato de todo mundo usar os marcadores padrão.

Por isso, acabei descobrindo como é fácil usar uma imagem png no lugar e diferenciar minhas aplicações usando o Maps.

Pra começar, é preciso ter uma chave pra acessar as apis do Google. Pode ser adquirida aqui.

Depois, você pode começar a brincadeira e o resultado final pode ser conferido ao vivo no siteBQ Buscas, basta fazer uma busca qualquer (padaria, por exemplo).

O código css é colocado na ‘head’ do documento:

  1.  
  2. .map{
  3.   width: 500px;
  4.   height: 300px;
  5.   margin:auto;
  6. }

Pro mapa funcionar e aparecer no lugar correto, você precisa especificar largura e altura da div onde ele vai ser colocado.

Em seguida, dentro do ‘body’ basta colocar uma div com um id:

  1.  
  2.   <div class="center">
  3.     <div id="map" class="map"><img src="img/loader.gif" alt="Carregando" />
  4.     <strong>Carregando mapa…</strong></div>
  5.    </div>
  6.  

Pra enfeitar, eu coloquei um gif animado e um texto enquanto o mapa estiver sendo carregado.

Boas práticas sugerem colocar os códigos javascript antes da tag de fim do ‘body’ pra fins de otimização (Sugerem muitas outras coisas também, mas eu não fiz nada disso no meu exemplo).

Comece carregando a api de javascript do Google:

  1.  
  2.   <script src="http://www.google.com/jsapi?key=ABQIAAAAzj-OGyVjTTSQGi3W9MLjeBQDLsgpuvzXISNg00WuSlyBJmwwwhRSA_HD2I3GTUAX29iSO_BTc2QBKQ"></script>
  3.  

É uma boa hora pra adquirir a chave para api, já que elas são únicas pra cada site. A que escrevi acima é do site BQ Buscas onde está postado o exemplo.

Agora, dentro de uma tag ‘javascript’ ou, preferencialmente, num arquivo js externo, vai o seguinte código:

  1.  
  2.   //Pra começar, chamamos a versão 2 da api do Maps
  3.           google.load("maps", "2");
  4.      
  5.       function loadMap() {
  6.         //Testamos a compatibilidade do navegador
  7.                 if (GBrowserIsCompatible()) {
  8.          
  9.                   //Iniciamos um mapa e atribuímos ele à variável map passando
  10.                   //como parâmetro o id da div onde o mapa será carregado
  11.                   //(notem que as variáveis podem ter nomes diferentes)
  12.                   var map = new GMap2(document.getElementById("map"));
  13.        
  14.                   //Iniciamos um geocoder
  15.                   var geocoder = new GClientGeocoder();
  16.  
  17.                   // Aqui, criamos nosso ícone
  18.                   var mgIcon = new GIcon(G_DEFAULT_ICON);
  19.                   mgIcon.image = "img/mgicon.png";//Passamos a localização da imagem
  20.                   mgIcon.iconSize = new GSize(32, 32);//seu tamanho
  21.                   mgIcon.iconAnchor = new GPoint(20, 20);//e o posicionamento em relação às coordenadas
  22.                  
  23.                   //Já instanciamos o mapa e o ícone, porém nenhum deles foi efetivamente usado
  24.                        
  25.                   //Agora, usando json, ‘setamos’ as opções para marcadores (no nosso caso, seu ícone)
  26.                   markerOptions = { icon:mgIcon };
  27.                  
  28.                   //Pra terminar, determinamos o endereço a ser buscado
  29.                   //podia ser uma rua também, e a api é bem flexivel nesse sentido
  30.                   //experimentem colocar endereços de formas distintas
  31.                   var address = "barbacena";
  32.  
  33.                   //Depois de todos os objetos instanciados e devidamente configurados,
  34.                   //vamos criar o mapa
  35.                    
  36.                         //Primeiro verificamos se o geocoder foi iniciado
  37.                         if (geocoder) {
  38.                           //Chamamos agora o método do geocoder responsável por transformar
  39.                           //o endereço em localização geográfica e passamos pra ele uma
  40.                           //função callback
  41.                           geocoder.getLatLng(
  42.                             address,
  43.                             function(point) {
  44.                                   //Se o endereço não foi encontrado…
  45.                                   if (!point) {
  46.                                           alert(address + " not found");//…avisamos num alert
  47.                                   } else { //Senão…
  48.                                        
  49.                                           map.setCenter(point, 15); //Centralizamos o mapa nas coordenadas encontradas e com o zoom de 15
  50.                                           map.addControl(new GMapTypeControl());//Adicionamos o controle de tipo de mapa…
  51.                                           map.addControl(new GSmallMapControl());//..o controle do mapa em si
  52.                                           map.addOverlay(new GMarker(point, markerOptions));// e posicionamos nosso marcador com a imagem exolhida
  53.                   }
  54.                 }
  55.               );
  56.             }
  57.         }
  58.       }
  59.       google.setOnLoadCallback(loadMap);//Agora, chamamaos a função loadMap quando tudo estiver carregado
  60.  

Fácil, não?? (E se eu tivesse me entendido com o wordpress, teria ficado bonito também..)

Num próximo post, conto como customizar os ícones pra traçar rotas…
Postem dúvidas e sugestões nos comentários.

Related Articles

2 users responded in this post

Subscribe to this post comment rss or trackback url
User Gravatar
betinho silva said in March 16th, 2010 at 2:50 am

Nao deu certo essa customização…. poderia me ajudar

User Gravatar
Robson said in March 16th, 2010 at 5:11 am

Claro. É só dizer qual é o problema.

Leave A Reply

 Username (Required)

 Email Address (Remains Private)

 Website (Optional)