¿Quieres agregar un localizador de tiendas de Google Maps en WordPress? Un localizador de tiendas es un mapa que muestra 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 al sitio web de su empresa o incluso a una tienda en línea le permite ganar instantáneamente la confianza del usuario. 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 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 activar la opción de facturación. Este 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 los métodos gratuitos y de pago con sus pros y contras, y luego podrás elegir el que mejor se adapte a tus 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 puede mostrar varias tiendas en un mapa. Se recomienda para usuarios que solo desean agregar una única ubicación de tienda de Google Maps en su sitio web. En primer lugar, debe visitar el sitio web de Google Maps en su computadora. Luego ingrese la dirección de su tienda en el cuadro de búsqueda y Google Maps la mostrará en el mapa con un marcador fijado al 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 en la columna de la izquierda. Aparecerá una ventana emergente en la que debe cambiar a la pestaña «Insertar tarjeta». 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 inserción. Ahora vaya al área de administración de su 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 ver 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 junto con su número de teléfono y horario de atención. En la pantalla de edición de publicaciones, debe agregar un bloque HTML personalizado.
En el cuadro de texto del bloque HTML personalizado, debe pegar el código que copió 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 de manejo o para guardar la ubicación.
Método 2. Agregue un localizador de tiendas de Google Maps usando un plugin de WordPress
Este método se recomienda para los usuarios que desean ver varias ubicaciones de tiendas en un mapa de Google. Lo primero que debe hacer es instalar y activar el plugin WP Store Locator. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress. Este 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 agregue una clave API. Deberá proporcionar su información de facturación para utilizar la clave API. Para conocer los precios y otra información, visite el sitio web de la plataforma Google Maps. Listo, comencemos.
Paso 1. Generar claves de API de Google Maps
Para usar el plugin WP Store Locator, deberá generar dos claves API. La primera se llama clave API del navegador y la segunda se llama clave de servidor. Comencemos primero con la tecla Navigator. Haga clic en este enlace de la Consola para desarrolladores de Google y lo 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á que esperar unos momentos mientras la consola crea el proyecto por usted. Luego, será redirigido a la página de configuración de la clave API. Debe proporcionar un título para su clave API para que pueda identificarla fácilmente como la clave API del navegador para su proyecto de Google Maps.
Luego, debe establecer «Restricciones de la aplicación» en «Remitentes HTTP». A continuación, debe configurar 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 clave del navegador. Debe copiar y pegar esta clave en un editor de texto, la necesitará más adelante.
A continuación, debe crear la clave API del servidor. Haga clic en este enlace de la Consola para desarrolladores de Google y lo llevará directamente a la consola con las API seleccionadas habilitadas. Verá la página de creación del 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, se le redirigirá 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ó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 indique el rango de IP utilizado por su cuenta de alojamiento. Tendría 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. Configure el plugin WP Store Locator
Una vez que haya creado sus claves API, debe dirigirse a Localizador de tiendas »Configuración página para configurar el plugin.
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, 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 partida para el mapa. Este punto de partida puede ser una ciudad o un país, de modo que los usuarios puedan ver los marcadores colocados en diferentes ubicaciones.
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 y más. Puede verlos y ajustarlos según sea necesario. 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 de WordPress o el editor de páginas.
Proporcione un título para su tienda, luego desplácese hacia abajo hasta la sección «Detalles de la tienda». Desde allí, debe ingresar la dirección de su tienda. Verá un mapa en la columna de la derecha, pero 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 ubicaciones de tiendas. Puede agregar tantas ubicaciones como desee.
Paso 4. Agregar el mapa de ubicación de la tienda 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 desea que se muestre 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 [wpsl] código corto en el interior.
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á 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 lo que esperamos que este artículo le 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 todos los propietarios de sitios deben usar. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
){kind=link}