Descubre en este tutorial cómo mostrar la dirección de una localización en el mapa de Google cuando usas Advanced Custom Fields (ACF).
Si estás creando algún tipo de directorio de establecimientos o similar, uno de los campos más interesantes de Advanced Custom Fields es el de Google Maps, ya que te permite introducir la dirección del establecimiento desde el backend y para luego mostrarlo en el frontal siguiendo la documentación del plugin.
En tutoriales anteriores te expliqué cómo puedes personalizar los tipos de marcadores e incluso colores de un mapa gracias a la API de Google o cómo usar un icono de localización personalizado.
En este caso vamos a ver cómo enseñar la dirección del establecimiento justo debajo del mapa.
Lo mejor de todo es que no tienes que añadirla tú (o tu cliente) de forma manual, sino que la obtiene directamente del establecimiento que hayas introducido en el campo de Google Maps de ACF.
Vamos a ver cómo conseguirlo.
Código para mostrar la dirección de un establecimiento añadido al campo de Google Maps en Advanced Custom Fields
En este caso, antes de aplicar el tutorial:
Si quieres que prepare un tutorial explicándote como llevar a cabo esos pasos previos solo tienes que pedírmelo desde el formulario de contacto. Ya sabes, ventajas de suscriptor. 😉
En el campo de Google Maps de ACF puedes introducir directamente el nombre del establecimiento:
Una vez que ya tengas el mapa, añade este fragmento justo después:
Para ver este código y los otros 1867 snippets de esta web,
identifícate o suscríbete aquí.
Con este código estás añadiendo una línea con la dirección debajo del mapa.
En el ejemplo, se muestra:
- Nombre de la calle
- Número de la calle
- Ciudad
- Provincia
- Código postal
- País
Pero puedes modificar el array para que se muestren solo los elementos que te interesen y en el orden que elijas.
También puedes añadir una clase de CSS al párrafo (o usar otra etiqueta HTML) para darle un estilo personalizado.
Como siempre esto es solo un ejemplo para que lo puedas aplicar con tus propias personalizaciones.
Conclusiones
Ahora ya sabes cómo mostrar la dirección de un establecimiento en el mapa de Google cuando estás usando Advanced Custom Fields.
Además, esto es solo un ejemplo de todas las personalizaciones que puedes hacer gracias a la API de Google Maps y su integración con Advanced Custom Fields.
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. 😉
