Textos
Há algum tempo eu li no Client Side elogios a um framework de javascript chamado Jquery. Então quando fui iniciar um novo projeto, resolvi testá-lo. É realmente impressionante o que se consegue fazer com ele. Mostra que programar pode ser divertido e simples.
Há, ainda, a possibilidade de usar plugins para complementar as funcionalidades dele. O que é ótimo, o limite do que você consegue fazer é a sua imaginação.
Infelizmente um problema em boa parte dos plugins é a documentação escassa. Tenho penado lendo comentários deixados dentro do código, e muitas vezes tendo que descobrir como usá-lo lendo o fonte. Talvez seja só azar, justamente nos plugins que usei isso acontece. O próprio JQuery é bem documentado, por exemplo. Saberei melhor no futuro.
No intuito de colaborar com os desenvolvedores e os interessados, eis um tutorial de como inserir um mapa do Google Maps no seu site (é o primeiro tutorial que faço, então o feedback será muito bem vindo. Com o tempo eu pego o jeito 
):
O efeito final é esse.
- Antes de começar é preciso criar uma chave para a API do Google Maps. Não é necessário cadastro, basta colocar a url do site no qual ela será usada nessa página. Ela serve para todo o domínio, inclusive subpastas. Se você tentar usar uma chave que não foi feita para o seu domínio ela não funcionará.
- Scripts necessários: são dois, o JQuery e o JMap2.
- O html: é necessário que o navegador esteja com o javascript habilitado para que o Google Maps funcione, então o html do exemplo é apenas a tag body:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=UTF-8″ />
<meta name=“author” content=“Leandro Facchinetti” />
<script type=“text/javascript” src=“jquery-1.2.2.min.js”></script>
<script type=“text/javascript” src=“http://maps.google.com/maps?file=api&v=2&key=sua_chave”></script>
<script type=“text/javascript” src=“jquery.jmap2.js”></script>
<script type=“text/javascript”>
<!–
//o código virá aqui
–>
</script>
<title>Exemplo de colocação de mapas dentro do site com JQuery e JMap2</title>
</head>
<body>
</body>
</html>
Atente para as importações de scripts. São três, o JQuery, a API do Google Maps e o JMap2. Lembre-se de mudar para a sua chave da API, onde diz “sua_chave” no código. - Na parte onde está escrito “//o código virá aqui” é que escreveremos nosso código. Logicamente é preferível que você faça isso num documento externo e o importe, estou fazendo assim para simplificar.
- O código a ser inserido é este, veja os comentários para entendê-lo:
$(function (){//sintaxe do JQuery para a função ser executada quando o DOM estiver pronto
$("body").append("<a href=\"\">Clique aqui para ver no mapa</a>").children("a").click(function (){//aqui é colocado o link, não faria sentido colocá-lo no html porque quem não tivesse javascript ficaria com um link vazio. Após a colocação do link é associada uma função a ser executada quando ele é clicado
$(this).slideUp("slow").after("<div id=\"mapa\" style=\"width:450px; height:320px; display:none; background-color:#e5e3df; \"").parent().children("div#mapa").slideDown("slow", function (){//é inserida uma div na qual irá o mapa. Atente para a colocação de atributos width e height, o mapa será do tamanho que você setar aqui. Depois da colocação vem a função do efeito que faz a div aparecer deslizando. Lógico que isso é opcional, fiz assim porque é mais estético
$(this).jmap({//aqui é acolocação do mapa em si, dentro dessa função vai um objeto com as opções, não listarei todas, só as que julgo serem mais importantes
mapCenter: [-27.608000, -48.53770],//as coordenadas da onde o mapa será aberto. Para descobrí-las entre no Google Maps, ache a região que lhe interessa e clique em "Criar link para esta página", observe a url gerada, procure por duas sequência de número logo no início, são elas que você deve colocar aqui
mapZoom: 17,//nível de zoom do mapa quando aberto
mapShowOverview: false,//mostrar pequeno mapa da região no canto inferior direito
mapShowType: false//mostrar o tipo de mapa: mapa, satélite, terreno
}).addMarker({//adicionar aquele marcador vermelho
pointLat: -27.608450,//as coordenadas de onde o marcador deve ser criado
pointLng: -48.53770,
pointHTML: "<h3>Paralelo 22</h3><p>Praça Abdon Batista<br />Saco dos Limões - Florianópolis - SC</p>",//html a ser exibido no balão do marcador, é possível manipular a formatação desse html pelo css da página. Incrível, não? openHTMLEvent: "mouseover"//evento que dispara a abertura do marcador
})
})
return false;//impedir a ação padrão do link
})
}) - Pronto, não é fantástico o que pode ser feito com tão pouco código?
Comentários Recentes