Añade mapas de Google maps a tu WordPress

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.

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.

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.

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>

Ahora pégalo donde quieras insertar el mapa.

Ahora solo falta visualizar el mapa en tu sitio web.

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.

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.

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.

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

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.

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

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.

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.

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.

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.

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.

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

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.

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.

Por último, vamos a ver cómo queda el mapa insertado con el 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.