Construir uma página com um mapa de Google, usando CSS
A construção com mapas de Google, que criamos com o API de Google Maps, é muito simples, já que o mapa ocupa o espaço disponível na camada onde estiver o conteúdo. Sendo assim, ao incorporar um mapa a uma página web, não temos que especificar o tamanho do mapa por Javascript nem nada parecido, simplesmente o mapa de Google tomará os atributos de largura e altura da camada (o <div> ) onde está contido. Isto é dinâmico, ou seja, se mudar o espaço disponível da camada onde estiver o mapa -já seja porque o usuário mudou o tamanho da janela ou porque se alteraram os atributos width e height da capa com Javascript ou por qualquer modo- mudará automaticamente o tamanho do mapa para se ajustar dinamicamente ao espaço disponível.
Dito isto, pode resultar pouco revelador este artigo, porque não vamos ver nada de Javascript, nem de criação de mapas de Google, e sim mostraremos como construir com CSS, tendo em conta que em uma das camadas há um mapa de Google. Não obstante, certamente algumas das informações proporcionadas aqui não serão triviais para os leitores.
Os atributos de altura e largura de um mapa são a camada que o contém
O exemplo mais simples que podemos encontrar para construir um mapa de google é que tenha dimensões em largura e altura fixas. É como colocamos os mapas no manual até este momento:
<div id=”map” style=”width: 765px; height: 388px”></div>
Neste exemplo, o mapa ocupa 765 pixel de largura e 388 de altura. Isto não tem nenhum segredo.
Porém, o que acontece se quisermos que um mapa de Google Maps tenha a largura de toda a janela do navegador? Porque sabemos que o navegador pode ter distintos tamanhos, dependendo da definição de tela do visitante e se a janela estiver maximizada ou dimensionada de qualquer outra forma.
Então é muito simples, podemos colocar width:100% na declaração de estilos css da camada onde está o mapa.
<div id=”map” style=”width: 100%; height: 388px”></div>
Este mapa ocuparia toda a área disponível da janela do navegador, ou da camada onde estiver contido.
O exemplo se complica se quisermos que o mapa de Google ocupe ademais toda a altura disponível no navegador, que também, sabemos, pode ser variável dependendo das características de tela ou do estado da janela do browser. O normal é que provássemos algo como isto:
<div id=”map” style=”height: 100%; width:100%;”></div>
Porém, isto tal qual, sem fazer nenhuma outra coisa, tem um problema e é que misteriosamente o mapa aparece vazio ou com height = 0. Isto é porque os navegadores têm problemas ao construir com height=100%. A idéia para solucioná-lo é colocar a todas as camadas que contenham ao mapa height:100%, assim como às etiquetas <BODY> e <HTML> que também deveriam ter o height de 100%. Então, assim deveria funcionar e o mapa ocuparia toda a altura e largura da janela.
Construir um mapa de Google com width e height 100%, porém misturado com outros elementos
Para acabar, veremos um exemplo de construção de um Google Maps que ocupa o 100% do espaço, porém que tem um cabeçalho e uma barra lateral. O cabeçalho e a lateral ocupam uns espaços fixos e o mapa de google ocupará todo o lugar que os outros elementos da construção deixam livres.
O exercício é simples, porém necessitaremos conhecimentos de CSS sobre construção e posicionamento. O código é o seguinte:
<!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” xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html;charset=ISO-8859-1″>
<title>Mapa de Google</title>
<script src=”http://maps.google.com/maps?file=api&v=2&key=coloque-sua-chave”
type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map”));
map.setCenter(new GLatLng(33,0),3);
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);
}
}
window.onload=load
//]]>
</script>
<style type=”text/css”>
html,body{
margin:0px;
height:100%;
}
</style>
</head>
<body>
<div id=”conteiner” style=”width:100%; height:100%;”>
<div id=”cabecalho” style=”background-color: #ffcc99; font-weight:bold; font-size: 110%; height: 23px; padding: 3px; margin-bottom:10px;”>Isto é o cabeçalho!!</div>
<div id=”lateral” style=”float:right; width:200px; height:100%; background-color:#eeff99;”>
<div id=”conteudolateral” style=”padding: 30px 10px 0 10px;”>
Por <a href=”http://www.guiarte.com”>guiarte.com</a>
<br />
<br />
Isto são conteúdos que colocamos na lateral esquerda. É muito fácil construir com um mapa de Google em uma camada que toma o tamanho do contêiner onde se encontra.
</div>
</div>
<div id=”map” style=”height: 100%; margin-right:210px;”></div>
</div>
</body>
</html>
Fonte: http://www.criarweb.com/artigos/construir-pagina-com-mapa-google-usando-css.html