La Tierra (NASA)

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

28 respuestas a «Cómo añadir mapas de Google Maps en WordPress»

  1. […] Cómo añadir mapas de Google Maps en WordPress Seguramente en algún momento te hayas visto en la necesidad de incluir un mapa en tu web. Desde Nelio nos explican todas las opciones para hacerlo y aprender en profundidad sobre el tema. […]

  2. Avatar de José Manuel Moreno

    Muy útil las opciones de personalización de Snazzy Maps 🙂
    Tienen plugin gratuíto de WordPress también, aunque no lo he probado supongo que tendrán algún estilo para aplicar en su versión gratis.

    1. Avatar de David Aguilera

      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

  3. Avatar de adolfo

    Muchas gracias amigo excelente post, ahora mismo lo aplicare en mi blog, saludos desde Peru.

  4. Avatar de rafael montalvo
    rafael montalvo

    Buenas. Alguien sabrá como hacer que el mapa muestre los lugares cercanos con logo (Restuarantes, Estación(Paradero), etc.) Y que de la opción para escoger y muestre los luagres, es decir como este enlace (Se ve abajo el mapa)

    http://www.senda.pe/met/

    1. Avatar de David Aguilera

      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

    2. Avatar de Luis
      Luis

      Esta muy bien. En mi web insertar los mapas de mymaps pero luego los usuarios cuando acceden tienen que iniciar sesión y ajn y todo no les geolocaliza en el movil
      No se que hacer
      Ejemplo
      https://guiailustradadenavarra.com/piskerra-bardena-blanca/

      1. Avatar de David Aguilera

        Es extraño; a mí me deja ver perfectamente bien el mapa. En cuanto a la geolocalización, es normal, ¿no? El mapa muestra una ubicación «estática», no la ubicación del usuario en ese momento. Y aún pudiendo, para ello deberían dar permisos a la página web para que esta usara el GPS del móvil… No sé si acabo de entender tu problema, Luis.

  5. Avatar de Tramor
    Tramor

    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

    1. Avatar de David Aguilera

      Pues no sé qué puede ser. ¿Has seguido las instrucciones de la entrada, paso a paso?

  6. Avatar de felipe salazar
    felipe salazar

    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?

    1. Avatar de David Aguilera

      Hola Felipe,

      No, por desgracia no conozco ningún plugin que permita hacerlo. De todas formas, imagino que usando los mapas de Google a través de su API JavaScript es posible hacerlo: https://developers.google.com/maps/documentation/javascript/directions?hl=es-419

      Un saludo,
      David

  7. Avatar de Natalia Silliman
    Natalia Silliman

    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!

  8. Avatar de Laura

    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. Avatar de David Aguilera

      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.

  9. Avatar de Jorge

    Quiero que desde el texto dureccion, ciudad, código postal dado por el utilizado crear un mapa

    1. Avatar de David Aguilera

      Hola Jorge,

      Me temo que no entiendo cuál es tu problema. ¿Puedes explicarnos un poco mejor?

  10. Avatar de Manuel
    Manuel

    Hola, buenas tardes,

    Muy interesante el artículo. ¿Podrías explicar bajo que circunstancia usar uno u otro método? y mas ahora que no es gratis, sí haces un tipo de uso.

    https://vextramedia.com/google-maps-api-pasa-a-ser-de-pago/
    https://smythsys.es/10117/cambios-en-la-api-de-google-maps-hay-que-dar-la-tarjeta-y-nos-pueden-cobrar-a-los-desarrolladores/

    1. Avatar de David Aguilera

      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

  11. Avatar de Miss Gastroideas

    Muchas gracias!!! Me ha sido súper útil!!!

  12. Avatar de Nicolás
    Nicolás

    Hola,

    Oye sabes si se puede agregar un link en el texto del marcador, es decir que el nombre del lugar sea un hypervinculo que al presionar me abra en otra pantalla la página web del lugar.

    Saludos.

    1. Avatar de David Aguilera

      Hola Nicolás,

      La verdad es que con los plugins no te sé decir, pero con la API JavaScript sí se puede. En la propia documentación te explican cómo (ejemplo incluido).

      Un saludo,
      David

  13. Avatar de Asun Pérez
    Asun Pérez

    Hola, muchas gracias por la información 🙂
    Conseguí poner el mapa en mi página de wordpress y lo que necesito saber ahora es como redirigir a la aplicación de google maps esa localización.
    Muchas gracias !!

    1. Avatar de David Aguilera

      Creo que simplemente poniendo un enlace a maps.google.com con el marcador que te interesa ya hace que se abra la app en el móvil.

  14. Avatar de Alicia
    Alicia

    Me quedo con la opción de copiar directamente desde Maps, ¡es mucho más sencilla!

    ¡Gracias!

Deja una respuesta

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

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.