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?
Textos relacionados:
10 comentários no texto “Colocando um mapa dentro do site com JQuery e JMap2”
Comente
Feed para os comentários deste post
Comente, porque trocar idéias é o melhor jeito de aperfeiçoá-las. Ler os comentários e conversar com os leitores é a razão pela qual escrevo um blog e não um diário.
Sinta-se a vontade, inclusive, para criticar ou discordar de mim. Só não use de ofensas (a mim ou a qualquer outro comentarista), texto em caixa alta, ou miguxês (uma ofensa ao português).
Primeiro porque escrever assim enfraquece seu argumento, segundo porque isso me obrigará a publicar seu e-mail (spammers will find you) e endereço de IP, humilhando-o pela exposição de sua ignorância.
Exceto nesses casos, fique tranqüilo, seu e-mail não será publicado, vendido ou lotado de spams. Só servirá para eu entrar em contato no caso de preferir responder pessoalmente seu comentário.
Segunda-feira, 11 de Fevereiro de 2008 às 10:46
Olá Leandro, parabéns pelo trabalho.
Lí seu tutorial e gostaria de saber a possibilidade de se mostrar o mapa a partir de um endereço pego por um forumulário na página.
Pode me ajudar?
Abraço
Marco Biruel
Terça-feira, 12 de Fevereiro de 2008 às 19:43
@Marco Biruel
É possível fazer uma busca por endereço, sim. E é muito simples.
Da mesma forma que eu usei a função addMarker, você pode usar a searchAddress. O objeto com parâmetros que ela recebe, entretanto, é um pouco diferente. Veja como fica:
Na parte
$(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
})
troque por
$(this).jmap({
mapZoom: 17,
mapShowOverview: false,
mapShowType: false
}).searchAddress({
address: “Endereço a ser buscado”,
addMarker: true,
showAddress: true
})
Logicamente, no atributo address você troca o valor pelo endereço a ser buscado. Para ler o endereço escrito em um campo de formulário, use $(”seletor do input com endereço”).val(), ou ótimo plugin Form, que eu também recomendo.
Quarta-feira, 13 de Fevereiro de 2008 às 13:09
Leandro, ainda não testei, mas de cara quero agradecer a ajuda!
Boa sorte e grande abraço!
Sexta-feira, 2 de Maio de 2008 às 19:19
Olá parabéns pela iniciativa eu tava testando agora o alpha e ja ta rolando o 2…
, mas tem uma funcionalidade que se implantem-se(não sei se exixte) ,
igual desse exemplo [http://olbertz.de/jquery/googlemap.html] [não funciona no ie bosta e nem no opera,so no firefox e safari ¨],pegando os valores do bd através de json ficaria muito show.
Será que tem como nesse projeto no momento fazer isso??
Valeu abraço.
Sexta-feira, 2 de Maio de 2008 às 19:20
correções (implanterem)(existem)
Segunda-feira, 26 de Maio de 2008 às 12:53
Por que eu usaria esse plugin visto que o próprio google fornece um iframe para que eu coloque o mapa em minha página?
Segunda-feira, 26 de Maio de 2008 às 23:21
@Vilmondes Eracton
A minha razão é usar o mesmo padrão de desenvolvimento que já estava acostumado com o JQuery. Não precisei aprender a usar a API do Google Maps porque o JMaps já fazia tudo por mim de forma simples e absolutamente satisfatória.
Só de não precisar mesclar estilos diferentes no código e usar a sintaxe do JQuery, que me agrada muito, já fico feliz.
Domingo, 29 de Junho de 2008 às 12:44
Leandro, quero parabenizá-lo pelo artigo que é muito claro e aplicável de forma simples, quero parabenizá-lo também pela presteza na resposta,de extrema qualidade, aos comentários aqui postados .
Quero aproveitar aqui para lhe fazer uma pergunta:
Há a possibilidade de se colocar um endereço origem e um destino e ser realizado um trace entre os endereços, como a opção de “como se chegar” disponível na página do google maps?
Desde já agradeço a atenção e parabenizo pela iniciativa.
Domingo, 29 de Junho de 2008 às 13:11
@Roberval César Menezes
Nunca usei, mas olhei na documentação do JMaps e há uma função para isso, sim. Ela se chama searchDirections() e recebe um objeto com os endereços de partida e chegada.
Veja um exemplo de uso aqui:
http://jmaps.digitalspaghetti.me.uk/#searchdirections
Domingo, 29 de Junho de 2008 às 14:51
Leandro, boa tarde!
Fico grato pela resposta, eu vi sim o exemplo e tentei aplicá-lo, porém sem sucesso por não saber o que colocar no parâmetro directionsPanel, já tentei colocar diversas coisas incluse o id da div.
Coloquei o endereço origem,destino porém quando executo a página não aparece as localizações.
Como vc mesmo disse, nunca ter utilizado esta funcionalidade, gostaria muito se me ajudasse a utlizá-la.
Um grande abraço, mais uma vez muito obrigado!