Raúl Santos
Já lá vai algum tempo desde que mexi na API do Google Maps e ontem dei por mim a bater com a cabeça na parede por não conseguir pôr a funcionar uma coisa tão simples quanto um mapa numa página XHTML Strict de uma aplicação web que estou a construir com o Google App Engine (yeah, I’m a Google biatch). O código estava correcto, o HTML era válido, até alterei o Javascript para ser idêntico ao que é dado nos exemplos da documentação - e nada. O mapa simplesmente não aparecia.
Após alguma experimentação, lá descobri alguns problemas.
O primeiro era bastante subtil e foi devido a copiar o código dos exemplos deles sem olhar. O exemplo base de como colocar um mapa numa página define este pedaço de código:
Ora em XHTML Strict, a altura dos elementos base “html” e “body” não está definida à partida, portando dizer que aquele “div” tem uma altura de 100%, é dizer que a sua altura é a totalidade da altura do elemento pai, o que não tem efeito nenhum, pois o elemento pai não tem altura definida, e 100% de uma quantidade indefinida, é também uma quantidade indefinida. Logo, nada de mapa, pois não tinha altura e por isso não era visível.
Como resolver? Simples, em CSS:
html, body {height: 100%}
Mas isto era apenas para pôr o exemplo base a funcionar, porque o que eu queria era garantir que o mapa estava a funcionar e partir daí para o que eu queria fazer, dando-lhe as dimensões pretendidas (e também não me apetecia ter CSS inline no HTML).
Com isto e com o código do exemplo, o mapa já aparecia. Mas implementando estas alterações no meu código, nicles, o mapa ia-se novamente. De volta à caça do problema invisível…
O próximo problema foi o facto de ter especificado o doctype do HTML como XHTML Strict, bem como o namespace do XHTML. Ou seja:
Lá andei a procurar na web e lá percebi o porquê: a API do Google Maps usa uma iframe para mostrar o mapa mas como iframes não existem no doctype de XHTML Strict, kaput, nada feito. Para testar a teoria eliminei o doctype por completo e passando o código acima para isto:
o mapa já aparecia. O problema é que desta forma o meu HTML já não era válido. E eu quero o meu HTML válido!
Tinha então duas opções para poder continuar a usar o mapa:
- passava a usar HTML inválido;
- ou, uma solução que li algures num grupo de discussão, que consistia em criar o mapa todo "manualmente" através da API do Google Maps, em vez de usar o simpático método
google.maps.Map().
Infelizmente nenhuma das duas soluções me satisfazia. A primeira estava totalmente fora de questão. A segunda era válida mas não me agradava - quando progredir na implementação do mapa, até devo acabar por usar muitos dos métodos que utilizaria desta forma mas irrita-me não poder usar uma coisa de uma maneira que está ali à mão de semear, portanto nem liguei muito a essa hipótese (e por isso nem sei explicar bem em que consistia mas assumo que fosse replicar manualmente tudo o que o método Map() faz).
Tinha que encontrar uma terceira solução.
Lembrei-me logo de HTML 5, que simplifica bastante toda esta treta dos doctypes e afins. Felizmente o W3C é suficientemente simpático para ter uma página dedicada às diferenças do HTML 4 para o HTML 5, que me deu a informação necessária (e mais alguma interessante).
E assim passei disto:
Et voilá! Problema resolvido. Fico com um doctype muito mais simples, desde que o servidor sirva as páginas como text/html os browsers vão usar o modo de standards, e tenho o mapa a funcionar.
Acho que vou passar a usar este doctype de agora em diante. Desde que não use, por enquanto, nenhuma das coisas novas do HTML 5 que ainda não são suportadas pelos browsers, não deverei ter problemas. :)