¿Desea agregar el localizador de tiendas de Google Maps a WordPress? Un localizador de tiendas es un mapa que apunta a la ubicación de su negocio.
Permite a los usuarios encontrarlo en el mapa, encontrar indicaciones de manejo o compartir la ubicación con amigos. Agregar un localizador de tiendas al sitio web de su empresa o incluso una tienda en línea lo ayuda a ganar instantáneamente la confianza del usuario.
En este artículo, le mostraremos cómo agregar fácilmente el localizador de tiendas de Google Maps a WordPress.
Google Maps introdujo una API paga para mostrar mapas en sitios web. Incluso ofrecen una opción gratuita limitada para insertar mapas de Google en sitios web pequeños.
La mayoría de los complementos de Google Maps para WordPress usan la API de Google para recuperar y mostrar mapas. Si desea utilizar un complemento de Google Maps, deberá registrarse en la plataforma API de Google y habilitar la opción de facturación.
Es un servicio de pago por uso, lo que significa que se le cobrará en función de la cantidad de llamadas API realizadas en su sitio.
Le mostraremos los métodos gratuitos y de pago con sus ventajas y desventajas, y puede elegir el que mejor se adapte a sus necesidades.
Método 1. Agregue Google Maps a su sitio gratis
Este método es más fácil y gratuito. La desventaja es que no puede mostrar varias tiendas en un solo mapa.
Se recomienda para los usuarios que desean agregar solo una ubicación de tienda de Google Maps a sus sitios.
Primero, debe visitar el sitio web de Google Maps en su computadora. Luego, ingrese la dirección de su tienda en el campo de búsqueda y Google Maps la mostrará en el mapa con un marcador adjunto al mapa.
Asegúrese de colocar el marcador en el lugar correcto. Puede seleccionar un nivel de zoom haciendo clic en el botón de zoom. Cuando esté satisfecho con el nivel de zoom, haga clic en el botón compartir en la columna izquierda.
Aparecerá una ventana emergente donde debe cambiar a la pestaña “Insertar un mapa”. Ahora verá la ubicación buscada en el mapa con un código HTML.
Haga clic en el enlace Copiar HTML para obtener el código de inserción.
Ahora vaya al área de administración de su sitio de WordPress. Una vez en el área de administración, continúe y edite la publicación o página donde desea mostrar el mapa de ubicación de la tienda.
Por lo general, los usuarios agregan un mapa de ubicación de la tienda a la página del formulario de contacto con el número de teléfono y el horario de apertura.
En la pantalla de edición posterior, debe agregar un bloque HTML personalizado.
En el área de texto del bloque HTML personalizado, debe pegar el código que copió de Google Maps.
Ahora puede cambiar a la pestaña de visualización para ver Google Maps incrustado en su página. Mostrará la ubicación de su tienda marcada en el mapa con enlaces a direcciones o para guardar la ubicación.
Método 2. Agregue el localizador de tiendas de Google Maps usando un complemento de WordPress
Este método se recomienda para usuarios que desean mostrar múltiples ubicaciones de tiendas en un mapa de Google.
Lo primero que debe hacer es instalar y activar el complemento WP Store Locator. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Es un complemento gratuito de Google Maps que le permite crear un mapa personalizado con múltiples ubicaciones de tiendas y campos personalizados.
La desventaja de este método es que requiere que agregue una clave API. Deberá proporcionar su información de facturación para usar la clave API. Para precios y otra información, visite el sitio web de Google Maps Platform.
Listo, comencemos.
Pasó 1. Generar claves de API de Google Maps
Para usar el complemento WP Store Locator, deberá generar dos claves API. La primera se llama la clave API del navegador y la segunda se llama la clave del servidor.
Comencemos con la clave del navegador primero. Haga clic en este enlace en la Consola del desarrollador de Google y lo llevará al sitio web de la API de Google con todas las API necesarias habilitadas.
Debe crear un nuevo proyecto y darle un nombre para ayudarlo a identificarlo. Después de eso, tendrá que esperar unos momentos mientras la consola crea el proyecto por usted.
Será redirigido a la página de configuración de la clave API. Debe proporcionar un título para su clave API para que pueda identificarla fácilmente como la clave API del navegador para su proyecto de Google Maps.
Luego, debe definir “Restricciones de aplicación” en “Referencias HTTP”. Debajo de eso, debe establecer el campo “Aceptar solicitudes de” en su nombre de dominio en el siguiente formato.
https://example.com/*https: //*.example.com/* (si está utilizando un subdominio)
Finalmente, haga clic en el botón “Crear”. La consola ahora guarda su configuración y muestra la clave del navegador. Debe copiar y pegar esta clave en un editor de texto, ya que la necesitará más adelante.
Luego, debe crear la clave API del servidor. Haga clic en este enlace en Google Developer Console y lo llevará directamente a la consola con las API seleccionadas habilitadas.
Verá la página de creación del proyecto nuevamente. Sin embargo, como ya ha creado un proyecto, puede hacer clic en el menú desplegable y seleccionar su proyecto.
Serás redirigido a la página de configuración de la API. Proporcione un nombre para esta clave API para ayudarlo a reconocerla como una clave de servidor.
En la sección “Restricciones de la aplicación”, debe seleccionar las direcciones IP. Básicamente, le estamos diciendo a Google que solo acepte solicitudes de servidor de direcciones IP específicas.
Ahora, deberá pedirle a su proveedor de alojamiento de WordPress el número de IP utilizado por su cuenta de alojamiento. Estaría en el siguiente formato:
172.160.0 / 12
Después de eso, debe hacer clic en el botón “Crear” para guardar su configuración y copiar la clave API del servidor.
Pasó 2. Configure el complemento WP Store Locator
Después de crear sus claves API, debe ir a Localizador de tiendas »Configuración página para configurar el complemento.
Ingrese el navegador de Google Maps y las claves API del servidor que generó anteriormente. Luego, seleccione su idioma y región de Google Maps y haga clic en el botón Guardar cambios para guardar su configuración.
Ahora, debe desplazarse por la página de configuración a la sección “Mapa” e ingresar un punto de partida para el mapa. Este punto de partida puede ser una ciudad o un país, para que los usuarios puedan ver los marcadores ubicados en diferentes ubicaciones.
Hay muchas otras opciones en la página de configuración, que incluyen estilo de mapa, nivel de zoom predeterminado, tipo de mapa, radio de búsqueda, país, etc. Puede revisarlos y ajustarlos a sus necesidades.
Cuando haya terminado, es hora de agregar ubicaciones.
Pasó 3. Agregar ubicaciones de tiendas
Ir Localizador de tiendas »Nueva tienda página para agregar su primera ubicación. La página Nueva tienda se verá como la publicación predeterminada o el editor de página en WordPress.
Proporcione un título para su tienda y desplácese hacia abajo hasta la sección “Detalles de la tienda”. Desde aquí, debe ingresar la dirección de su tienda.
Verá un mapa en la columna derecha, sin embargo, no se actualizará automáticamente a la dirección ingresada. Deberá hacer clic en el botón Publicar para guardar su ubicación. Después de eso, actualice la página y el mapa apuntará a la dirección que proporcionó.
Ahora repita el proceso para agregar ubicaciones de tiendas adicionales. Puede agregar tantas ubicaciones de tienda como desee.
Pasó 4. Agregue el mapa del localizador de tiendas en WordPress
Para mostrar el localizador de tiendas en una página de WordPress, simplemente cree una nueva página o edite una existente donde desee mostrar el mapa.
En la pantalla de edición de publicaciones, debe agregar el bloque “Código corto” a su área de edición de publicaciones. Después de eso, agregue el (wpls) shortcode dentro de él.
Ahora puede guardar o publicar su página y hacer clic en el botón Vista previa para ver el localizador de tiendas de Google Maps en acción.
Mostrará sus marcadores de mapa para cada ubicación de tienda y comenzará el mapa desde su punto de partida preferido. Por ejemplo, en este mapa, se enfoca en la ciudad de West Palm Beach y muestra dos ubicaciones de tiendas en el mapa.
Esperamos que este artículo te haya ayudado a aprender cómo agregar el localizador de tiendas de Google Maps a WordPress. Es posible que también desee ver nuestra lista de herramientas gratuitas de Google que todos los propietarios de sitios web deben usar.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.
