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

¿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 empresa.

Permite a los usuarios ubicarlo en el mapa, encontrar indicaciones para llegar 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 ganarse instantáneamente la confianza de los usuarios.

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

Cómo agregar un localizador de tiendas de Google Maps en WordPress

Google Maps introdujo una API paga 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 complementos 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á según 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 sus contras, luego podrás elegir el que mejor se adapte a tus necesidades.

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

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 usuarios que solo desean agregar una sola ubicación de tienda de Google Maps en su sitio web.

En primer lugar, 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 fijo en el mapa.

Compartir un mapa en Google Maps

Asegúrese de que el marcador esté colocado en la ubicació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 en la que deberá cambiar a la pestaña «Incrustar un mapa». Ahora verá su ubicación buscada en el mapa con un código HTML.

Copie 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 dirígete al área de administración de tu sitio web de WordPress. Una vez en el área de administración, continúe y edite la publicación o la página donde desea mostrar el mapa de ubicación de la tienda.

Normalmente, los usuarios agregan un mapa de ubicación de la tienda en su página de 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 incrustado de Maps en WordPress

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.

Ubicación de la tienda marcada en el mapa

Método 2. Agregue el localizador de tiendas de Google Maps usando un complemento 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 Localizador de tiendas WP enchufar. 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, consulte el Plataforma de mapas de Google sitio web.

Listo, comencemos.

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

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

Comencemos primero con la tecla 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 requeridas habilitadas.

Crear un nuevo proyecto

Necesitas crear un nuevo proyecto y darle un nombre que te ayude a identificar el proyecto. Después de eso, tendrá que esperar unos momentos mientras la consola crea el proyecto por usted.

A continuación, 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 la clave API del navegador para su proyecto de Google Maps.

Configuración de la clave API del navegador

A continuación, debe establecer ‘Restricciones de la aplicación’ en ‘Recomendadores HTTP’. A continuación, debe configurar el campo ‘Aceptar solicitudes de’ en su nombre de dominio en el siguiente formato.

https://ejemplo.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 tecla del navegador. Debe copiar y pegar esta clave en un editor de texto, la necesitará más adelante.

Copiar clave api del navegador

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

Verá una vez más la página de creación de proyectos. Sin embargo, dado que ya ha creado un proyecto, puede 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 la API. Proporcione un nombre para esta clave de API que lo ayude a reconocerla como clave de servidor.

Establecer restricciones de IP

En la sección ‘Restricciones de la aplicación’, debe seleccionar Direcciones IP. Básicamente, le estamos diciendo a Google que solo acepte solicitudes de servidor provenientes de direcciones IP específicas.

Ahora deberá 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/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.

Paso 2. Configuración del complemento WP Store Locator

Una vez que haya creado sus claves API, debe dirigirse a Localizador de tiendas » Ajustes página para configurar el complemento.

Ingrese las claves de Google Maps

Ingrese las claves API del servidor y del navegador de Google Maps que generó anteriormente. A continuación, seleccione el idioma y la región de Maps y 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 inicio del mapa. Este punto de inicio podría ser una ciudad o un país, para que los usuarios puedan ver los marcadores colocados en diferentes ubicaciones.

Agregue un punto de inicio para su mapa 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. Puede revisarlos y ajustarlos a sus necesidades.

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

Paso 3. Agregar ubicaciones de tiendas

Dirigirse a 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.

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 otras ubicaciones de tiendas. Puede agregar tantas ubicaciones de tiendas como desee.

Paso 4. Agregar el mapa 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’ a su área de edición de publicaciones. Después de eso agrega el [wpsl] código abreviado dentro de él.

Código abreviado 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á los marcadores de su mapa para cada ubicación de la tienda y comenzará 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, esperamos que este artículo te haya ayudado a aprender cómo agregar el localizador de tiendas de Google Maps en WordPress. También puede consultar nuestra lista de herramientas de Google gratuitas que todo propietario de un sitio debería utilizar.

.

Deja un comentario