Google maps dentro do sitePubliquei esse texto no meu blog e, como está dentro do tema do Client-side, resolvi tentar minha sorte em ser publicado aqui.

Li sobre JQuery pela primeira vez neste blog. 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.

  1. 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á.
  2. Scripts necessários: são dois, o JQuery e o JMap2.
  3. O html: é preciso que o navegador esteja com o javascript habilitado para que o Google Maps funcione, então o html do exemplo é apenas a tag body: 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    <!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&amp;v=2&amp;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.

  4. 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.
  5. O código a ser inserido é este, veja os comentários para entendê-lo: 
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    $(function (){//sintaxe do JQuery para a função ser executada quando o DOM estiver pronto
$("body").append("&lt;a href=\"\"&gt;Clique aqui para ver no mapa&lt;/a&gt;").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).after("&lt;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: "&lt;h3&gt;Paralelo 22&lt;/h3&gt;&lt;p&gt;Praça Abdon Batista&lt;br /&gt;Saco dos Limões - Florianópolis - SC&lt;/p&gt;",//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
})
})
  6. Pronto, não é fantástico o que pode ser feito com tão pouco código?