Seguramente te haz topado con algunos blog que muestran la dirección exacta de su local, empresa, negocio, etc. Ademas le agregan un mapa para que puedan ubicarse mejor. Esto normalmente lo podemos observar en la sección de contacto, pero en realidad se le puede dar muchos usos.
En este tutorial veremos a como agregar un Mapa de Google en nuestro blog. Tal vez pienses que es algo fácil, pero también veremos una opción que ayudará que cuando hagamos scroll (deslizarse verticalmente) no afecte al mapa. Ya que cuando colocamos nuestro cursor encima del mapa y hacemos scroll, lo que pasará es que haremos zoom en el mapa.
Vamos al procedimiento.
Lo primero que debemos hacer es entrar a Google Maps y buscar la dirección que queremos mostrar.
Una vez ubicado nuestro mapa lo que haremos es entrar a la opción Compartir, la cual se encuentra en la barra lateral izquierda. Luego de entrar en Compartir, nos saldrá una ventana. Seleccionamos la pestaña Incorporar Mapa.
Ahora en esta pestaña tendremos la opción de cambiar el tamaño de nuestro mapa. Si lo abrimos tendremos cuatro alternativas, Pequeño, Mediano, Grande y Tamaño Personalizado. Nosotros escogeremos Tamaño Personalizado para colocar el tamaño exacto que se adecua mejor a nuestro blog. Es importante recordar el tamaño exacto de nuestro mapa.
Una vez agregado el tamaño exacto de nuestro mapa, tanto el ancho como el alto. Lo siguiente que haremos es copiar el iframe que se generó de nuestro mapa y copiarlo en una entrada, página o en cualquier otra parte de nuestro blog.
Y listo ya tendríamos agregado nuestro Mapa de Google en nuestro blog. Pero ahora falta lo último y es desactivar las opciones del mapa cuando hagamos scroll (deslizar verticalmente) para que no tengamos problemas al navegar por nuestro blog.
Para ellos tendremos que pegar el siguiente código antes de nuestro mapa:
<div class="overlay" onClick="style.pointerEvents='none'"></div>
Esta etiqueta div será una capa transparente para que bloquee las opciones que trae el Google Maps. Pero una vez que hagamos click sobre él, entraremos a sus opciones.
Entonces una vez pegado el código anterior debemos tener algo como esto:
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3901.608167491133!2d-77.03652438564812!3d-12.070458445626997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c8ecd6a69b35%3A0x53a39d719c1b610c!2sFuente+de+las+Tradiciones!5e0!3m2!1ses-419!2spe!4v1472177263030" width="610" height="362" frameborder="0" style="border:0" allowfullscreen></iframe>
La primera línea es la capa que desactivará las opciones del mapa. Y el resto de color blanco es el código del mapa.
Ahora para terminar, entramos a Plantilla > Personalizar > Avanzado y añadimos los siguientes estilos para la etiqueta div que pegamos anteriormente:
.overlay {
background: transparent;position: relative;width: 610px;height: 362px; /* Alto de tu mapa */top: 362px; /* Alto de tu mapa */margin-top: -362px; /* Alto de tu mapa */}
En este código tendremos que hacer una modificaciones, aunque con los comentarios que tiene creo que ya es más fácil pero de todas formas lo explicare.
Solo modificaremos las cuatro últimas propiedades las cuales son: width, height, top, margin-top con las medidas de nuestro mapa, que anteriormente configuramos.
Width => Ancho de nuestro mapa
Height => Alto de nuestro mapa
Top => Alto de nuestro mapa
Margin-top => Alto de nuestro mapa en negativo
Ahora guardamos y listo ya tendríamos nuestro Mapa de Google en el blog y sin errores al hacer scroll por él.
Info: Stack Overflow
¿Tienes alguna duda?