Como insertar un mapa en tu WordPress sin plugins y con estilo 😉

Por Natalia En Clave Productiva

El 28 febrero, 2018

insertar-un-mapa-ppal

¿Tienes un negocio local? Entonces sabrás seguro que es clave ayudar a tus potenciales clientes a que lo encuentren, ¿verdad? Insertar un mapa en tu página web te facilitará mucho esto. ¡Y es facilísimo!

En este tutorial te explicaré paso a paso como insertar un mapa en tu WordPress paso a paso y de forma detallada. Además, te mostraré algunos trucos para conseguir que tu mapa se muestre con estilo 😉

Porque no es lo mismo:

Que por ejemplo:

 

 

Te explicaré como «tunear» el código para enmarcar tu mapa, incluso para hacerlo responsive. ¡Utiliza tus colores corporativos! Quedará mucho mejor. Y sí, hay que tocar código pero solo un poquito en el editor. Y además ¡no muerde!  Yo te explico como.

A todo esto, es la segunda vez que utilizo la playa de Samil para poner un ejemplo de mapa… ¿Acabarán por darme comisión del Ayuntamiento de Vigo? 😉

¿Dónde puedo mostrar el mapa?

¡Dónde tú quieras! Lo más habitual es mostrarlo en la página de contacto, dentro del contenido o en un widget lateral. También en las landing-page que proceda. Por ejemplo, si organizas algún evento presencial o creas una oferta para conseguir que tus visitantes online visiten tu tienda física.

En el tutorial veremos como ajustar el aspecto del mapa a tus objetivos, según dónde quieras insertarlo.

¿Cómo insertar un mapa de Google en mi sitio web?

Con código 😉 Hay que copiar el código del mapa en Google Maps y después pegarlo en tu sitio.

El primer paso es buscar tu negocio en Google Maps. Por cierto, ¿lo tienes dado de alta en Google My Business? ¡Es clave! Mira este post donde se explica como hacerlo. Podrás insertar el mapa aunque tu negocio no tenga ficha en Google My Business, pero no debes desaprovechar esa herramienta, ya que potencia poderosamente el SEO local.

Ahora vamos a por el código. Ve a Google Maps y teclea la dirección exacta de tu negocio en la barra de búsqueda. Una vez que tengas la ubicación bien localizada en la pantalla, haz click sobre «Compartir»

insertar-un-mapa-compartir

A continuación se abrirá una ventana donde verás ambas opciones: conseguir el enlace para compartirlo o bien el código para embeber el mapa en tu sitio web. Haz clic sobre la pestaña «Insertar Mapa» como ves en la imagen.

insertar-un-mapa-codigo

Ahí ya tienes el código de tu mapa. Y más opciones, porque la herramienta te ofrece diferentes tamaños de mapa, ¡incluso puedes definir un tamaño personalizado!

¿Dónde quieres que se muestre tu mapa? Selecciona el tamaño que necesites. Si vas a poner el mapa en un widget lateral de tu sitio, elige un tamaño pequeño. Configura «tamaño personalizado» y prueba 250×250 px, por ejemplo. Si lo vas a incluir en el contenido de la página, elige las dimensiones que prefieras. Y si no quieres romperte la cabeza con el código, no pongas una anchura superior a 320 px, o el mapa se verá cortado en dispositivos móviles.

Si te parece que se ve muy pequeño en PC y quieres hacer un mapa responsive, encontrarás el código hacia el final del post.

 

insertar-un-mapa-tamano

Una vez configurado el tamaño, copia la línea de código <iframe…> de tu  mapa.

¿Dónde pegar el código en WordPress?

  • Si quieres que aparezca en un widget:

Ve al menú «Apariencia>Widgets» y  arrastra el bloque «HTML personalizado» dentro del widget donde quieras mostrar tu mapa.

insertar-un-mapa-widget

Copia el código en el espacio en blanco y haz click en «Hecho» para guardar». Visualiza la página para comprobar que el mapa se carga bien. Y vuelve al widget para editar el código y dar estilo a tu mapa. A continuación verás los atributos que necesitas añadir al código para ello.

  • Si quieres que el mapa aparezca en una pestaña:

En la pestaña HTML de la página donde quieres que aparezca.

insertar-un-mapa-pegar-codigo

Una vez que lo hayas pegado, haz clic en «Solo guardar» y, a continuación en «Vista previa» para comprobar que el código funciona.

Después vuelve a editar la entrada para modificar el aspecto del mapa.

1.- Añadir un borde de color al mapa

Esto es sencillísimo.

Para aplicar un color al borde, necesitas saber el código hexadecimal del color, el código que hace que un elemento se muestre de un color determinado en la pantalla. Empieza por el símbolo almohadilla y se compone de 6 dígitos, letras y números.

Puedes saber el código hexadecimal de cualquier color que ves en la pantalla añadiendo a tu navegador una de las muchas extensiones que existen para ello. Yo utilizo Google Chrome y la extensión «ColorPick Eyedropper«.

Instálala en tu navegador. Después, averiguar el color de cualquier parte de la pantalla será tan sencillo como hacer click sobre el icono de la extensión insertar-un-mapa-icono-color-pick-eyedropper y a continuación sobre la parte de la pantalla cuyo color quieres averiguar. El código hexadecimal se mostrará en un pop-up. Anótalo para tenerlo a mano.

insertar-un-mapa-codigo-hex

¿Quieres saber el código hexadecimal de cualquier color aunque no esté en tu pantalla? Visita este sitio

Si ya sabes el código hexadecimal del color que quieres utilizar en tu mapa, podemos pasar a modificar el código.

Fíjate en el código, donde pone frameborder="0" style="border:0"  sustituye border:0 por el trozo de código que ves a continuación:

border: 3px solid #xxxxxx;

Sustituye las «xxxxxx» por el código hexadecimal del color que quieras que sea el borde. También puedes establecer el grosor del borde en píxeles que prefieras.

2.- Centrar el mapa:

Para centrar el mapa en la pantalla hay que utilizar los atributos «display-block» y «margin:0 auto;».

"margin: 0 auto; display: block;

En el código que copias de Google Maps se indica «display:inline-block». Borra inline.

El código quedaría finalmente así:

<iframe style="margin: 0 auto; display: block; border: 3px solid #019cba;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11821.95499257217!2d-8.7792283!3d42.2039977!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd258a74d08202e3%3A0xc92165195e191e2b!2sPlaya+de+Samil!5e0!3m2!1ses!2ses!4v1519383704684" width="600" height="300" frameborder="0" allowfullscreen="allowfullscreen">

¿Te fijas? En realidad no hace falta saber  código: solamente tienes que modificar un par de parámetros para conseguir mejorar el aspecto de tu mapa.

3.- Otras modificaciones:

  • Que el marco tenga bordes redondeados:

¡Fácil! Simplemente incluye este trozo de código:  «border-radius: 20px 20px 20px 20px;»

  • Que haya distancia entre el marco y el mapa:

Añade  «padding: 10px;»

Puedes establecer la distancia en píxeles que tu quieras para separar el borde y el mapa.

Aquí tienes el mapa del ejemplo añadiendo estos dos parámetros:

Y este es el código por si quieres copiarlo y pegarlo directamente en tu sitio.

<iframe style="margin: 0 auto; display: block; border: 3px solid #019cba; border-radius: 10px 10px 10px 10px; padding: 10px;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11821.95499257217!2d-8.7792283!3d42.2039977!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd258a74d08202e3%3A0xc92165195e191e2b!2sPlaya+de+Samil!5e0!3m2!1ses!2ses!4v1519383704684" width="320" height="300" frameborder="0" allowfullscreen="allowfullscreen"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></iframe>

Solo tendrías que sustituir lo que ves entre comillas a partir de src: por lo que ponga en tu mapa. Fíjate en la imagen, en la parte subrayada.

insertar-un-mapa-cambiar-src

¡Más fácil imposible!

Cómo hacer el mapa «responsive» para que se vea bien en todos los dispositivos:

Este código lo he creado siguiendo un tutorial de Sandra Guerrero, de «Despegayvuela», y es algo más complejo.

<div style="position: relative; padding-bottom: 48.38%;"> <iframe style="margin: 0 auto; display: block; border: 3px solid #019cba; border-radius: 10px 10px 10px 10px; padding: 10px; position: absolute; top: 0; left: 0; width: 90%; height: 90%;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11821.95499257217!2d-8.7792283!3d42.2039977!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd258a74d08202e3%3A0xc92165195e191e2b!2sPlaya+de+Samil!5e0!3m2!1ses!2ses!4v1519383704684" width="620" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

 

Como explica Sandra, el valor de «padding-bottom» en la primera línea del código, es el resultado de dividir la altura entre la anchura del mapa, (es decir, los valores «width» y «height»)  y multiplicar por 100.

300/620= 0.4838

Copia y pega este código en tu sitio. Después solo tendrás que sustituir la dirección a partir de «src:» como vimos antes y ajustar el ancho y el color del borde. Si además decides utilizar un mapa de otras proporciones, deberás modificar los valores «width» y «height» y hacer la división para calcular el valor de «padding-bottom».

Conclusión:

Como ves, no es nada complicado. Solamente hay que cambiar un par de valores, y ya puedes insertar un mapa con estilo. Además, con este código podrás modificar el aspecto de otros elementos <iframe> que utilizas en tu sitio, como por ejemplo vídeos de YouTube. ¡Pruébalo!

¿Has podido seguir el tutorial? Si no, ya sabes, ¡escríbeme y te ayudo!

 

 

Natalia En Clave Productiva
Natalia En Clave Productiva

Profesional del Marketing digital y marketing de contenidos en constante formación. Aquí comparto todo lo que voy aprendiendo o me parece interesante sobre Marketing Digital, Social Media y Mundo Online.

Quizá también te interese:

Inbound Marketing: crea tu propia estrategia, ¡tú puedes!

Inbound Marketing: crea tu propia estrategia, ¡tú puedes!

El Inbound Marketing es, según mi criterio, la mejor estrategia posible en nuestros días. ¿Por qué ? Porque, por definición se centra en el usuario.  Y en un mercado tan competido como el actual cualquier estrategia no centrada en el usuario tiene poco sentido. Veamos...

Como mostrar autor del post en Divi Wordpress

Como mostrar autor del post en Divi Wordpress

¿Te has fijado en la información de autor del post que aparece en la mayoría de blogs? ¿Sabrías como configurar el tuyo? Me refiero a esto:Se conoce como "author-box" o caja de autor. Se muestra al final de cada post (cuando la configuras, claro) y sirve, como puedes...

Como acelerar WordPress: imágenes de próxima generación

Como acelerar WordPress: imágenes de próxima generación

Acelerar WordPress es el objetivo de cualquier webmaster que tenga su sitio creado con este CMS. Más que objetivo, debería ser obsesión: todos sabemos que la velocidad de carga es uno de los principales factores SEO. Y también sabemos que las imágenes son normalmente...

2 Comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Share This