Descubre en este tutorial cómo puedes cambiar el icono que muestra la localización de un 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.
Por defecto, el mapa muestra el típico marcador de localización, pero ¿qué pasa si quieres personalizarlo?
En un tutorial anterior te expliqué cómo puedes personalizar los tipos de marcadores e incluso colores de un mapa gracias a la API de Google.
En este caso vamos a usarla para modificar el icono que muestra la localización.
Vamos allá.
Código para personalizar el icono de Google Maps en un mapa creado con Advanced Custom Fields
En este caso, antes de aplicar el tutorial:
- Tienes que obtener una clave API de Google.
- Debes crear un mapa siguiendo los pasos de la documentación de ACF.
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. 😉
Una vez ya tengas el mapa mostrando todos los marcadores, sustituye este fragmento de código del Google Maps helper:
Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.
Con este código estás añadiendo un nuevo parámetro donde le indicas que tome el icono de la URL que te interese.
En el ejemplo, le estás diciendo que tome el icono de: https://tuweb.com/wp-content/uploads/2021/05/icono-google-maps.png (ejemplo de imagen alojada en la biblioteca de medios de WordPress). Así que solo tienes que cambiar esa URL por donde hayas colocado tu nuevo icono.
Conclusiones
Ahora ya sabes cómo personalizar el icono del marcador de un 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. 😉
