Guía Completa: Cómo Incrustar Google Maps en WordPress
Publicado: 2017-10-16Contenido
- 1 Cómo incrustar una sola ubicación de Google Maps en WordPress
- 2 Cómo incrustar Google Maps con múltiples marcadores de ubicación en WordPress
- 3 complementos de WordPress para ayudarlo a trabajar con Google Maps aún más
- 3.1 WP Google Maps
- 3.2 Creador de mapas
- 3.3 Localizador de tiendas WP
- 3.4 Utilice el módulo de mapas de Google de su creador de páginas favorito
- 4 Un ajuste divertido para usuarios avanzados
- 5 Envolviendo las cosas
- 5.1 Publicaciones relacionadas
Cómo incrustar una sola ubicación de Google Maps en WordPress
Comencemos con la forma más básica de mostrar una ubicación de Google Maps en su sitio de WordPress. Si solo desea incrustar un mapa con una sola ubicación o vista, no necesita herramientas ni complementos sofisticados; todo lo que necesita es pegar el código de incrustación de Google Maps en su sitio de WordPress .
Así es como funciona todo:
Vaya al sitio web de Google Maps como de costumbre y busque la ubicación que desea incrustar. Puedes buscar cualquier cosa. Es decir:
- todo un pais
- Una ciudad específica
- un negocio especifico
- Tu dilo
¡Realmente no importa!
Una vez que tenga la ubicación que desea mostrar en su mapa, busque el botón Compartir en la barra lateral izquierda:
Debería ver aparecer una pequeña ventana emergente. Haga clic en la opción Insertar mapa en esa ventana emergente:
Luego, elija el tamaño deseado en el menú desplegable. Y una vez que haya seleccionado el tamaño que desea, copie el código en el cuadro:
Ahora, diríjase a la publicación o página de WordPress donde desea incrustar el cuadro de Google Maps.
En el Editor de WordPress, cambie a la pestaña Texto y pegue el código que copió de Google Maps en el lugar donde desea que aparezca su mapa:
Ahora, publique su publicación como de costumbre y debería ver su cuadro de Google Maps en el front-end de su sitio de WordPress:
Bastante fácil, ¿verdad?
También puede usar un método similar para incrustar direcciones de Google Maps en WordPress. La única diferencia es la interfaz de inicio. En lugar de ver el botón Compartir de inmediato, deberá hacer clic en el ícono de la hamburguesa y elegir la opción Compartir o incrustar mapa :
Cómo incrustar Google Maps con múltiples marcadores de ubicación en WordPress
Si desea incrustar un cuadro de Google Maps con múltiples marcadores de ubicación en WordPress, las cosas son un poco diferentes.
Si bien le mostraré dos complementos de WordPress de Google Maps para ayudarlo a lograr esto en la siguiente sección, en realidad no necesita un complemento para hacerlo .
En su lugar, puede crear su propio mapa usando Google My Maps y luego incrustar ese mapa en WordPress usando un método similar al descrito anteriormente.
Para comenzar, diríjase a Google My Maps y haga clic en Comenzar para iniciar la interfaz. En la interfaz, haga clic en la opción Crear un nuevo mapa :
Luego, use la interfaz para construir su mapa. Puede ser un poco complicado comenzar, pero una vez que dominas las cosas, es bastante fácil de usar. Puede buscar cosas usando el cuadro de búsqueda y puede agregar marcadores en el mapa usando el botón Marcador :
Una vez que esté satisfecho con su mapa, haga clic en el icono de tres puntos en la parte superior y seleccione Incrustar en mi sitio .
Luego, al igual que antes, puede pegar el código que le proporciona Google Maps en la pestaña Texto del Editor de WordPress para mostrar el mapa en su sitio de WordPress.
Complementos de WordPress para ayudarlo a trabajar con Google Maps aún más
Si bien realmente no necesita un complemento para manejar la incrustación básica de Google Maps como le mostré anteriormente, los complementos pueden ser útiles si desea más flexibilidad (o si desea una forma más fácil de implementar esa flexibilidad).
La mayoría de los complementos realmente no hacen nada que no puedas hacer por ti mismo con suficiente esfuerzo, pero lo hacen mucho más fácil y más fácil de usar. Aquí hay algunos complementos interesantes para ayudarlo a trabajar mejor con Google Maps.

WP Google Maps
WP Google Maps es el complemento gratuito de Google Maps más popular en el directorio de complementos de WordPress.org.
Le ayuda a crear sus propias visualizaciones personalizadas de Google Maps utilizando los marcadores de mapa que elija y diferentes temas de mapa. Básicamente, es una implementación más fácil de usar del proceso que acabo de describir anteriormente.
El único inconveniente es que la versión gratuita solo te permite crear un único mapa. Si necesita varios mapas, deberá comprar la versión premium o usar una solución diferente.
Para comenzar, instale y active WP Google Maps. Debido a que aparece en WordPress.org, puede hacerlo directamente desde su panel de control de WordPress.
Una vez que lo active, vaya a la nueva opción Mapas en su barra lateral para comenzar.
Sin embargo, antes de que pueda crear su primer mapa, deberá obtener una clave API de JavaScript de Google Maps e ingresarla en la configuración del complemento. Puedes hacerlo siguiendo estas instrucciones:
Una vez que ingrese su clave API, puede editar Mi primer mapa predeterminado ( recuerde: la versión gratuita de este complemento solo le permite crear un mapa ):
Utilice la interfaz para construir su mapa. Luego, cuando haya terminado, puede insertarlo en cualquier parte de su sitio usando el código abreviado:
Es súper fácil y flexible: el único inconveniente es la limitación de un mapa en la versión gratuita.
Creador de mapas
Otra buena opción para crear incrustaciones de Google Maps con un complemento de WordPress es Maps Builder.
Una vez que instale y active el complemento, obtendrá una nueva pestaña de Google Maps en la barra lateral de su tablero. Al igual que con WP Google Maps, deberá agregar una clave API de Google Maps antes de poder comenzar con el complemento.
Una vez que haga eso, puede ir a Google Maps → Agregar nuevo para crear un nuevo mapa. En esa interfaz, haga clic en el botón Abrir Map Builder para iniciar la interfaz fácil de usar:
Allí, puede construir su mapa usando la barra lateral del complemento:
Una vez que haya terminado, puede usar el código abreviado creado por el complemento para incrustar el mapa en cualquier lugar de su sitio de WordPress.
Localizador de tiendas WP
Si desea usar Google Maps específicamente para mostrar varias ubicaciones de tiendas en su sitio de WordPress ( ¡un deseo común! ), Es mejor que use un complemento de localización de tiendas dedicado.
Si bien puede encontrar varios complementos para hacer esto, me gusta WP Store Locator porque es flexible y se ve muy bien.
Utilice el módulo de mapas de Google de su creador de páginas favorito
La mayoría de los creadores de páginas de WordPress incluyen un elemento/módulo dedicado de Google Maps para ayudarlo a incrustar contenido de Google Maps en sus diseños.
Por ejemplo, el popular complemento Divi Builder incluye un módulo de Google Maps que puede personalizar bastante a través de la interfaz del complemento:
Entonces, si ya está utilizando un creador de páginas, verifique si su creador de páginas tiene una herramienta de Google Maps antes de salir corriendo para encontrar un complemento de Google Maps dedicado,
Un ajuste divertido para usuarios avanzados
Este método es avanzado y requiere conocimientos de código, por lo que si es un principiante, no dude en ignorarlo.
Pero si conoce WordPress y los campos personalizados, puede usar un campo personalizado para crear automáticamente un mapa basado en el esquema de URL de mapa de Google Maps.
Por ejemplo, puede crear un campo en el backend de WordPress donde un usuario solo necesita pegar la dirección en una ubicación.
Luego, con un poco de procesamiento previo para eliminar espacios, puede insertar esa dirección en algo como a continuación en un iframe en los archivos de plantilla de su tema:
¡Y voilá! Todo lo que un usuario debe hacer es ingresar una dirección en el Editor de WordPress y una inserción de Google Maps aparecerá automáticamente en el front-end para esa ubicación.
Nuevamente, este método definitivamente requiere un conocimiento básico de PHP y campos personalizados, pero es un truco genial para ahorrar algo de tiempo.
Envolviendo las cosas
Ya sea que solo quiera hacer algo básico como incrustar una ubicación regular de Google Maps en WordPress o avanzar más con múltiples marcadores de mapas o la creación automática de mapas, tiene muchas opciones.
Para incrustar mapas individuales, probablemente pueda omitir los complementos y simplemente usar el código de incrustación normal de Google Maps. Pero si desea crear mapas con varias ubicaciones y controlar fácilmente el estilo, los dos complementos de Google Maps son buenas opciones.
Y finalmente, si está utilizando un creador de páginas, definitivamente debe verificar si ya tiene un elemento de Google Maps antes de recurrir a una solución externa.