Cómo agregar el localizador de tiendas de Google Maps en WordPress (opción gratuita)

¿Quieres agregar 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 ubicarlo en el mapa, encontrar direcciones 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 la confianza del usuario al instante.

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

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

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 plugin 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 facturará en función de la cantidad de llamadas API realizadas desde su sitio web.

Te mostraremos tanto los métodos gratuitos como los de pago con sus pros y contras, tras lo cual podrás elegir el que mejor se adapte a tus necesidades.

Método 1. Agregue Google Maps a su sitio web de forma gratuita

Este método es más sencillo y gratuito. La desventaja es que no puede mostrar varias tiendas en un solo mapa.

Se recomienda para usuarios que simplemente desean agregar una única ubicación de tienda de Google Maps en su sitio web.

Primero, debe visitar el mapas de Google sitio web 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 fijado en el mapa.

Compartir un mapa en Google Maps

Asegúrese de que el indicador esté colocado en la posición correcta. 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.

Aparecerá una ventana emergente donde debe cambiar a la pestaña "Insertar un mapa". Ahora verá su ubicación buscada en el mapa con un código HTML.

Copia el código de inserción de Google Maps

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 web de WordPress. Una vez en el área de administración, siga adelante y edite la publicación o página donde desea ver el mapa de ubicación de la tienda.

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

En la pantalla de edición de publicaciones, debe agregar un bloque HTML personalizado.

Agregar un bloque HTML personalizado en WordPress

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

Código de incrustación de mapas en WordPress

Ahora puede cambiar a la pestaña 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 de manejo o para guardar la ubicación.

Almacena la ubicación marcada en el mapa

Método 2. Agregue el localizador de tiendas de Google Maps con un plugin de WordPress

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

Lo primero que debe hacer es instalar y activar el archivo. Localizador de tiendas WP conectar. Para obtener más detalles, consulte 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 agregar una clave API. Deberá proporcionar su información de facturación para utilizar la clave API. Para precios y otra información, consulte el Plataforma de Google Maps sitio web.

Listo, comencemos.

Paso 1. Generar las claves de la API de Google Maps

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

Comencemos primero con el botón Navegador. Haga clic en este Consola para desarrolladores de Google enlace y lo llevará al sitio web de la API de Google con todas las API necesarias habilitadas.

Crea un nuevo proyecto

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 por ti.

Después de eso, será redirigido a la página de configuración de la clave API. Debe proporcionar un título para su clave API, de modo que pueda identificarla fácilmente como una clave API del navegador para su proyecto de Google Maps.

Configuración de la clave de la API del navegador

A continuación, debe establecer "Restricciones de la aplicación" en "Referencia de HTTP". A continuación, debe configurar el campo "Aceptar solicitudes de" en el 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 guardará su configuración y le mostrará la clave del navegador. Debe copiar y pegar esta clave en un editor de texto, la necesitará más adelante.

Copie la clave de API del navegador

A continuación, debe crear la clave API del servidor. Haga clic en este Consola de desarrollador de Google enlace y lo llevará directamente a la consola con las API seleccionadas habilitadas.

Volverá a ver la página de creación del proyecto. Sin embargo, dado que ya ha creado un proyecto, puede simplemente hacer clic en el menú desplegable y seleccionar su proyecto.

Seleccione su proyecto de Google Maps

Luego será redirigido a la página de configuración de API. Proporcione un nombre para esta clave de API para ayudarlo a reconocerla como clave de servidor.

Establecer restricciones de IP

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 debe pedirle a su proveedor de alojamiento de WordPress que le diga el rango de IP que está usando su cuenta de alojamiento. Estaría en el siguiente formato:

172.16.0.0/12

A continuación, debe hacer clic en el botón "Crear" para guardar la configuración y copiar la clave API del servidor.

Paso 2. Configurar el plugin WP Store Locator

Después de crear sus claves API, debe ir a Localizador de tiendas »Configuración página para configurar el plugin.

Ingrese las claves de Google Maps

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

Ahora, debe desplazarse hacia abajo en la página de configuración hasta la sección "Mapa" e ingresar un punto de partida para el 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.

Agregar un punto de partida para el mapa del localizador de tiendas

Hay muchas otras opciones en la página de configuración, incluido el estilo del mapa, el nivel de zoom predeterminado, el tipo de mapa, el radio de búsqueda, el país, etc. Puedes revisarlos y adaptarlos a tus necesidades.

Una vez hecho esto, es hora de agregar ubicaciones.

Paso 3. Agregar ubicaciones de tiendas

Ir Encuentra una tienda »Nueva tienda página para agregar su primera posición. La página Nueva tienda se verá como la publicación predeterminada o el editor de páginas en WordPress.

Dirección de la tienda

Proporcione un título para su tienda y luego 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 de la derecha, sin embargo, no se actualizará automáticamente a la dirección que ingresó. 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 más puntos de venta. Puede agregar tantas ubicaciones de tiendas como desee.

Paso 4. Agregar el mapa del localizador de tiendas en WordPress

Para mostrar su 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" al área de edición de publicaciones. Luego agrega el archivo [wpsl] shortcode en él.

Código corto del localizador de tiendas

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.

Vista previa del mapa del localizador de tiendas

Mostrará marcadores de mapa para cada ubicación de la tienda y lanzará 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 le haya ayudado a aprender cómo agregar el localizador de tiendas de Google Maps en WordPress. También puede consultar nuestra lista de herramientas gratuitas de Google que todo propietario de un sitio debe usar.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir