<iframe>
Profesor: Javier López
Volver
<iframe>
Añadir un mapa de Google Maps

<iframe>
<iframe> es una etiqueta de HTML bastante antigua que permite añadir de una manera muy fácil y rápida una página web o contenido dentro de otra página. Para ello únicamente hay que indicar la dirección web del contenido o página html que quieres insertar y el espacio de la ventana que mostrará dicho contenido.

A pesar de que con HTML5 <iframe> tiene sustituto el hecho de que servicios como GoogleMaps o Youtube la utilicen para mostrar sus mapas o vídeos en nuestras páginas ha hecho que se sigan utilizando de una manera muy habitual.

De hecho, para añadir un mapa o un vídeo de youtube el código nos lo proporciona la propia página. Nosotros sólo tenemos que pegarlo sin más dentro de un <div> que deberá tener un nombre de id o de class para poderlo personalizar con CSS.

La sintaxis es la siguiente:

<iframe width="640" height="510" src="http://www..." frameborder="0">
</iframe>
Los atributos que utilizamos son width y height para definir el tamaño que tendrá la ventana que mostrará el contenido, frameborder para que esta ventana o marco no tenga borde, y sobre todo src para indicar qué página o contenido se debe mostrar dentro de esta ventana.

Para mostrar un vídeo de youtube se explicará en el tema dedicado al vídeo del módulo 4, en el caso de querer añadir un mapa de Google Maps se explica a continuación.

Añadir un mapa de Google Maps


Accedemos a Google Maps (www.maps.google.es)

Buscamos la dirección del mapa que queremos mostrar
(o el nombre de la empresa si existe en Google Maps).

Aplicamos el zoom que deseemos.

Pulsamos sobre el botón "Configuración"
(ubicado en la parte inferior derecha de la pantalla)
y seleccionamos la opción:

"Compartir e insertar mapa".




Seleccionamos la pestaña superior derecha:
"Insertar mapa".
Para indicar el tamaño del mapa hacemos
clic sobre la opción que inicialmente muestra
el valor "Mediano":
(ubicado en la parte superior izquierda de la pantalla).



Seleccionamos la opción:
"Tamaño personalizado".


Escribimos la anchura y altura
que queremos que tenga el mapa
(expresado en píxeles)



Copiamos todo el código
(el que empieza por <iframe...>).

Lo pegamos dentro de un <div> que debe tener un nombre de id o class para poder editarlo posteriormente con CSS.