Cómo añadir mapas de Google Maps en WordPress

Hoy en día es bastante habitual que las páginas web tengan algún mapa. Como ejemplo, no hay más que mirar nuestra página de contacto ?. Los mapas, además de resultar muy vistosos, son una herramienta fantástica para que tus clientes sepan dónde encontrarte o para que tus visitantes sepan dónde tendrán lugar los eventos que organizas. Ahora bien, ¿sabes cómo añadir un mapa en tu web? Si no lo sabes y quieres aprender, ¡sigue leyendo!

Plugins—La forma más sencilla de añadir mapa de Google Maps en WordPress

Si necesitas añadir mapas a menudo, instalar un plugin seguramente sea la solución que más te interesa, puesto que te facilitará la tarea y te permitirá hacerlo sin salir de WordPress. Una sencilla búsqueda en WordPress.org sirve para descubrir que hay un montón de plugins para embeber mapas de Google en tu web. De todas formas, y para asegurarnos de que la entrada no se extienda tontamente, hoy me centraré únicamente en un ejemplo: MapPress Easy Google Maps, un plugin sencillo con más de 100.000 instalaciones activas que le avalan.

Después de instalar el plugin en tu WordPress, lo primero que verás cuando accedas a su página de ajustes es un aviso que te pide añadir una clave de API de Google Maps. Para conseguir una, basta con que sigas las instrucciones que te da Google aquí. Copia y pega la clave en cuestión en el campo Browser API key y guarda los cambios.

A continuación, dirígete a la pantalla de edición de una entrada o una página y busca la caja MapPress. Desde aquí podrás añadir y gestionar tus mapas. Empieza haciendo click en Nuevo Mapa para abrir el siguiente editor:

con el que podrás personalizar diferentes aspectos de tu mapa, tales como su nombre, su tamaño o la dirección que debe mostrar. Una vez lo tengas listo, haz clic en Insertar en el post y verás cómo aparece un pequeño «shortcode» en el cuerpo de tu entrada. Fácil, ¿no crees?

Los iFrames de Google Maps—Porque sin plugins también es sencillísimo

Si no quieres utilizar un plugin para algo tan sencillo como es añadir un mapa en tu web, te gustará saber que Google Maps hace que meter mapas en tu web sea tan fácil como copiar y pegar un iframe. Para ello, abre Google Maps en una pestaña de tu navegador y busca la dirección que te interese. Una vez la hayas encontrado, pulsa en el botón Compartir, selecciona la pestaña Insertar mapa, decide qué tamaño quieres y copia el iframe. Luego, dirígete a la página o entrada de tu blog que quieres que incluya el mapa y pega el iframe en su contenido.

Como puedes ver, esta solución no es ni más ni menos difícil que la anterior. De hecho, cada una de ellas tiene sus ventajas y sus inconvenientes. Entre las ventajas de esta tenemos que no necesitas usar una clave de API ni tienes por qué instalar otro plugin más en tu WordPress. De hecho, incluso puedes crear tus propios mapas, con múltiples marcadores, a través de la página de Mis Mapas de Google. En definitiva, es una solución rápida, sencilla y versátil.

Por otro lado, sus inconvenientes incluyen tener que salir de WordPress para copiar y pegar cosas de un lado a otro. Además, si vas cambiando con frecuencia la apariencia del mapa, el plugin te permite hacerlo una única vez (el shortcode siempre es el mismo, sea cual sea el mapa concreto por el que se sustituya), mientras que esta solución te fuerza a realizar los cambios «a mano».

Nelio Popups

¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.

Juan Hernando

WordPress.org

Descarga gratis

Versión premium

La API JavaScript de Google Maps—Toda la potencia que necesitas para tus mapas

La última opción que veremos hoy es cómo usar directamente la API JavaScript de Google Maps. Aunque es un poco más complicado que lo que hemos visto hasta ahora, es la solución más potente y que más posibilidades brinda. Y, por cierto, es la que usamos nosotros en la página de contacto.

Para poder usar la API, basta con seguir estos tres pasos:

1. Crea una etiqueta div donde quieras que vaya el mapa.
2. Carga la API JavaScript de Google Maps con tu clave de API.
3. Añade un script personalizado para
   • especificar la apariencia y comportamiento del mapa y
   • añadir los marcadores que quieras.

Veámoslo con un ejemplo. Empecemos por asumir que ya tienes una etiqueta div en tu web cuyo identificador es neliohq-map (es decir, que tienes algo tal que así: <div id="neliohq-map">). Lo único que tienes que hacer es completar los pasos 2 y 3. Para cargar la API JavaScript de Google Maps, pega el siguiente script en la página donde quieres que se muestre el mapa:

procurando sustituir el texto TU_CLAVE_DE_API_AQUI por, obviamente, tu clave de API ?

A continuación, necesitamos el script del paso 3 que se encargará de dibujar el mapa en si. Para ello, añade el siguiente script después del div neliohq-map. Puedes añadirlo como un script externo o directamente embebido en el HTML, como quieras:

Como puedes ver, es un script bastante sencillo: simplemente definimos una función llamada loadNelioHQMap y le decimos a la API de Google Maps que la invoque cuando todo esté listo (línea 5). Es obvio que estamos ante un script sencillo porque de momento la función que debería añadir el mapa está vacía… he hecho un poco de trampas para no asustarte ?, pero tranquilo, que ahora vamos ?. Añade el siguiente fragmento de código dentro de la función:

Aunque parezca complicado, no lo es. Fíjate que únicamente hay tres variables:

• mapEl es una variable que hace referencia al div del que hemos estado hablando todo el rato.
• mapOptions es un objeto JavaScript que, aunque se ve grande y asusta un poco, sirve únicamente para configurar la apariencia de nuestro mapa. Como puedes ver, se trata de una lista de pares «clave» y «valor» donde especificamos cómo queremos que se vea el mapa (nivel de zoom, ubicación, etc).
• map es el mapa en sí, tal cual lo define la API de Google Maps. Para crear la variable, hemos usado el constructor de la API new google.maps.Map, pasándole como parámetros las otras dos variables.

Si intentas aplicar este código verás cómo aparece el mapa en tu web. No obstante, nos falta algo: un marcador. Para ello, basta con añadir el siguiente fragmento de código a continuación (pero siempre dentro de la función):

Puedes añadir tantos marcadores como quieras repitiendo el bloque anterior y modificando los parámetros del constructor google.maps.Marker:

• map es una referencia a la instancia de google.maps.Map que acabamos de crear,
• position son las coordenadas (latitud y longitud) del propio marcador y
• icon contiene algunos parámetros de configuración de la apariencia del marcador, tales como el color o la forma.

Truco Final

Para ir cerrando ya la entrada, me gustaría compartir contigo un último truco que descubrimos cuando estábamos haciendo la nueva web de Nelio Software ?. Si quieres que los mapas se vean espectaculares, pásate por la web Snazzy Maps; se trata de un directorio de estilos que puedes aplicar a tus mapas y que sirven para cambiar completamente su apariencia.

Cuando encuentres un estilo que te guste, copia su «JavaScript Style Array» y añádelo como opción extra en el objeto mapOptions usando la clave styles:

¡Y eso es todo! Espero que esta entrada y las diferentes soluciones planteadas hoy te permitan añadir mapas de Google en tu web. Y, como siempre, si tienes cualquier duda, déjanos un comentario y te ayudaremos encantados.

Imagen destacada de la NASA.