¿Está buscando una forma para integrar Google Maps para WordPress en su sitio?
Como con muchas cosas en WordPress, hay muchas maneras diferentes para integrar Google Maps en su sitio dependiendo del tipo de contenido de mapa que quiera incluir.
En este artículo, le mostraremos cómo agregar Google maps en WordPress sin tener que usar un plugin. Luego, le recomendaremos algunos plugins que le podrán ayudar a integrar Google Maps, al igual que otros beneficios al hacerlo de esta forma. También hablaremos sobre cómo utilizar el API de Google Maps de la forma apropiada, el cual es requerido ahora.
Al final, tocaremos el tema de las consideraciones de desempeño al usar Google Maps en WordPress y compartiremos algunos tips sobre cómo lograr que su sitio de WordPress cargue rápido si usted necesita integrar Google Maps.
Puede dar clic en las opciones de abajo para ir a una sección en específica o leer todo el artículo.
- El API de Google Maps es ahora requerido
- Cómo agregar Google Maps en WordPress sin un plugin
- Plugins de Google Maps para WordPress que le darán más flexibilidad
- El efecto del desempeño de Google Maps y tips para mejorar su desempeño
El API de Google Maps es ahora Requerido
A partir de del 11 de junio del 2018, una llave API es ahora requerida para Google Maps si ya ha implementado Google Maps en su sitio y ya no funciona, esta podría ser la razón. O más bien, a usted le falta el API key. Las buenas noticias, para el 99% de ustedes, aún debería ser gratuito. Abajo podrá encontrar el precio del API de Google Maps.
Google también le dará un crédito recurrente de $200 en su cuenta cada mes para compensar sus gastos de uso. Así que, como puedo ver, al menos que usted esté generado miles de peticiones, usar Google Maps en su sitio no le debería costar.
¿Qué más ha cambiado? Nada, pero usted ahora tendrá que hacer el seguimiento si quiere utilizar Google Maps en WordPress:
- Inscríbase a una cuenta de Google Cloud Platform Console y configúrelo
- Agregue su información de facturación a pesar de que es probable que jamás les cobren.
- Agregue el API key a su código integrado de Google Maps u opciones del plugin.
Cómo Obtener un API key de Google Maps
Abajo podrá encontrar los pasos sobre cómo podrá conseguir un API key de Google Maps
Paso 1
Vaya a Google Cloud Platform Console. Si aún no tiene una cuenta, cree una, es gratuita.
Paso 2
Seleccione o cree un proyecto
Paso 3
Establezca su cuenta de facturación. A pesar de que necesita poner una tarjeta de crédito en los archivos, jamás le cobrarán, al menos que rebase los límites de uso.
Paso 4
Se le pedirá elegir uno o más productos. Esto depende del tipo de mapa que estará usando. Por ejemplo, si está integrando un mapa en su sitio de WordPress sin un plugin (como se muestra en los pasos siguientes), entonces tendrá que elegir el API Integrado de Google Maps.
Si está usando un plugin como Google Maps Widget (como se muestra en los pasos siguientes), luego usted tendría que elegir un API Estático de Google Maps.
Si está usando un plugin o un tema, deberían tener una documentación sobre el tipo de despliegue que están usando. No se preocupe, siempre podrá agregar varios tipos y cambiarlos en otro momento.
Paso 5
Dar clic en “Habilitar.”
Paso 6
De clic en “APIs” y luego bajo “Credenciales”, usted verá su API key.
Paso 7
Si simplemente está integrando su API key de Google Maps este aparecerá en forma de texto en su código fuente. Por lo tanto, usted debería restringir esto, si no es así, la gente podría usar su API key en su sitio de WordPress o proyectos que irían acumulándose a su uso.
Para hacer esto, simplemente dé clic en el nombre de su API key y le permitirá agregar una restricción. Para su sitio de WordPress, simplemente añadiendo un referente de HTTP debería ser suficiente. Como con https://yourdomain.com/*. Esto le permitirá sólo hacer llamadas en su sitio web.
Cómo Agregar Google Maps en WordPress sin un Plugin
Si sólo quiere integrar un simple mapa y no necesita una funcionalidad más detallada como marcadores personalizados de ubicación u otras anotaciones, usted puede integrar Google Maps sin un plugin usando el sitio común de Google Maps que utiliza a diario.
Así es como funciona…
Paso 1: Copie el Código de Integración de Google Maps
Para empezar, utilice el sitio de Google Maps para crear el mapa que usted quiera integrar.
Por ejemplo, si quiere integrar un marcador de ubicación, abra el lugar en Google Maps. O, si prefiere integrar direcciones, abra las direcciones en Google Maps.
Una vez que tenga el mapa que quiera integrar, dé clic en el menú de hamburguesa en la esquina superior izquierda.
En la lista de artículos del menú, seleccione la opción de Compartir o integrar mapa:
Esto abrirá un popup para Compartir. En ese popup, de clic en la pestaña de Integrar mapa.
Luego, usted podrá elegir el tamaño deseado utilizando el drop-down. Para la mayoría de los sitios de WordPress, el tamaño estándar funcionará bien, pero usted puede hacer el mapa más grande o más pequeño si es necesario.
Una vez que haya terminado, de clic en el botón de Copiar HTML para copiar el código de integración.
Luego tendrá que agregar el API key dentro del código. Para que su código se vea así:
YOUR_API_KEY¶meters allowfullscreen>
Paso 2: Agregar el Código de Integración de Google Maps al Sitio de WordPress
Ahora, lo único que le queda por hacer es agregar el código de integración a su sitio de WordPress en el artículo o página en la que quiere incluir su mapa.
Si está utilizando el nuevo editor Gutenberg de WordPress que fue lanzado con WordPress 5.0, usted puede hacer eso al agregar un bloque Personalizado de HTML y pegar el código de integración dentro del bloque. No se olvide de agregar su API key.
Podrá tener una vista previa de cómo lucirá su mapa dando clic en el botón de Vista Previa sobre el bloque.
Si aún está usando el editor clásico de TinyMCE, usted puede agregar el código integrado de Google Maps al abrir la pestaña de Texto y pegar el código ahí:
Una vez que haya agregado el código, puede regresar a la pestaña de Visual para ver una vista previa en vivo de su mapa.
¡Eso es todo! Acaba de aprender cómo agregar Google Maps en WordPress sin un plugin.
Utilizar Google My Maps para Integrar Mapas Más Complicados Sin un Plugin
Si quiere ponerse un poco más creativo cuando se trata de cosas como marcadores de ubicación múltiples, anotaciones personalizadas, etc., aún podrá hacer eso sin la necesidad de un plugin con el servicio de My Maps de Google.
My Maps es una herramienta oficial de Google que le permite crear y compartir sus propios mapas personalizados. Con esto, usted podría crear algo como el ejemplo de abajo, con muchos marcadores personalizados e información personalizada que muestra cuando un usuario da clic en un marcador.
Así es como se usa para agregar Google Maps personalizados a WordPress
Paso 1: Crear Su Mapa en My Maps de Google
Para empezar, vaya a My Maps de Google y cree un nuevo mapa. Desde ahí, usted puede utilizar la interfaz del constructor de mapas para construir su mapa.
Mientras que no cubriremos esto a detalle, esta interfaz le permite construir algunos mapas muy creativos. Para poder ver esto más a detalle, este artículo de Google cubre muchas de las funcionalidades más importantes.
Paso 2: Genere el Código de Integración
Una vez que haya terminado de construir su mapa, usted necesita generar el código de integración.
Antes de poder conseguir el código, usted primero debe hacer público su mapa. Para hacer esto, dé clic en el botón de Compartir. Luego, dé clic en Cambiar… que sale en el popup.
Luego, seleccione ON – Público en la red y dé clic en Guardar:
Una vez que haya hecho eso, dé clic en el menú desplegable cerca del título de su mapa y seleccione Integrar a mi sitio para generar el código de integración:
Esto abrirá un popup con el código, el cual debería copiar. No se olvide de agregar el API key.
Paso 3: Agregue el Código de Integración al Sitio de WordPress
Ahora, usted puede agregar el código de integración a su sitio de WordPress como lo haría con cualquier otro código de integración que obtendría del sitio regular de Google Maps.
Si no está seguro de cómo hacer esto, dé clic aquí para ir a la sección de tutorial de arriba.
Utilice un Plugin de Google Maps de WordPress
Más allá de los métodos anteriores, también hay muchos plugins de Google Maps de WordPress que le podrán ayudar a integrar los mapas en su sitio.
Hay algunas razones por las que podría considerar utilizar estos plugins en lugar de los métodos manuales:
- Estos le permiten crear mapas más complicados con una interfaz simple.
- Puede hacer todo sin tener que salir del dashboard de WordPress.
- Algunos de estos se enlazan a WordPress. Por ejemplo, podría enlazar marcadores de mapa a publicaciones de WordPress.
- Algunos de estos podrían ser de utilidad para optimizar Google Maps para desempeño (más de esto más adelante)
Para todos estos plugins, usted necesitará generar su propio API Key de Google Maps antes de que puede empezar a integrar mapas. Este tutorial muestra como se puede hacer esto.
Widget de Google Maps
El Widget de Google Maps es un simple plugin de Google Maps que le permite integrar un mapa utilizando el API Estático de Google Maps, el cual ofrece un enfoque más enfocado en el desempeño al integrar una imagen estática en lugar de un mapa interactivo (explicaremos más de esto en nuestra siguiente sección).
Es una buena opción si prefiere algo simple y liviano. Una vez que lo active, usted necesitará agarrar su API Key de Google Maps y ponerlo dentro de las opciones del plugin. Puede agregar un Google Maps a cualquier área de widget en su sitio. Luego, los visitantes podrán abrir una versión más grande e interactiva del mapa en un lightbox:
También puede utilizar un mapa interactivo de inmediato si así lo desea, y la versión Pro le permite integrar mapas en cualquier parte de su sitio usando un shortcode.
Google Maps Easy
Google Maps Easy le ayuda a crear mapas personalizados con sus propios marcadores y anotaciones.
Cuando usted agrega marcadores, usted tendrá la habilidad de poder subir sus propios iconos personalizados, incluir texto e imágenes en la descripción de marcador, y mucho más. También podrá controlar como funciona su mapa, como el elegir si quiere o no permitir que sus usuarios pueden zoom al mapa:
Una vez que haya construido su mapa, usted puede integrarlo usando un shortcode o una función PHP.
Intergeo
Intergeo es otra opción popular que le permite crear mapas sin marcadores personalizados y tener control sobre la funcionalidad del mapa.
Una vez que haya instalado y activado el plugin, usted podrá construir sus mapas desde su dashboard de WordPress.
Luego, podrá integrarlos en cualquier parte de su sitio usando un shortcode.
Gutenberg Block For Google Maps Embed
Gutenberg Block for Google Maps Embed es un plugin simple que agrega un bloque dedicado de Google Maps a un nuevo editor de bloque de Gutenberg de WordPress.
Con este bloque, usted puede integrar cualquier dirección y elegir:
- Dimensiones
- Nivel de Acercamiento o zoom
- Mapa interactivo vs mapa estático (de nuevo, el último método ayuda con el desempeño)
No le permitirá crear sus propios mapas – pero es una opción conveniente si usted utiliza el nuevo editor de bloque y sólo quiere una forma fácil para incluir mapas simples.
Google Maps Podría Hacer que Su Sitio de WordPress Quede Lento – No Permita Esto
Mientras que Google Maps le permite integrar un montón de funcionalidades geniales a su sitio con sus mapas interactivos, hay un intercambio de desempeño por hacer esto, ya que necesita cargar un gran número de scripts para poder lograr ofrecer toda esta funcionalidad.
Para no hacerle larga esta historia, integrar Mapas interactivos de Google podría hacer que su sitio esté lento.
Hay algunos métodos para combatir esto.
Primero, si no necesita que la gente interactúe con el mapa en su sitio, una forma sencilla para acelerar las cosas sin herramientas externas es:
- Tome una foto del mapa que piensa usar en su sitio
- Ponga esa imagen del mapa en el sitio de Google Maps, o abra un lightbox popup con el mapa interactivo cuando un usuario da clic.
De esa forma, su sitio sólo estará cargando una imagen regular – y no todos los scripts asociados con Google Maps.
Una alternativa en lugar de hacer esto manualmente, es utilizando el plugin gratuito de AWEOS Google Maps iframe load per click. Este plugin automáticamente reemplaza el Google Maps integrado con una imagen de repuesto genérica. Luego, si un usuario da clic en el botón de Cargar mapa, este cargará el Google Maps integrado.
O también puede utilizar el API Estático de Google Maps, el cual muestra una imagen regular sin un JavaScript. Algunos plugins de Google Maps – incluyendo Google Maps Widget y Gutenberg Block For Google Maps Embed – le permiten usar API estático cuando cree sus mapas.
Sin embargo, nos damos cuenta que en algunas ocasiones este enfoque estático simplemente no es suficiente, y mucha gente prefiere integrar la experiencia interactiva de Google Maps.
En ese caso, otra gran forma para acelerar Google maps es utilizando lazy loading. Con lazy loading, su sitio esperará a cargar cualquier mapa de Google Maps integrado que tenga hasta que los visitantes lleguen a esa parte de la página. Esto mantendrá rápida su carga inicial, y al mismo tiempo permite usar contenido interactivo de Google Maps.
Ya hemos escritor sobre como hacer lazy loading a imágenes y videos y es lo mismo para Google Maps.
Hay algunos plugins que le permitirán hacer esto. Por ejemplo, el plugin de a3 Lazy Load le permite hacer lazy load a integraciones de iframe, el cual incluye a Google Maps:
Otras opciones:
Resumen
Si sólo quiere integrar un simple mapa en su sitio, usted puede agregar Google Maps a WordPress sin tener que usa run plugin, utilizando la opción de código de integración. O, usted podría utilizar la herramienta de My Maps de Google para crear su propio mapa personalizado e integrar eso.
Más allá de los métodos manuales, también hay muchos plugins de Google Maps para WordPress que le pueden dar mucho control sin tener que salirse del dashboard de WordPress.
No importa que método utilice, ponga atención del impacto al desempeño por usar Google Maps. Sólo utilice Google Maps solo cuando ea absolutamente necesario y considere tácticas, como una imagen de repuesto o lazy loading para reducir los efectos negativos en el desempeño.
¿Tiene alguna otra pregunta sobre como utilizar Google Maps en WordPress? ¡Comparta en los comentarios!
Brian tiene una gran pasión por WordPress, lo ha estado utilizando durante más de 10 años e incluso ha desarrollado un par de plugins premium. Brian disfruta de los blogs, las películas y el senderismo. Conéctese con Brian en Twitter.
Deja una respuesta