Google Maps No WordPress

Pois é pessoal, faz tempo que não posto aqui… Mas é porque as coisas estão muito corridas… Vocês sabem né? Ano novo, vida nova,  novas promessas, novas metas, folego renovado, pensamentos um tanto quanto ousados, reflexão sobre a vida pessoal e profissional e muito mais.

Bem, se for falar sobre tudo que vem acontecendo, vou passar horas blogando, e a idéia deste blog não é esta. Mas o que posso dizer é que uma destas mudanças esta diretamente relacionada com este espaço. Quando eu criei esse espaço não sabia nada de blog. Não tinha parado para estudar e perceber como existem sistemas robustos que conseguem ir bem além de criar simples blogs e criar sistemas altamente customizaveis, um deles é o wordpress.

Só vim notar a capacidade do wordpress depois de uma ajuda enorme de um colega de trabalho (Hélio), que me mostrou várias coisas que podem ser feitas com o wordpress.org, me mostrou sistemas um tanto quanto complexos que foram feitos no mesmo.

Como meu blog atual esta hospedado no wordpress.com, decidi criar um wordpress.org com a minha cara, com o layout que quero, com as funcionalidades que desejo e muito mais. O que posso dizer no momento é que  está sendo muito divertido aprender a mecher no  wordpress de verdade. Estou relembrando meu tempo de programador php.

Concerteza, apartir deste tema (wordpress) iremos falar sobre muitos outros que irão vir em posts futuros (em outros tópicos iremos falar sobre CMSs, Como personalizar o wordpress, php + ajax com wordpress…).

Então, o que posso dizer é que: podem esperar que muitos posts estão por vir em um blog cheio de funcionalidades e com um layout bem mais bonito.

Mas a intenção deste post não é ficar jogando palavras ao vento, mas sim falar de uma necessidade que tive, que por sinal foi facil e rápida de resolver. Quando comecei a fazer meu blog no wordpress.org precisei colocar em uma determinada área um mapa dinamico, onde o usuário poderia colocar pinos e selecionar determinadas áreas do mapa. Nesta primeira parte deste post iremos mostrar como colocar um mapa em uma de nossas páginas no wordpress. Então, vamos seguir a sequencia de passos:

1. vá no caminho:

{raiz-do-wordpress}\wp-content\themes\{seu tema}

e localize o arquivo header.php. Abra-o.

2. Coloque o seguinte recho de código no header do arquivo:

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key={SUA CHAVE}
type=”text/javascript”></script>

<script type=”text/javascript”>
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
try {
var map = new GMap2(document.getElementById(“map”));
if (map) {
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}catch(ex){
//evitar que aparecam erros para o usuário
}
}
}
//]]>
</script>

OBS: O que encontrasse dentro das chaves e está destacado, é uma chave de acesso ao servico que você consegue no proprio site da google.

http://code.google.com/intl/pt-BR/apis/maps/signup.html

Pegue a chave e cole na url.

3. Assine a tag body do mesmo arquivo da seguinte maneira:

<body onload=”load();” onunload=”GUnload();”>

4. Já esta quase tudo pronto… O que falta fazer agora é adicionar no código HTML da página que você for criar o seguinte trecho de código:

<div id=”map” style=”width:500px;height:300px”></div>
<div>

OBS: Você pode alterar o width e o height da div

Bem…. agora você já pode rodar o seu wordpress e verificar que a página que foi editada já contem o sistema de mapas do google (google maps).

Espero ter ajudado. Podem esperar que em pouco tempo estaremos com novo blog no ar. E em próximos posts iremos mostrar como personalizar o google maps e como interagir com o mesmo  utilizando php + ajax.

Este post ficou pequeno pois foi feito rápidamente em horario de almoco de trabalho. Se você acha que viu algum erro de portugues neste post, fique tranquilo!!! Foi a regra da lingua portuguese que mudou (rsrsrs).