Cómo agregar Google Maps Store Locator en WordPress

¬Ņ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 de manejo o compartir la ubicación con amigos. Agregar un localizador de tiendas a su sitio web comercial 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 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 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 con 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 desde su sitio web.

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

Método 1. Agregar Google Maps a tu sitio web 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 solo desean agregar una √ļnica ubicaci√≥n de tienda de Google Maps en su sitio web.

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 anclado en el mapa.

Compartir un mapa en Google Maps

Aseg√ļrese de colocar el marcador 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 izquierda.

Aparecer√° una ventana emergente donde deber√° cambiar a la pesta√Īa “Incrustar 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 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 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 posterior, 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.

Mapas para insertar código 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 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 conocer los precios y otra información, visite el sitio web de Google Maps Platform.

Listo, comencemos.

Paso 1. Generar claves de API de Google Maps

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

Comencemos primero con la tecla del navegador. Haga clic en este enlace de Google Developer Console y lo llevar√° al sitio web de la API de Google con todas las API necesarias habilitadas.

Crea un nuevo proyecto

Debe crear un nuevo proyecto y asignarle un nombre que lo ayude a identificarlo. 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 de la API del navegador

A continuaci√≥n, debe establecer “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 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 de API del navegador

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

Ver√° nuevamente la p√°gina de creaci√≥n de proyecto. Sin embargo, como 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 API que lo ayude a reconocerla como clave del 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 que provengan de direcciones IP espec√≠ficas.

Ahora necesitaría 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. Configurar el complemento WP Store Locator

Una vez que haya creado sus claves de API, debe dirigirse a Localizador de tiendas ¬ĽConfiguraci√≥n p√°gina para configurar el complemento.

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 el idioma y la región de Maps y luego 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 ingresar un punto de inicio del mapa. Este punto de inicio podr√≠a ser una ciudad o un pa√≠s, por lo que los usuarios pueden ver los marcadores ubicados en diferentes ubicaciones.

Agregue un punto de inicio para el mapa del localizador de su tienda

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.

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 de la 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 derecha, sin embargo, no se actualizará automáticamente a la dirección que ha ingresado. 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 tienda 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” a su √°rea de edici√≥n de publicaciones. Despu√©s de eso agregue el [wpls] shortcode dentro de √©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á 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 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 haya ayudado a aprender cómo agregar el localizador de tiendas de Google Maps en WordPress. También es posible que desee ver nuestra lista de herramientas gratuitas de Google que todo propietario de sitios debe usar.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.