Utilidades

Añade mapas de Google maps a tu WordPress

11/06/2018

Con esta guía vas a aprender a insertar mapas de Google Maps en tu sitio web en WordPress.
Lo primero que debes saber es que hay varias formas de insertar un mapa de Google Maps en WordPress, y dependiendo del uso que le vayas a dar, te interesará una forma u otra.

Insertar mapa manualmente

Esta es la forma más sencilla, y consiste básicamente en copiar el código de la web de google maps y pegarlo en un post o donde quieras insertar el mapa.
Esta forma es la más recomendada si no sueles insertar mapas en tu sitio web, sino que lo haces muy esporádicamente.
Ve a Google Maps y ve a la ubicación que quieras.

Google Maps - Ubicación

Luego pulsa en el botón de arriba a la izquierda para que aparezca el menú, y después pulsa en Compartir o insertar el mapa.

Google Maps - Menu

Se te abrirá una ventana para compartir el mapa. Pulsa en Insertar un mapa para que aparezca el código necesario para insertar el mapa.

Google Maps - Compartir

Puedes elegir el tamaño de la ventana en la que se mostrará el mapa, y ademas podrás ver el tamaño que tendrá cuando lo pegues en WordPress.
Selecciona el tamaño que quieras y copia el código necesario <iframe src="https://www.google.com/maps/...></iframe>

Google Maps - Insertar un mapa

Ahora pégalo donde quieras insertar el mapa.

Código del mapa

Ahora solo falta visualizar el mapa en tu sitio web.

Método 1 - Manualmente

Insertar mapa con plugin

Este método consiste en utilizar un plugin para insertar los mapas. Si insertas mapas de forma habitual, esta es la mejor solución para tí, pues te permite insertar mapas de forma sencilla y rápida.

Primero instala y activa el plugin MapPress Easy Google Maps.

MapPress Easy Google Maps

Después ve al post en el que quieres insertar el mapa, y mientras lo estás editando pulsa en Nuevo mapa, debajo del post.

Plugin - Insertar mapa 1

Se te desplegará un mapa junto a algunos campos para ponerle título al mapa, tamaño, un campo de búsqueda del mapa, etc. Busca la ubicación que deseas mostrar, y cuando la tengas, pulsa en Guardar.

Plugin - Insertar mapa 2

Cuando lo tengas guardado, sitúa el puntero del ratón sobre el nombre del mapa y pulsa en Insertar en el post

Plugin - Insertar mapa 3

Al insertar el mapa, te saldrá este código: [mappress mapid="1"]; (el número corresponde al número de mapa guardado).

Ahora sólo tenemos que visitar el post en el que hemos insertado el mapa para verlo.

Método 2 - Plugin

Al instalar el plugin, nos habrá salido la siguiente notificación:

Error - API KEY

Esta notificación se debe a que debemos insertar una API Key de Google Maps.

A continuación vamos a mostrar cómo obtener la clave necesaria para que puedas mostrar correctamente los mapas de Google Maps en tu web.

Obtener API Key de Google Maps

Primero visita la página de desarrolladores de Google y pulsa en OBTÉN UNA CLAVE.

Obtener API Key 1

Al pulsar el botón para obtener una clave, se te abrirá una ventana. En esta ventana, crea un nuevo proyecto con el nombre que quieras (es recomendable poner el nombre del dominio para tener un mejor seguimiento de dónde estás utilizando la API) y pulsa en NEXT.

Obtener API Key 2

Finalmente se te mostrará la API Key junto a un mensaje que dice que puedes mejorar la seguridad de la aplicación restringiendo el uso de la key que se acaba de generar. Copia la clave con el botón que aparece a su derecha, ya que si seleccionas el texto y lo copias se copiarán algunos caracteres adicionales no deseados. Pulsa en DONE cuando hayas terminado para cerrar la ventana.

Obtener API Key 3

Tras copiar la key, ve a la configuración del plugin y péga la key en el campo correspondiente. Cuando lo hayas hecho, guarda los cambios y comprueba que no sale ninguna ventana indicando que no tienes una API Key.

Pegar API KEY

Comprueba también que el mapa se ve correctamente, ya que si pegas una key mala, no se verá el mapa, si no que se verá un mensaje indicando que no se ha podido cargar el mapa. Aquí un ejemplo del mensaje que aparece.

Error API KEY

Insertar mapa con widget

Hay otra forma de insertar un mapa, y es en forma de widget. Este método es básicamente para mostrar un mapa de un punto concreto (por ejemplo, para mostrar la ubicación de una tienda cada vez que se visualiza un producto).

Lo primero que debes hacer es instalar y activar el plugin Google Maps Widget

Google Maps Widget

Ahora ve a Apariencia > Widgets y arrastra el widget Widget de Mapas de Google a la plantilla en la que quieres mostrar el mapa.
Luego pulsa en la flecha para que se desplegue la configuración del mapa.

Error - API KEY

Como puedes ver, hay una advertencia en rojo que nos indica que debemos meter una API Key de Google Maps. Para ello pulsamos en settings, o vamos a Ajustes > Widget de Mapas de Google, que es lo mismo.

Ahora ponemos la API Key en su campo correspondiente y veremos que desaparece el mensaje de error que hay en la parte de arriba.

Insertar API KEY

Por último, vamos a ver cómo queda el mapa insertado con el widget.

Método 3 - Widget

Aunque es poco probable que utilices los dos últimos métodos de forma simultánea, debes saber que cada plugin debe tener su propia API Key, pues si se utiliza una única API Key, Google rechazará dicha key, con lo que ningún mapa se mostrará.

Como resumen, vamos a indicar que el método manual es recomendable utilizarlo para insertar un mapa de forma puntual.
El método del plugin se recomienda cuando se insertan mapas habitualmente, ya que es más rápido insertar mapas con el plugin que manualmente.
El método del widget es recomendable utilizarlo para fijar uno o más mapas. Es una buena forma de anclar un mapa y olvidarte. El ejemplo que hemos puesto anteriormente es el de mostrar la ubicación de una tienda en todas las páginas del sitio web que visitan los clientes.

¿Nos ayudas a mejorar la calidad del blog?
Déjanos una valoración sobre este post para poder seguir mejorando
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando...

1 Comentario

  1. Jesús Olazagoitia

    Hola, enhorabuena por el artículo, muy completo. Me gustaría aportar una alternativa a Google maps https://wordpress.org/plugins/map-block-leaflet/
    Es un bloque gratuito para el nuevo editor de WordPress que no necesita ningún tipo de API Key simplemente instalar y disfrutar.

Deja una respuesta

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


* Campo obligatorio.