Profissionais TI – Pra quem respira informação

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. O que me incomoda muito é o fato de todo mundo usar os marcadores padrões, 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. Sua chave pode ser adquirida aqui.

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

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

.map{
  width: 500px;
  height: 300px;
  margin:auto;
}

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:

<div class="center">
<div class="map"><img src="img/loader.gif" alt="Carregando" />
    <strong>Carregando mapa...</strong></div>
</div>

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:

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

É uma boa hora pra adquirir a chave para API, já que elas são únicas para 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:

//Pra começar, chamamos a versão 2 da api do Maps
google.load("maps", "2");

      function loadMap() {
        //Testamos a compatibilidade do navegador
		if (GBrowserIsCompatible()) {

		  //Iniciamos um mapa e atribuímos ele à variável map passando
		  //como parâmetro o id da div onde o mapa será carregado
		  //(notem que as variáveis podem ter nomes diferentes)
                  var map = new GMap2(document.getElementById("map"));

		  //Iniciamos um geocoder
		  var geocoder = new GClientGeocoder();

		  // Aqui, criamos nosso ícone
		  var mgIcon = new GIcon(G_DEFAULT_ICON);
		  mgIcon.image = "img/mgicon.png";//Passamos a localização da imagem
		  mgIcon.iconSize = new GSize(32, 32);//seu tamanho
		  mgIcon.iconAnchor = new GPoint(20, 20);//e o posicionamento em relação às coordenadas

		  //Já instanciamos o mapa e o ícone, porém nenhum deles foi efetivamente usado

		  //Agora, usando json, 'setamos' as opções para marcadores (no nosso caso, seu ícone)
		  markerOptions = { icon:mgIcon };

		  //Pra terminar, determinamos o endereço a ser buscado
		  //podia ser uma rua também, e a api é bem flexivel nesse sentido
		  //experimentem colocar endereços de formas distintas
		  var address = "barbacena";

		  //Depois de todos os objetos instanciados e devidamente configurados,
		  //vamos criar o mapa

			//Primeiro verificamos se o geocoder foi iniciado
		  	if (geocoder) {
			  //Chamamos agora o método do geocoder responsável por transformar
			  //o endereço em localização geográfica e passamos pra ele uma
			  //função callback
              		  geocoder.getLatLng(
               		    address,
               		    function(point) {
                  		  //Se o endereço não foi encontrado...
				  if (!point) {
                    			  alert(address + " not found");//...avisamos num alert
                  		  } else { //Senão...

                    		  	  map.setCenter(point, 15); //Centralizamos o mapa nas coordenadas encontradas e com o zoom de 15
                    		          map.addControl(new GMapTypeControl());//Adicionamos o controle de tipo de mapa...
                    		          map.addControl(new GSmallMapControl());//..o controle do mapa em si
                    		          map.addOverlay(new GMarker(point, markerOptions));// e posicionamos nosso marcador com a imagem exolhida
                  }
                }
              );
            }
        }
      }
      google.setOnLoadCallback(loadMap);//Agora, chamamaos a função loadMap quando tudo estiver carregado

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/ou sugestões nos comentários.