Descubre en este tutorial cómo mostrar en un mapa los usuarios de WordPress.
Si tienes una comunidad de usuarios y quieres reflejar, por ejemplo, lo repartidos por el mundo que se encuentran (o lo contrario), mostrar «pins» con su ubicación en un mapa puede ser una forma muy visual de hacerlo.
Este sería el resultado final.
¿Te parece interesante? Vamos a ver cómo conseguirlo.
Pasos para mostrar la ubicación de los usuarios en un mapa
1. Añade la funcionalidad
Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidad:
Para ver este código y los otros 2107 snippets de esta web,
identifícate o suscríbete aquí.
Con este código consigues varias cosas:
- Añadir un campo de ubicación al perfil de usuario.
- Extraer la latitud y longitud de la ciudad con la API de Nominatim.
- Guardar la localización del usuario (ciudad, latitud y longitud).
- Obtener la latitud y longitud de los usuarios para mostrarlos en el mapa.
- Cargar los archivos necesarios de la librería de Leaflet (que utilizar los datos de OpenStreetMap).
En este ejemplo usamos la librería de Leaflet ya que nos ahorra tener que obtener una clave API, pero también se podría usar la misma estrategia para mostrarlo en Google Maps.
2. Introducir la localización de los usuarios
Ahora aparecerá un nuevo apartado en el perfil de los usuarios donde podrán introducir la ciudad o pueblo donde se encuentran.
3. Introduce el mapa
Por último, una vez añadidas las ubicaciones de los usuarios, solo te queda añadir el mapa allí donde quieras mostrarlo. Para ello, introduce un bloque de HTML y pega lo siguiente:
Para ver este código y los otros 2107 snippets de esta web,
identifícate o suscríbete aquí.
En este caso se verá algo así:
Pero puedes personalizar el diseño a tu gusto.
También puedes modificar el código del paso 1 para que la librería de Leaflet solo se cargue en la página que usas el mapa. O hacer que se cargue directamente en el bloque que añades el mapa.
Conclusiones
Ahora ya sabes cómo mostrar un mapa que muestre las ubicaciones de los usuarios de tu instalación de WordPress.
Además, esto es solo un ejemplo que puedes personalizar a tu gusto.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
