¿Qué más ha cambiado? Nada, pero ahora tendrás que hacer lo siguiente si quieres usar Google Maps en WordPress:

1. Regístrate en una cuenta de la Consola de Google Cloud Platform y configúrala.
2. Agrega tu información de facturación, aunque es posible que nunca te facturen.
3. Añade la clave de API a tu código de incrustación de Google Maps o a la configuración de tu plugin.

Cómo obtener una clave de API de Google Maps

A continuación se detallan los pasos para obtener tu clave de API de Google Maps.

Paso 1

Ve a la consola de Google Cloud Platform. Si aún no tienes una cuenta, crea una, es gratis.

Paso 2

Selecciona o crea un proyecto.

Paso 3

Configura tu cuenta de facturación. Aunque te pedirán que pongas una tarjeta de crédito en el archivo, nunca deberían cobrarte, a menos que te pases de los límites de uso altos.

Paso 4

Te pedirán que elijas uno o más productos. Esto depende del tipo de mapa que estés utilizando. Por ejemplo, si estás incrustando un mapa en tu sitio de WordPress sin un plugin (como se muestra en los pasos más abajo), entonces elegirías el Google Maps Embed API.



Google Maps Embed API

Si estás usando un plugin como Google Maps Widget (como se muestra en los pasos más abajo), entonces elegirías la Google Maps Static API.

Si estás utilizando un plugin o tema de terceros, deberían tener documentación sobre qué tipo de implementación de Google Maps están utilizando. No te preocupes, siempre puedes añadir varios tipos y cambiarlos más adelante.

Paso 5

Haz clic en «Habilitar.»



Habilitar la API de Google Maps

Paso 6

Haz clic en «APIs» y luego en «Credenciales», verás tu clave de API.



Clave de la API de Google Maps

Paso 7

Si simplemente estás incrustando tu clave de la API de Google Maps se mostrará en texto plano en tu código fuente. Por lo tanto, debes restringir esto, de lo contrario, la gente podría usar tu clave de API en su sitio o proyectos de WordPress y acumular tu uso.

Para hacer esto, simplemente haz clic en el nombre de tu clave de API y te permitirá añadir una restricción. Para su sitio de WordPress, simplemente añadiendo una referencia HTTP debería ser suficiente. Por ejemplo, https://yourdomain.com/*. Esto permitirá que sólo haga llamadas en su sitio web.


Restricción de la clave de la API de Google Maps
Cómo añadir Google Maps en WordPress sin un plugin
Si sólo quieres incrustar un mapa simple y no necesitas una funcionalidad más detallada como marcadores de ubicación personalizados u otras anotaciones, puedes incrustar Google Maps sin un plugin utilizando el sitio web normal de Google Maps que utilizas a diario.
Así es como funciona…
Paso 1: Copiar el código de incrustación de Google Maps
Para empezar, utiliza el sitio web de Google Maps para crear el mapa que quieres incrustar.
Por ejemplo, si quieres incrustar un marcador de lugar, abre ese lugar en Google Maps. O, si quieres incrustar direcciones, abre las direcciones en Google Maps.
Una vez que tengas el mapa que quieres incrustar, haz clic en el menú hamburguesa de la esquina superior izquierda:

Cómo acceder al código de incrustación
En la lista de elementos del menú, selecciona la opción de Compartir o incrustar mapa:

Abrir las opciones de incrustación
Eso abrirá una ventana emergente de Compartir. En esa ventana emergente, haz clic en la pestaña Incrustar un mapa.
A continuación, puedes elegir el tamaño que desees utilizando el desplegable. Para la mayoría de los sitios de WordPress, el tamaño por defecto funciona bien, pero puedes hacer el mapa más grande o más pequeño si es necesario.
Una vez hecho esto, haz clic en el botón Copiar HTML para copiar el código de incrustación:

El código de incrustación de Google Maps
A continuación, tendrás que añadir tu clave API en el código. Así que tu código debería ser algo así:
<iframe src="https://www.google.com/maps/embed/v1/search?key=YOUR_API_KEY&parameters allowfullscreen></iframe>
Paso 2: Añadir el código de incrustación de Google Maps al sitio de WordPress
Ahora, todo lo que tienes que hacer es añadir ese código de incrustación a tu sitio de WordPress en el post o página donde quieras incluir tu mapa.
Si utilizas el nuevo editor de bloques Gutenberg de WordPress que se lanzó con WordPress 5.0, puedes hacerlo añadiendo un bloque HTML personalizado y pegando el código de incrustación en el bloque. No olvides añadir tu clave API.

Cómo añadir el código de incrustación en el editor de bloques de WordPress
Puedes previsualizar el aspecto de tu mapa haciendo clic en el botón Vista previa situado encima del bloque.
Si sigues utilizando el editor clásico TinyMCE, puedes añadir el código de incrustación de Google Maps abriendo la pestaña Texto y pegando el código allí:

Cómo añadir el código de incrustación en el editor clásico de WordPress
Una vez añadido el código, puedes volver a la pestaña Visual para ver una vista previa en vivo de tu mapa.
¡Y eso es todo! Acabas de aprender cómo añadir Google Maps en WordPress sin un plugin.
Usa Google My Maps para incrustar mapas más complicados sin un plugin
Si quieres ser más creativo cuando se trata de cosas como múltiples marcadores de ubicación, anotaciones personalizadas, etc., todavía puedes hacerlo sin necesidad de un plugin con el servicio My Maps de Google.
My Maps es una herramienta oficial de Google que te permite crear y compartir tus propios mapas personalizados. Con ella, podrías crear algo como el siguiente ejemplo, con un montón de marcadores personalizados e información personalizada que se muestra cuando un usuario hace clic en un marcador:

Ejemplo de Google My Maps
Aquí tienes cómo usarlo para añadir mapas personalizados de Google a WordPress.
Suscríbete al boletín
Hemos aumentado nuestro tráfico un 1.187% con WordPress. Te mostramos cómo.
Únete a más de 20.000 personas que reciben nuestro boletín semanal con consejos sobre WordPress
Suscríbete ahora
Paso 1: Crea tu mapa en Google My Maps
Para empezar, dirígete a Google My Maps y crea un nuevo mapa. A partir de ahí, puedes utilizar la interfaz del constructor de mapas para crear tu mapa:

La interfaz de Google My Maps
Aunque no la trataremos con demasiado detalle, esta interfaz te permite crear algunos mapas bastante creativos. Para una mirada más profunda, este artículo de ayuda de Google cubre gran parte de la funcionalidad importante.
Paso 2: Generar código de incrustación
Una vez que hayas terminado de construir tu mapa, necesitas generar el código de incrustación.
Pero antes de que puedas obtener ese código, primero necesitas hacer tu mapa público. Para ello, haz clic en el botón Compartir. A continuación, haz clic en Cambiar… en la ventana emergente:

Configuración de uso compartido de Google My Maps
A continuación, selecciona Activado – Público en la web y haz clic en Guardar:

Activar el uso compartido de enlaces
Una vez hecho esto, haz clic en el menú desplegable junto al título de tu mapa y selecciona Incrustar en mi sitio para generar el código real de incrustación:

Acceder al código de incrustación de Mis Mapas
Eso abrirá una ventana emergente con el código, que debes copiar. No olvides añadir tu clave API.

El código de incrustación de Mis Mapas
Paso 3: Añadir el código de incrustación al sitio de WordPress
Ahora, puedes añadir ese código de incrustación a tu sitio de WordPress igual que lo harías con el código de incrustación que obtienes del sitio web normal de Google Maps.
Si no estás seguro de cómo hacerlo, haz clic aquí para saltar a esa sección del tutorial de arriba.
Utiliza un plugin de Google Maps para WordPress
Además de los métodos manuales anteriores, también hay un montón de plugins de Google Maps para WordPress que pueden ayudarte a incrustar mapas en tu sitio.
Hay algunas razones por las que podría considerar uno de estos plugins en lugar de los métodos manuales:
• Le permiten crear mapas más complicados con una interfaz sencilla.
• Puede hacerlo todo sin tener que salir de su panel de control de WordPress.
• Algunos de ellos se vinculan a WordPress. Por ejemplo, puedes enlazar marcadores de mapas a entradas de WordPress.
• Algunos de ellos pueden ayudarte a optimizar Google Maps para el rendimiento (más sobre esto más adelante).

Para todos estos plugins, necesitarás generar tu propia clave de API de Google Maps antes de que puedas empezar a incrustar mapas. Este tutorial le muestra cómo hacerlo.

¿Luchando con el tiempo de inactividad y los problemas de WordPress? ¡Kinsta es la solución de alojamiento diseñada para ahorrarte tiempo! Echa un vistazo a nuestras características
El Widget de Google Maps
El Widget de Google Maps es un sencillo plugin de Google Maps que te permite incrustar un mapa utilizando la API estática de Google Maps, que ofrece un enfoque más respetuoso con el rendimiento al incrustar una imagen estática en lugar de un mapa interactivo (explicaremos más sobre esto en la siguiente sección).
Es una gran opción si quieres algo sencillo y ligero. Una vez que lo actives, tendrás que coger tu clave de la API de Google Maps y conectarla en la configuración del plugin. Puedes añadir un mapa de Google a cualquier área de widgets de tu sitio. A continuación, los visitantes pueden abrir una versión interactiva más grande del mapa en un lightbox:

La interfaz del widget de Google Maps
También puedes utilizar un mapa interactivo de inmediato si lo deseas, y la versión Pro te permite incrustar mapas en cualquier lugar de tu sitio con un shortcode.
Google Maps Easy
Google Maps Easy te ayuda a crear mapas personalizados con tus propios marcadores y anotaciones.
Cuando añades marcadores, tienes la posibilidad de subir tus propios iconos personalizados, incluir texto e imágenes en la descripción del marcador, y mucho más. También puedes controlar el funcionamiento de tu mapa, como por ejemplo, elegir si quieres que los usuarios hagan zoom o no:

Interfaz de Google Maps Easy
Una vez que construyas tu mapa, puedes incrustarlo utilizando un shortcode o una función PHP.
Intergeo
Intergeo es otra opción popular que te permite crear tus propios mapas con marcadores personalizados y tener control sobre la funcionalidad del mapa.
Una vez que instales y actives el plugin, podrás construir tus mapas directamente desde tu panel de WordPress:

Interfaz de Intergeo
Luego, puedes incrustarlos en cualquier parte de tu sitio usando un shortcode.
Bloque Gutenberg para incrustar Google Maps
Bloque Gutenberg para incrustar Google Maps es un sencillo plugin que añade un bloque dedicado a Google Maps al nuevo editor de bloques de WordPress Gutenberg.
Con este bloque, puedes incrustar cualquier dirección y también elegir:
• Dimensiones
• Nivel de zoom
• Mapa interactivo vs mapa estático (de nuevo, este último método ayuda al rendimiento)

No te permitirá crear tus propios mapas personalizados – pero es una opción conveniente si utilizas el nuevo editor de bloques y sólo quieres una manera fácil de incluir algunos mapas simples.

Google Maps puede ralentizar su sitio de WordPress – No lo permita

Aunque Google Maps le permite incrustar una tonelada de funcionalidad fresca a su sitio con sus mapas interactivos, hay una compensación de rendimiento porque necesita cargar un gran número de scripts para alimentar toda esa funcionalidad interactiva.

En resumen, incrustar mapas interactivos de Google puede ralentizar su sitio.

Hay algunas maneras de combatir esto.

En primer lugar, si no necesita que la gente pueda navegar de forma interactiva por su mapa en su sitio web, una forma sencilla de acelerar las cosas sin ninguna herramienta de terceros es:

• Tomar una captura de pantalla del mapa para usarla en su sitio
• Enlazar esa captura de pantalla al mapa en el sitio web de Google Maps, o abrir una ventana emergente lightbox con el mapa interactivo cuando un usuario haga clic.

De esta manera, su sitio sólo está cargando una imagen normal – no todos los scripts asociados a Google Maps.

Como alternativa a hacer esto manualmente, también puede utilizar el plugin gratuito AWEOS Google Maps iframe load per click. Este plugin reemplaza automáticamente las incrustaciones de Google Maps con una imagen genérica de marcador de posición. A continuación, si un usuario hace clic en el botón Cargar mapa, se cargará la incrustación completa de Google Maps:


Imagen de marcador de posición de Google Maps
O también puedes utilizar la API estática de Google Maps, que devuelve una imagen normal sin necesidad de JavaScript. Algunos plugins de Google Maps -incluyendo Google Maps Widget y Gutenberg Block For Google Maps Embed- te permiten utilizar la API estática cuando creas tus mapas.
Sin embargo, nos damos cuenta de que a veces este enfoque estático no es suficiente, y mucha gente quiere incrustar la experiencia interactiva de Google Maps de inmediato.
Si ese es el caso, otra buena manera de acelerar Google Maps es utilizar lazy loading. Con la carga lenta, su sitio esperará a cargar cualquier incrustación de Google Maps por debajo de la página hasta que los visitantes comiencen a desplazarse hacia abajo. Esto mantiene los tiempos de carga iniciales de su página rápidos, mientras que todavía le permite incrustar contenido interactivo de Google Maps.
Ya hemos escrito sobre cómo cargar imágenes y vídeos de forma perezosa y es la misma idea para Google Maps.
Hay algunos plugins que le permitirán hacer esto. Por ejemplo, el plugin a3 Lazy Load te permite hacer lazy load de incrustaciones de iframe, que incluye Google Maps:

Lazy load Google Maps
Otras opciones son:
• BJ Lazy Load
• Lazy Load by WP Rocket
• Easy Lazy Loader
Resumen
Si sólo quieres incrustar un simple mapa en tu sitio, puedes añadir Google Maps a WordPress sin necesidad de un plugin utilizando la función de código incrustado integrada. O bien, puedes utilizar la herramienta Google My Maps para crear tu propio mapa personalizado e incrustarlo.
Además de estos métodos manuales, también hay un montón de plugins de Google Maps para WordPress que pueden darte mucho control sin hacerte salir de tu panel de control de WordPress.
Independientemente del método que elijas, presta atención al impacto en el rendimiento del uso de Google Maps. Intenta utilizar Google Maps sólo cuando sea absolutamente necesario y considera tácticas como las imágenes de marcador de posición o lazy loading para disminuir el efecto negativo en el rendimiento.
¿Tienes alguna otra pregunta sobre el uso de Google Maps en WordPress? Háznoslo saber en los comentarios!
Si te ha gustado este artículo, entonces te encantará la plataforma de alojamiento de WordPress de Kinsta. Acelera tu sitio web y obtén soporte 24/7 de nuestro veterano equipo de WordPress. Nuestra infraestructura impulsada por Google Cloud se centra en el autoescalado, el rendimiento y la seguridad. ¡Permítanos mostrarle la diferencia de Kinsta! Vea nuestros planes