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

WordPress

¿Quieres tener más tráfico en tu web? ¡Yo también! Es por eso que hemos creado Nelio Content, un nuevo plugin que automatiza la promoción de contenidos en redes sociales. ¿Quieres saber más?

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.

Ajustes de MapPress
Página de ajustes de MapPress, después de finalizar su instalación. Fíjate que hay una notificación avisándote de que falta la clave de API para poder usar el plugin correctamente.

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:

Creación de mapas con MapPress
Crear y personalizar mapas con MapPress es muy sencillo. Simpemente ponles un nombre, configura las cuatro opciones que te pide y… ¡listo!

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.

Creación de mapas con la propia web de Google Maps
La propia web de Google Maps te permite crear mapas para embeber en tu web. Simplemente busca la ubicación que te interesa, pulsa en Compartir y copia y pega el iframe que te da Google en tu WordPress.

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”.

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.

FlojaNo está malBienMuy bien¡Impecable! (6 votos, promedio: 4,50 de 5)
Cargando…

por

Lidera el análisis y diseño de nuestros servicios, así como el servicio de soporte a los usuarios. Es Doctor en Computación por la UPC y siempre ha estado interesado en una gran variedad de áreas, incluyendo el modelado conceptual, la realidad virtual y la impresión digital en 3D. Contribuye muy activamente en la comunidad WordPress, habiendo participado en meetups, seminarios y en la WCEU.

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

    1. Buenos días, José Manuel.

      ¡Gracias por la aportación! Efectivamente, parece ser que tienen un plugin de WordPress que te permite personalizar la apariencia de los mapas que tengas en la web “independientemente” de cómo se hayan añadido. Aunque no lo he probado personalmente, quizás merezca la pena darle una oportunidad.

      Un saludo,
      David

    1. Hola Rafael,

      Todos estos marcadores los han puesto manualmente. Así que, usando la API JavaScript de Google Maps, lo único que tienes que hacer es añadir múltiples google.maps.Marker en las ubicaciones correctas.

      Un saludo,
      David

  1. Yo tengo un problema y es que al tratar de conseguir una API me suelta este mensaje
    “Error durante la carga de la página. Actualízala para volver a intentarlo”
    Intento creando un proyecto nuevo o accediendo desde otra cuenta y lo mismo .
    Soy nuevo con esto , estoy empezando a usar wordpress y esto me tiene los pelos de punta intento insertar un mapa de mi negocio, pero no logro obtener mi API, tienes idea del porque me suelta ese mensaje, algo que puede hacar?

    Muchas gracias

  2. David Muchas gracias por la información. De pronto conoces algo integrado con wordpress que permita poner lugar de salida y llegada y el mapa pinte la ruta para conocer el estado de las vías?

  3. Mil gracias por toda la información que das en el artículo, la verdad es que cuesta localizar este género de información por Internet. Proseguiré de cerca tu weblog porque me interesan mucho todos los artículos. Un saludo y gracias nuevamente!

  4. Hola David, tengo un problema en la pagina de mi cliente, estuvo jugando con wordpress y cambio la ubicación del mapa de google, he intentado todas las cosas y no veo donde lo pueda poner correcto otra vez, no hay plugin ni códigos.
    Ayúdame! Mil gracias

    1. Buenos días, Laura. Si añadiste un iframe, lo que puedes hacer es ir a Google Maps, buscar la ubicación que quieres y le das al botón de Compartir. Ahí Google te da la opción de Insertar un mapa y copiar el iframe que te dan.

    1. Recomiendo usar el método JavaScript si se quiere un control total sobre la apariencia final de los mapas y se tienen ciertos conocimientos de programación. Para la mayoría de usuarios, un plugin es la mejor solución dada su sencillez.

      En cuanto al tema de que la API es ahora de pago, la verdad es que no había leído nada al respecto. Nosotros usamos el mapa, por ejemplo, en nuestra página de contacto y no recuerdo haber recibido ninguna notificación especial. Pero estaré atento al tema. Imagino que para pequeños usos como este seguirá siendo gratis, pero que a poco que quieras montar algo que use los mapas de forma más o menos intensiva, te cobrarán por ello.

      Un saludo,
      David

Deja un comentario

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

He leído y acepto la Política de privacidad de Nelio Software.

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.