Cómo agregar fácilmente la búsqueda de ubicación a un sitio web de directorio en WordPress

Hay muchas formas diferentes de mejorar el sitio web de su directorio y una de ellas es habilitar la búsqueda basada en la ubicación. Si está ejecutando un directorio o un sitio web de anuncios clasificados similar a Yelp, TripAdvisor, Craigslist o cualquier otro similar que requiera la búsqueda basada en la ubicación, puede hacerlo fácilmente integrándolo con Google Maps. Es una función esencial para algunos usuarios, ya que pueden buscar productos, servicios o lugares en su área. Además, la plataforma Google Maps tiene un límite mensual gratuito que debería ser suficiente si su sitio web recibe un tráfico moderado.

En este tutorial paso a paso, explicaremos cómo agregar la búsqueda de ubicación a su sitio web de directorio. Vamos a utilizar HivePress, un complemento gratuito de WordPress que le permite crear un sitio web de directorio en un abrir y cerrar de ojos. Además, utilizará ListingHive, un tema de directorio gratuito de WordPress, junto con la extensión HivePress Geolocalización para la integración con Google Maps.

Sin embargo, si ya tiene un sitio web de directorio creado con otro complemento o tema, puede omitir los primeros pasos y desplazarse hasta "Cómo solucionar" ¡Ups! Algo salió mal. Esta página no cargó Google Maps correctamente” ” sección para solucionar los errores más comunes.

Entonces, ¡vamos al primer paso!

Instalación de HivePress

En primer lugar, debe instalar HivePress. Puede instalarlo como cualquier otro complemento gratuito en WordPress. Simplemente navegue a la sección Complementos > Agregar nuevo y encuéntrelo con la barra de búsqueda, luego instálelo y finalmente actívelo haciendo clic en el botón "Activar". Una vez que haya terminado con la instalación, puede continuar con el siguiente paso: instalar extensiones.

Además, si le resulta difícil, puede seguir el screencast a continuación para instalar HivePress directamente desde el panel de control de WordPress.

Instalación de extensiones

El siguiente paso es instalar la extensión Geolocalización para permitir a los usuarios buscar listados por ubicación. Para instalarlo, simplemente coloque el cursor sobre la sección HivePress y haga clic en el enlace "Extensiones". Busque la extensión de geolocalización en la lista, haga clic en el botón "Instalar" y, finalmente, active la extensión.

Además, el siguiente screencast muestra el proceso común de instalación de extensiones de HivePress, para que pueda seguirlo paso a paso.

Creación de un nuevo proyecto

Una vez que haya terminado con la instalación del complemento y la extensión de geolocalización, es hora de crear un proyecto en Google Cloud Platform. Suponiendo que ya tiene una cuenta de Google, debería poder acceder a este panel sin ningún problema. Sin embargo, si no tiene una, entonces es esencial registrarse para obtener una cuenta de Google.

Ahora debe crear un proyecto haciendo clic en el botón "Crear proyecto", luego asígnele un nombre y, finalmente, haga clic en el botón "Crear".

Configuración de la facturación

Ahora, si no tiene una cuenta de facturación con Google, debe crear una nueva para habilitar la facturación del proyecto. Pero, no te preocupes, ahora no tienes que pagar nada, es solo uno de los requisitos para usar la API de Google Maps. Simplemente siga el enlace y complete todos los campos del formulario, incluidos los detalles del método de pago.

Obtendrá un crédito gratuito de $ 200 cada mes y, en la mayoría de los casos, es más que suficiente para cubrir los gastos de uso de los servicios de Google en su sitio web. Además, es posible configurar límites y notificaciones, para que nunca excedas el crédito gratuito. Puede consultar el precio para tener una mejor idea de cómo funciona y para asegurarse de que puede usar los mapas de forma gratuita.

Después de agregar su información de facturación, obtendrá una ventana emergente con los tipos de API que desea habilitar. Seleccione Mapas y lugares como en la captura de pantalla a continuación y haga clic en el botón "Habilitar". Además, si no hay una ventana emergente, puede habilitar estas API a través de la página de la Biblioteca de API de Google.

Creación de una clave API

El siguiente paso es crear una clave API para su sitio web. Para hacerlo, vaya a la página Credenciales y seleccione su proyecto.

En la página Credenciales, puede ver la clave API ya generada. Si acaba de crear su cuenta de facturación, es posible que se genere una clave automáticamente. En este caso, simplemente puede hacer clic en él para editarlo. Sin embargo, si no hay una clave de API en la página, puede crear una nueva en la sección Crear credenciales > Clave de API .

A continuación, debe configurar su clave API configurando las restricciones de la aplicación. Es esencial porque si simplemente incrusta la clave, se mostrará en texto sin formato en el código fuente de su sitio web. Es por eso que necesita restringir esto para que otras personas no puedan usar su clave API para sus proyectos. Para hacer esto, simplemente agregue la referencia HTTP para permitir las solicitudes API solo desde su sitio web. Simplemente configure la dirección de su sitio web, pero también agregue la parte "/*" al final para permitir solicitudes de API desde cualquiera de las subpáginas del sitio web, para que Google Maps funcione en todas las páginas de su sitio web.

Ahora debe establecer restricciones de API en el siguiente campo. Haz clic en Restringir clave y selecciona Maps JavaScript API, Places API, Geocoding API en el menú desplegable. Si algunas de las API mencionadas no están en la lista, primero debe habilitarlas en la página de la Biblioteca API de Maps. Una vez que las tres API de Google estén habilitadas y seleccionadas en el menú desplegable, haga clic en el botón "Guardar".

Habilitación de la integración de Google Maps

¡Eso es todo! Acaba de crear una clave API y el toque final es habilitar Google Maps en su sitio web. En primer lugar, copie la clave API en la página API y servicios > Credenciales . Ahora, si está utilizando el complemento HivePress, navegue a su panel de WordPress y vaya a la sección HivePress> Configuración> Integraciones> Google Maps . Luego, simplemente pegue su clave API en el campo correspondiente y haga clic en el botón "Guardar cambios" para agregar la búsqueda de ubicación a su sitio web.

¡Felicitaciones! A partir de este momento, su sitio web está integrado con Google Maps y ahora puede agregar ubicaciones a los listados existentes en la sección Listados . Además, los usuarios deberán establecer la ubicación de los listados recién agregados. Además, hay un campo de búsqueda de ubicación en su sitio web y un mapa de Google, para que pueda probarlo y buscar algunos listados por su ubicación.

Solución de problemas

Si hay algún problema con la clave API que creó, el mapa puede mostrar el mensaje "¡Vaya! Algo salió mal. Esta página no cargó Google Maps correctamente” . Es un error bastante común ya que configurar una clave API no es un proceso muy fácil de usar y los usuarios a menudo se saltan algunos de los pasos de configuración. Sin embargo, puede solucionarlo en muy poco tiempo si conoce las raíces del problema.

Para averiguar el motivo de ese error, debe abrir la Consola de JavaScript. Puede abrirlo con unas pocas pulsaciones de teclas que difieren según su navegador. Verifique la respuesta en StackOverflow que explica cómo abrir la consola de JavaScript. Si usa el navegador Chrome, puede simplemente presionar CTRL+Shift+I para abrirlo. Una vez que lo abra, debería ver el mensaje de error, algo como este.

Es importante saber exactamente qué está causando el error para poder solucionarlo. Puede haber varios errores diferentes, pero mostraremos cómo solucionar los más frecuentes:

• Error de asignación de clave perdida;
• Error de asignación de clave no válida;
• ApiNotActivatedMapError;
• RefererNotAllowedMapError.

Sin embargo, si tiene un error que no se encuentra en la lista anterior, consulte la documentación de mensajes de error de la API de Google Maps para averiguar cuál es el problema y cómo solucionarlo.

MissingKeyMapError

Este error significa que no hay ninguna clave de API, por lo que debe crear una si desea habilitar Google Maps en su sitio web. Si obtiene este error, le recomendamos que siga este tutorial desde el primer paso para crear una clave API y configurar los mapas correctamente.

Error de mapa de clave no válido

Este error aparece cuando está utilizando la clave de API incorrecta. Lo más probable es que lo hayas creado pero no lo hayas agregado correctamente a tu sitio web. Para corregir este error, vaya a la página Credenciales y copie la clave API.

Si está utilizando el complemento HivePress y su extensión de geolocalización, vaya al panel de WordPress > HivePress > Configuración > Integraciones > sección Google Maps , pegue su clave API en el campo correspondiente y haga clic en el botón "Guardar cambios".

ApiNotActivatedMapError

Si obtiene este tipo de error, significa que no habilitó las API requeridas. Hay muchas API diferentes en la Biblioteca de API de Google Maps, por lo que debe ir a la Biblioteca y habilitar las que se requieren para su proyecto. Una vez que los habilite, recuerde agregarlos también a la sección Restricciones API en la configuración de su clave API en la sección Credenciales.

Por ejemplo, si está utilizando el complemento HivePress con su extensión de geolocalización y desea agregar la búsqueda de ubicación a su sitio web de directorio, debe habilitar y permitir el acceso a las siguientes API de Google: API de JavaScript de mapas, API de lugares, API de codificación geográfica . Puedes echar un vistazo a la captura de pantalla con las API necesarias.

RefererNotAllowedMapError

Este error ocurre si las restricciones de referencia de la API no están configuradas correctamente. Por ejemplo, si los mapas funcionan en una página de su sitio web y no funcionan en otras, lo más probable es que haya tenido el mismo problema.

La buena noticia es que configuró e ingresó una clave API correctamente, y solo hay un pequeño detalle que debe corregir. Vaya a la página Credenciales y haga clic en su clave API para editarla. En la sección Restricciones de la aplicación, seleccione "Referencias HTTP (sitios web)". Luego complete las restricciones del sitio web como se muestra a continuación, pero reemplace "ejemplo" con su nombre de dominio y haga clic en el botón "Guardar". Puede tomar hasta 5 minutos para que la configuración surta efecto.

Es importante agregar la parte "/*" al final para permitir solicitudes de API desde cualquiera de las subpáginas del sitio web, para que Google Maps funcione en todas las páginas de su sitio web.

Todavía no funciona

• Si cambia algo en las restricciones de su clave API, espere hasta 5 minutos para que la configuración surta efecto;
• Si aún hay un error, consulte la consola de JavaScript nuevamente para obtener más detalles. Podría haber un error después de resolver el primero;
• También puede intentar borrar el caché del navegador.

Conclusión

¡Eso es todo! Dicen que si hay voluntad, hay un camino. Acaba de agregar una función de búsqueda de ubicación a su sitio web de directorio y ahora sus usuarios pueden buscar listados por ubicación. Es una característica muy importante para la mayoría de los directorios. Aunque puede parecer un proceso un poco complicado para agregar Google Maps, vale la pena. Una vez que agregue la búsqueda de ubicación a su sitio web, afectará positivamente la experiencia del usuario. UX es muy importante para cualquier sitio web, ya que es uno de los pilares del buen tráfico.

Como puede ver, puede integrar Google Maps en su sitio web sin ninguna habilidad de codificación. Si aún no ha decidido qué complemento usar para crear su sitio web de directorio, puede considerar HivePress. Le permite crear directorios y listados de sitios web de cualquier tipo. Además, ya incluye una extensión gratuita que permite la búsqueda basada en la ubicación y varias funciones gratuitas más que pueden resultarle útiles.

Además, no dude en consultar nuestros artículos:

• Los complementos de directorio de WordPress gratuitos más populares
• Principales temas de directorio de WordPress
• Errores a evitar al construir un sitio de directorio de WordPress