Vincular un mapa de Google Maps

Profesores:JAB y Ester Torres
Cómo vincular 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)

y

copiamos todo el código inferior
(empieza por <iframe...>).

y lo pegamos en un <div> nuevo que vamos a crear y colocar justo debajo de la línea que cierra el formulario (</form>). 
	...
</form>

<div id="mapa">

   <iframe src="https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x12a4a296a3
   edc94f%3A0xf1044539a3f39559!2sPasseig+de+Gr%C3%A0cia%2C+114%2C+08008+Barcelona!5
   e0!3m2!1ses!2ses!4v1389720196004" width="510" height="425" frameborder="0"
   style="border:0"></iframe>

</div>
En este código todavía podemos modificar el tamaño del mapa cambiando los valores en los atributos width y height.

Como interesa colocar el mapa a la derecha del formulario es básico que tengan la misma altura (425) y para que ambos elementos quepan en el ancho del navegador es necesario especificar una anchura concreta (510) píxeles.

Colocar el mapa a la derecha del formulario
Otro de los pasos que afecta directamente al código HTML anterior es introducir el formulario (todo lo que hay entre <form...> y </form>) dentro de un <div> al que llamaremos id="formulario", para poder poner ambos divs como ventanas flotantes utilizando la etiqueta float. 
	...
<div id="formulario">
   <form action="enviar.php" method="post">
     <fieldset>
       ...
       ...
       <input id="boton_enviar" type="submit" value="Enviar">
   </form>
</div>

<div id="mapa">
       ...

Para que el ejemplo de código no sea excesivamente largo hemos añadido "..." para sustituir múltiples líneas de código que no cambian respecto a la versión anterior.

En este caso sólo hay que añadir <div id="formulario">) justo antes de iniciar el <form..> y </div> justo después de cerrarlo con </form>.

Ahora que ya tenemos el formulario dentro un <div> llamado "formulario" y el mapa en otro <div> llamado "mapa" vamos a añadir el CSS que los va a mantener uno a la derecha del otro.
estilos.css
#formulario{
   width:590px;
   float:left;
   margin-top:15px;
}

#mapa{
   width:510px;
   float:left;
   height:425px;
   border-radius:0 7px 7px 0;
   margin-top:15px;
}
De los 1100 píxeles que especificamos de anchura total de #contenido2 en el tema: Creación de un formulario de contacto, 590 estarán destinados al formulario y 510 para el mapa.

Al <div> que contiene al formulario le especificamos la anchura correspondiente (width:590px;) y un float:left; para que se coloque al lado del siguiente elemento (alineado desde la izquierda).


Al <div> que contiene el mapa le damos los mismos parámetros (anchura y float:left), además de otros complementarios (altura, redondeado de bordes y margen superior).

o acceder al siguente tema dedicado a las