Cómo añadir el localizador de tiendas de Google Maps en WordPress

¿Quieres añadir el localizador de tiendas de Google Maps en WordPress? Un localizador de tiendas es un mapa que apunta a la ubicación de su negocio.

Permite a los usuarios localizarte en el mapa, encontrar indicaciones para llegar en coche o compartir la ubicación con tus amigos. Añadir un localizador de tiendas a su sitio web o incluso a una tienda en línea le ayuda a ganarse la confianza de los usuarios al instante.

En este artículo, le mostraremos cómo añadir fácilmente el localizador de tiendas de Google Maps en WordPress.

Google Maps introdujo una API de pago para mostrar mapas en los sitios web. Todavía ofrecen una opción gratuita limitada para insertar mapas de Google en pequeños sitios web.

La mayoría de los plugins de Google Maps para WordPress utilizan 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 del número de llamadas a la API realizadas desde su sitio web.

Le mostraremos los métodos gratuitos y de pago con sus ventajas y desventajas, para que pueda elegir el que mejor se adapte a sus necesidades.

Método 1. Adición gratuita de Google Maps a su sitio web

Este método es más fácil y gratuito. La desventaja es que no se pueden mostrar varias tiendas en un solo mapa.

Se recomienda para los usuarios que sólo quieren añadir una única ubicación de la tienda de Google Maps en su sitio web.

En primer lugar, debe visitar el sitio web de Google Maps en su ordenador. A continuación, introduzca la dirección de su tienda en el campo de búsqueda y Google Maps la mostrará en el mapa con un marcador en el mapa.

Asegúrese de que el marcador esté colocado en el lugar correcto. Puede seleccionar un nivel de zoom haciendo clic en el botón de zoom. Una vez que esté satisfecho con el nivel de zoom, debe hacer clic en el botón Compartir de la columna de la izquierda.

Esto mostrará una ventana emergente en la que deberá cambiar a la pestañaIncrustar un mapa. Ahora verá su ubicación buscada en el mapa con un código HTML.

Haga clic en el enlace Copiar HTML para obtener el código de incrustación.

Ahora dirígete al área de administración de tu sitio web de WordPress. Una vez en el área de administración, sigue adelante y edita el mensaje o la página donde quieras mostrar el mapa de ubicación de la tienda.

Normalmente, los usuarios añaden un mapa de ubicación de la tienda en su página de formulario de contacto con su número de teléfono y horas de apertura.

En la pantalla de edición de mensajes, debe añadir un bloque HTML personalizado.

En el área de texto del bloque HTML personalizado, debe pegar el código que ha copiado de Google Maps.

Ahora puede cambiar a la pestaña de vista previa 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. Añadir el localizador de tiendas de Google Maps mediante un plugin de WordPress

Este método se recomienda para los usuarios que deseen mostrar varias ubicaciones de tiendas en un mapa de Google.

Lo primero que tienes que hacer es instalar y activar el plugin WP Store Locator. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Es un plugin 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 añada una clave de API. Deberá proporcionar su información de facturación para utilizar la clave de la API. Para obtener información sobre precios y otros datos, consulta el sitio web de la plataforma Google Maps.

Listos, empecemos.

Paso 1. Generación de claves de API de Google Maps

Para usar el plugin WP Store Locator, necesitará generar dos claves de API. La primera se llama la clave de la API del navegador y la segunda se llama la clave del servidor.

Comencemos con la tecla Navegador primero. Haga clic en este enlace de la Consola de desarrollo de Google y le llevará al sitio web de la API de Google con todas las API necesarias habilitadas.

Necesita crear un nuevo proyecto y darle un nombre que le ayude a identificar el proyecto. Después de eso, tendrás que esperar unos momentos mientras la consola crea el proyecto para ti.

A continuación, se le redirigirá a la página de configuración de la clave de la API. Debe proporcionar un título para la clave de API, de modo que pueda identificarla fácilmente como la clave api del navegador para su proyecto de Google Maps.

A continuación, debe establecer «Limitaciones de aplicación en `Referentes HTTP. A continuación, debe configurar el campo `Aceptar peticiones de para su nombre de dominio en el siguiente formato.

https://example.com/*
>
https://*.example.example.com/* (si está utilizando un subdominio)

Finalmente, haga clic en el botón `Crear. La consola guardará su configuración y le mostrará la tecla del Navegador. Necesita copiar y pegar esta clave en un editor de texto, la necesitará más tarde.

A continuación, debe crear la clave de la API del servidor. Haz clic en este enlace de la Consola de Google Developer y te llevará directamente a la consola con las APIs seleccionadas activadas.

Volverá a ver la página Crear proyecto. Sin embargo, como ya ha creado un proyecto, puede hacer clic en el menú desplegable y seleccionar el proyecto.

Será redirigido a la página de configuración de la API. Proporcione un nombre para esta clave de API que le ayude a reconocerla como clave de servidor.

En la secciónRestricciones de aplicación, debe seleccionar Direcciones IP. Básicamente, le estamos diciendo a Google que sólo acepte solicitudes de servidores que provengan de direcciones IP específicas.

Ahora tendría que pedirle a su proveedor de alojamiento de WordPress que le diga el rango de IP utilizado por su cuenta de alojamiento. Estaría en el siguiente formato:

172.16.0.0.0/12

A continuación, haga clic en el botón `Crear para guardar su configuración y copiar la clave de la API del servidor.

Paso 2. Configuración del plugin WP Store Locator

Una vez que haya creado sus claves de API, debe dirigirse a la página Store Locator » Settings para configurar el plugin.

Introduzca las claves del navegador Google Maps y de la API del servidor que generó anteriormente. A continuación, seleccione el idioma y la región de Mapas y haga clic en el botón Guardar cambios para guardar su configuración.

Ahora, debe desplazarse hacia abajo en la página de configuración hasta la sección «Mapa» e introducir un punto de inicio del mapa. Este punto de partida podría ser una ciudad o un país, por lo que los usuarios pueden ver los marcadores colocados en diferentes lugares.

Hay muchas otras opciones en la página de configuración, incluyendo el estilo del mapa, el nivel de zoom predeterminado, el tipo de mapa, el radio de búsqueda, el país, etc. Usted puede revisarlas y ajustarlas a sus necesidades.

Una vez que haya terminado, es hora de agregar ubicaciones.

Paso 3. Adición de ubicaciones de almacén

Vaya a la página Store Locator » New Store para añadir su primera ubicación. La página Nueva Tienda tendrá el mismo aspecto que el editor de mensajes o de páginas predeterminado en WordPress.

Proporciona un título para tu tienda y luego desplázate hacia abajo hasta la secciónDetalles de la tienda. Desde aquí, debe introducir la dirección de su tienda.

Verá un mapa en la columna de la derecha, sin embargo, no se actualizará automáticamente a la dirección que ha introducido. 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 usted proporcionó.

Ahora repita el proceso para agregar otras ubicaciones de la tienda. Puede añadir tantas tiendas como desee.

Paso 4. Añadir el mapa localizador de tiendas en WordPress

Para mostrar tu localizador de tiendas en una página de WordPress, simplemente crea una nueva página o edita una ya existente en la que quieras mostrar el mapa.

En la pantalla de edición de mensajes, es necesario añadir el bloqueCódigo de acceso directo al área de edición de mensajes. Después añada el código abreviado [wpls] dentro de él.

Ahora puede guardar o publicar su página y hacer clic en el botón de vista previa para ver el localizador de tiendas de Google Maps en acción.

Mostrará sus marcadores de mapa para cada ubicación de la tienda e iniciará el mapa desde su punto de partida preferido. Por ejemplo, en este mapa, se centra en la ciudad de West Palm Beach y muestra dos ubicaciones de tiendas en el mapa.

Eso es todo lo que esperamos que este artículo te ayude a aprender a añadir el localizador de tiendas de Google Maps en WordPress. También puede ver nuestra lista de herramientas gratuitas de Google que todos los propietarios de sitios deben utilizar.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario