Cómo agregar un localizador de tiendas de Google Maps en WordPress
¿Te gustaría añadir un 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 encontrarlo en el mapa, encontrar direcciones de manejo o compartir la ubicación con amigos. Agregar un localizador de tiendas al sitio web de su empresa o incluso a su tienda en línea puede ayudarlo a ganarse la confianza de los usuarios en muy poco tiempo.
En este artículo, le mostraremos cómo agregar fácilmente un localizador de tiendas de Google Maps en WordPress.
Google Maps introdujo una API paga para mostrar mapas en el sitio web. Todavía ofrecen opciones gratuitas limitadas para insertar Google Maps en sitios 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 el complemento de Google Maps, debe registrarse en la plataforma API de Google y habilitar las opciones de facturación.
Este es un servicio de pago por uso, lo que significa que pagará por la cantidad de llamadas a la API que realice desde su sitio web.
Te mostraremos los pros y los contras de los métodos gratuitos y de pago, y luego 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 mapa.
Recomendado para usuarios que solo desean agregar una sola ubicación de tienda de Google Maps a su sitio web.
Primero, deberá 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 mostrará la dirección en el mapa y fijará el marcador en el mapa.
Asegúrese de que el marcador esté colocado en la posición correcta. Puede elegir el 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 en la columna de la izquierda.
Aparecerá una ventana emergente en la que deberá cambiar a la pestaña “Incrustar mapa”. Ahora verá su ubicación buscada en el mapa junto con el código HTML.
Haga clic en el enlace Copiar HTML para obtener el código de inserción.
Ahora ve al área de administración de tu sitio de WordPress. Una vez en el área de administración, continúe y edite la publicación o la página donde desea mostrar un mapa de la ubicación de su tienda.
Por lo general, los usuarios agregan un mapa de las ubicaciones de las tiendas en las páginas de su formulario de contacto con sus números de teléfono y horarios de atención.
En la pantalla de edición de publicaciones, debe agregar un bloque HTML personalizado.
En el área de texto del bloque HTML personalizado, debe pegar el código copiado de Google Maps.
Ahora puede cambiar a la pestaña Vista previa para ver el mapa de Google incrustado en su página. Le mostrará la ubicación de la tienda marcada en el mapa con un enlace o guardará la ubicación.
Método 2. Agregue el localizador de tiendas de Google Maps usando el complemento de WordPress
Se recomienda este método para los usuarios que deseen mostrar varias ubicaciones de tiendas en Google Maps.
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 complementos de WordPress.
Es un complemento gratuito de Google Maps que le permite crear mapas personalizados con múltiples ubicaciones de tiendas y campos personalizados.
La desventaja de este método es que requiere que agregue una clave API. Debe proporcionar información de facturación para usar la clave API. Consulte el sitio web de Google Maps Platform para conocer los precios y otra información.
Listo, comencemos.
Paso 1: Genere una clave API de Google Maps
Para usar el complemento WP Store Locator, debe generar dos claves API. La primera se denomina clave API del navegador y la segunda se denomina clave del servidor.
Comencemos primero con las teclas del navegador. Haga clic en este enlace de Google Developer Console y lo llevará al sitio web de API de Google con todas las API requeridas habilitadas.
Debe crear un nuevo proyecto y asignarle un nombre para ayudarlo a identificar el proyecto. Después de eso, tendrás que esperar un rato mientras la consola creará el proyecto por ti.
A continuación, será redirigido a la página de configuración de la clave API. Debe darle un título a su clave API para que pueda identificarla fácilmente como la clave API del navegador de su elemento de Google Maps.
A continuación, debe configurar “Restricciones de la aplicación” en “Referentes HTTP”. Debajo de eso, 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 mostrará las teclas del navegador. Debe copiar y pegar esta clave en un editor de texto, la necesitará más adelante.
A continuación, debe crear una clave de API de servidor. Haga clic en este enlace de Google Developer Console y lo llevará directamente a la consola con la API seleccionada habilitada.
Verá la página Crear proyecto nuevamente. Sin embargo, dado que ya ha creado un proyecto, simplemente puede hacer clic en el menú desplegable y seleccionar su proyecto.
A continuación, será redirigido a la página de configuración de la API. Proporcione un nombre para esta clave de API para ayudarlo a identificarla como una clave de servidor.
En la sección “Restricciones de la aplicación”, debe seleccionar una dirección IP. Básicamente, le decimos 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 indique el rango de IP que debe usar para su cuenta de alojamiento. Tendrá el siguiente formato:
172.16.0.0/12
Después de eso, debe hacer clic en el botón Crear para guardar la configuración y copiar la clave API del servidor.
Paso 2. Configure el complemento WP Store Locator
Después de crear su clave API, debe ir a Localizador de tiendas » Ajustes página para configurar el complemento.
Ingrese las claves API del servidor y del navegador de Google Maps que generó anteriormente. Luego, seleccione el idioma y la región del mapa, luego haga clic en el botón Guardar cambios para almacenar su configuración.
Ahora debe desplazarse hacia abajo hasta la sección “Mapas” en la página de configuración e ingresar el punto de inicio del mapa. Este punto de partida puede 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, incluido el estilo del mapa, el nivel de zoom predeterminado, el tipo de mapa, el radio de búsqueda, los países y más. Puede revisarlos y ajustarlos según sea necesario.
Una vez hecho esto, es hora de agregar la ubicación.
Paso 3. Agrega la ubicación de la tienda
ir Ubicación de la tienda » Nueva tienda página para agregar su primera ubicación. La nueva página de la tienda se parece a la publicación predeterminada o al editor de páginas 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 de la derecha, pero no se actualizará automáticamente con la dirección que ingresó. Debe 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. Agregue un mapa de localización 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 página 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.añadir después [wpsl] código corto dentro.
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á marcadores de mapa para cada ubicación de la 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.
Eso es todo, esperamos que este artículo te haya ayudado a aprender cómo agregar un 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 web debería usar.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.
Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.
