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

Hay muchas formas diferentes de mejorar su sitio de directorio y una de ellas es activar la búsqueda basada en la ubicación. Si está ejecutando un director o sitio de anuncio similar a YELP, TripAdvisor, Craigslist o cualquier otro similar que requiera la búsqueda basada en la ubicación, puede integrarla fácilmente con Google Maps. Es una característica esencial para algunos usuarios, porque 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 tráfico moderado.
En este tutorial de paso, explicaremos cómo agregar la búsqueda de ubicación a su sitio de directorio. Usaremos HivePress, un complemento gratuito de WordPress que le permite crear un sitio web de directorio en un momento. También utilizará ListingHive, un director gratuito de WordPress, junto con la extensión de geolocalización HivePress para la integración de Google Maps. Sin embargo, si ya tiene un sitio web de director creado con otro complemento o tema, ¡puede omitir los primeros pasos y ejecutar en “Cómo remediar” HOBA! Algo no salió bien. Esta página no ha cargado correctamente Google Maps “” para solucionar los errores más comunes.
¡Así que pasemos al primer paso! Instalación de HivePress Primero, debe instalar HivePress. Puede instalarlo como cualquier otro complemento gratuito en WordPress. Simplemente explore la sección de complementos> Agregar nuevo y busque con la barra de búsqueda, luego instálelo y finalmente active haciendo clic en el botón “Activación”. Después de haber terminado de instalar, puede pasar al siguiente paso: instalar extensiones. Además, si le resulta difícil, puede rastrear la pantalla a continuación para instalar HivePress directamente desde la placa de WordPress. Instalación de extensiones El siguiente paso es instalar la extensión de geolocalización para permitir a los usuarios cuidar la ubicación. Para instalarlo, simplemente revise la sección HivePress y haga clic en el enlace “Extensiones”. Encuentre la extensión de geolocalización en la lista, haga clic en el botón “Instalar” y finalmente active la extensión.
La siguiente pantalla también muestra el proceso común de instalar HivePress Extensions, por lo que puede seguirla paso a paso.
Creando un nuevo proyecto después de haber terminado de instalar el complemento y la extensión de geolocalización, es hora de crear un proyecto en Google Cloud Platform. Suponiendo que ya tenga una cuenta de Google, debería poder acceder a este tablero sin problemas. Sin embargo, si no tiene uno, entonces es esencial crear una cuenta de Google. Ahora debe crear un proyecto haciendo clic en el botón “Crear proyecto”, luego nombrarlo y finalmente hacer clic en el botón “Crear”.
Configuración de la facturación ahora, si no tiene una cuenta de facturación en Google, debe crear una nueva para activar la facturación del proyecto. Pero no se preocupe, no tiene que pagar nada ahora, 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. Recibirá 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 para usar los servicios de Google en su sitio web. También es posible establecer límites y notificaciones para que nunca supere el crédito gratuito. Puede verificar los precios para tener una mejor idea de cómo funciona y asegurarse de que pueda usar los mapas gratis. Después de agregar información de facturación, recibirá una ventana emergente con los tipos de API que desea activar . Seleccione mapas y lugares como en la captura de pantalla a continuación y haga clic en el botón “Activación”. Además, si no hay ventana emergente, puede activar estas API a través de la página de la biblioteca de Google API.

Creación de una clave API El siguiente paso es crear una clave API para su sitio web. Para hacer esto, explore la página de credenciales y seleccione su proyecto.
En la página de la credencial, puede ver la clave API ya generada. Si acaba de crear su cuenta de facturación, se puede generar automáticamente una clave. En este caso, simplemente puede hacer clic para editar. Sin embargo, si no hay una clave API en la página, puede crear una nueva en la sección de creación de creación> Clave API.

Luego debe configurar su clave API configurando las restricciones de la aplicación. Es esencial porque, si simplemente incorpora la clave, se mostrará en un texto simple en el código fuente de su sitio, por lo que debe restringir esto para que otras personas no puedan usar su clave API para proyectos. Para hacer esto, simplemente agregue el HTTP para permitir las solicitudes API solo en su sitio web. Simplemente establezca la dirección de su sitio, pero también agregue el lado “/*” para permitir las solicitudes API de cualquiera de la subpágina del sitio, por lo que Google Maps funcionará en todas las páginas de su sitio. Debe establecer restricciones de API en el campo siguiente . Haga clic en la tecla de restricción y seleccione Maps JavaScript API, API de lugares, API de geocodificación en el menú desplegable. Si algunas de las API mencionadas no están enumeradas, primero debe activarlas en la página de la biblioteca API MAPS. Después de que las tres API de Google se activen y seleccionan en el menú desplegable, haga clic en el botón “Guardar”.

Activando la integración de Google Maps ¡Esto es! Acaba de crear una clave API, y el final es activar Google Maps en su sitio web. En primer lugar, copie la clave API a la página API y Servicios> Credenciales. Ahora, si usa el complemento HivePress, explore la placa de WordPress y vaya a la sección HivePress> Configuración> Integraciones> Google Maps. Luego pegue la tecla API al campo apropiado y haga clic en el botón “Guardar los cambios” para agregar la ubicación a su sitio.

¡Felicidades! Desde este momento, su sitio 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 para los nuevos listados agregados. Además, hay un campo de búsqueda de ubicación en su sitio y un mapa de Google, por lo que puede probarlo y buscar algunos registros por su ubicación. Dependiendo de si hay problemas con la clave API que creó, el mapa puede mostrar el mensaje “¡HOBA! Algo no salió bien. Esta página no ha cargado el error de Google Maps correctamente ”. Es un error bastante común, porque la configuración de una clave API no es un proceso muy fácil de usar, y los usuarios a menudo omiten algunos de los pasos de configuración. Sin embargo, puede remediarlo en el menor tiempo si conoce las raíces del problema.

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

Es importante saber exactamente qué causa el error, por lo que puede remediarlo. Puede haber varios errores diferentes, pero mostraremos cómo resolverlos en lo más común:


Missing KeyMaper;


Inválido KeyMaper;
ApinotactivatedMaperor;

RefernToTotototAllowedMaper.
Sin embargo, si tiene un error que no se enumera anteriormente, verifique la documentación de los mensajes de error de la API de Google Maps para averiguar qué está mal y cómo solucionarlo.MissingKeyMaperor Este error significa que no hay una clave API, por lo que debe crear una si desea activar Google Maps en su sitio web.Si recibe este error, le recomendamos que siga este tutorial desde el primer paso para crear una clave API y configurar correctamente los mapas.InvalidKEyMaperer Este error ocurre cuando se usa la tecla API incorrecta.Lo más probable es que lo creó, pero no lo agregó correctamente en su sitio web.Para remediar este error, vaya a la página de credencial y copie la clave API.
Si usa el complemento HivePress y su extensión de geolocalización, luego vaya al WordPress en el tablero> HivePress> Configuración> Integraciones> La sección de Google Maps, inserte la tecla API en el campo apropiado y haga clic en “Guardar los cambios”. ApinotatatidatedMaperor Si recibe este tipo de error, significa que no ha activado las API necesarias. Hay muchas API diferentes en la biblioteca API Google Maps, por lo que debe acceder a la biblioteca y activar lo necesario para su proyecto. Credenciales. Por ejemplo, si utiliza el complemento HivePress con su extensión de geolocalización y desea agregar la ubicación para buscar a su director, debe activar y permitir el acceso a las siguientes API de Google: MAPS JavaScript API, API de lugares, API de geocodificación. Puede echar un vistazo a la captura de pantalla con las API necesarias. ReferSoTotOtOlowedMaperor Este error ocurre si las restricciones de referencia de API no se establecen correctamente. Por ejemplo, si los mapas funcionan en una página de su sitio y no funcionan en otros, entonces probablemente enfrente el mismo problema. La buena noticia es que ha configurado e ingresado una clave API correctamente y debe remediar un solo detalle. Vaya a la página de credencial y haga clic en la tecla API para editarla. En la sección Restricciones de aplicaciones, seleccione “Referencias HTTP (Sitios web)”. Luego complete las restricciones del sitio, 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 entre en vigor.
Es importante agregar el lado “/*” al final para permitir las solicitudes de API de cualquiera de los subpagones del sitio web, de modo que Google Maps funcione en todas las páginas de su sitio. No funcione si cambia algo en las restricciones clave de API- Espere hasta 5 minutos para que la configuración entre en vigor;
Si todavía hay un error: verifique nuevamente la consola JavaScript para obtener más detalles. Puede ocurrir un error después de resolverlo en el primero;
También puede intentar eliminar el caché de su navegador.

¡Esta es una conclusión! Dicen que si hay un testamento, hay una manera. Acaba de agregar una función de búsqueda de ubicación en su sitio de directorio, y ahora sus usuarios pueden buscar listados de ubicación. Es una característica realmente importante para la mayoría de los directorios. Aunque puede parecer un proceso ligeramente complicado para agregar mapas de Google, vale la pena la sal. 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, porque es una de las piedras básicas del buen tráfico. Como puede ver, puede integrar los mapas de Google en su sitio web sin habilidades de codificación. Si aún no ha decidido qué complemento usar para construir su sitio de directorio, puede considerar HivePress. Le permite crear directorios y grabar 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 que puede encontrar útiles. Además, no dude en verificar nuestros artículos:

Directorios de WordPress gratuitos más populares
Temas principales de WordPress Girers para evitar al construir un sitio de Director de WordPress