Es muy fácil maquetar una página que tenga un mapa de Google, simplemente debemos utilizar maquetación y posicionamiento CSS.
La maquetación con mapas de Google, que creamos con el API de Google Maps, es muy sencilla, ya que el mapa ocupa el espacio disponible en la capa donde esté contenido. Así pues, al incorporar un mapa a una página web, no tenemos que especificar el tamaño del mapa por Javascript ni nada parecido, simplemente el mapa de Google tomará el los atributos de ancho y alto de la capa (el
<div>) donde está contenido. Esto es dinámico, es decir, si cambia el espacio disponible de la capa donde está el mapa -ya sea porque el usuario ha cambiado el tamaño de la ventana o porque se han alterando los atributos width y height de la capa con Javascript o por cualquier modo- cambiará automáticamente el tamaño del mapa para ajustarse dinámicamente al espacio disponible.
Dicho esto, puede resultar poco revelador este artículo, porque no vamos a ver nada de Javascript ni de creación de mapas de Google, sino que vamos a mostrar como maquetar con CSS, teniendo en cuenta que en una de las capas hay un mapa de Google. No obstante, seguro que algunas de las informaciones proporcionadas aquí no van a ser triviales para los lectores.
En DesarrolloWeb.com ofrecemos un manual en el que puedes aprender a trabajar con el API de Google Maps.
También recomiendo la lectura del material que ofrecemos en DesarrolloWeb.com sobre la maquetación CSS, pues voy a dar por sabidos los aspectos sobre maquetación con hojas de estilos y por tanto, no los voy a explicar.
Los atributos de altura y anchura de un mapa son la capa que lo contiene
El ejemplo más sencillo que podemos encontrarnos para maquetar un mapa de google es que tenga dimensiones en ancho y alto fijas. Es como hemos colocado los mapas en el manual hasta este momento:
<div id="map" style="width: 765px; height: 388px"></div>En este ejemplo el mapa ocupa 765 píxel de ancho y 388 de alto. Esto no tiene ningún secreto.
¿Pero qué pasa si queremos que un mapa de Google Maps tenga el ancho de toda la ventana del navegador? Porque sabemos que el navegador puede tener distintos tamaños, dependiendo de la definición de pantalla del visitante y si la ventana está maximizada o dimensionada de cualquier otra forma.
Entonces es muy sencillo, podemos colocar width:100% en la declaración de estilos css de la capa donde está el mapa.
<div id="map" style="width: 100%; height: 388px"></div>Este mapa ocuparía todo el área disponible de la ventana del navegador, o bien de la capa donde estuviera contenido.
El ejemplo se complica si queremos que el mapa de Google ocupe además todo el alto disponible en el navegador, que también, sabemos, puede ser variable dependiendo de las características de pantalla o del estado de la ventana del browser. Lo normal es que probásemos algo como esto:
<div id="map" style="height: 100%; width:100%;"></div>
Pero esto tal cual, sin hacer ninguna otra cosa, tiene un problema y es que misteriosamente el mapa aparece vacío o con height = 0. Esto es porque los navegadores tienen problemas al maquetar con height=100%. La idea para solucionarlo es colocar a todas las capas que contengan al mapa height:100%, así como a las etiquetas <BODY> y <HTML> que también deberían tener el height de 100%. Entonces nos debería funcionar y el mapa ocuparía todo el alto y ancho de la ventana.
Ahora veamos el ejemplo de un mapa de Google Maps que ocupa todo el ancho y alto del espacio en una página aparte.
Maquetar un mapa de Google con width y height 100%, pero mezclado con otros elementos
Para acabar veamos un ejemplo de maquetación de un Google Maps que ocupa el 100% del espacio, pero que tiene una cabecera y una barra lateral. La cabecera y el lateral ocupan unos espacios fijos y el mapa de google ocupará todo el sitio que dejan libre otros elementos de la maquetación.
Para explicarlo lo más sencillo es ver directamente el ejemplo en una página aparte.
El ejercicio es simple, pero necesitaremos conocimientos de CSS sobre maquetación y posicionamiento. El código es el siguiente:
<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=coloca-tu-llave" type="text/javascript"></script>
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...