Descubre en este tutorial cómo ocultar determinados marcadores de un mapa de Google mostrado mediante 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 para mostrarlo en el frontal siguiendo la documentación del plugin.
Por defecto, el mapa carga todos los puntos de interés que rodean a tu marcador.
En general no suele haber problema, pero ¿qué pasa si no quieres que la competencia de los establecimientos aparezca en el mapa?
Es decir, si estás haciendo una selección de establecimientos en tu web quizás no te interes que al lado del que recomiendas aparezca el resto ¿verdad?
Ahí es donde entra en juego la API de Google Maps.
En este tutorial vamos a ver cómo conseguir que solo se muestren en el mapa los puntos de interés que tú quieras.
Código para ocultar puntos de interés 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 que tienes el mapa mostrando todos los marcadores, sustituye este fragmento de código de Google Maps helper:
Para ver este código y los otros 1719 snippets de esta web,
identifícate o suscríbete aquí.
Con este código estás añadiendo unos estilos personalizados al mapa donde le indicas que los puntos de interés relacionados con turismo y negocios no se muestren.
Pero tu puedes modificarlo por los que a ti te interesen.
Te pongo a continuación todos los puntos de interés que puedes ocultar y cual sería el código que tendrías que usar:
poi> selecciona todos los puntos de interés.poi.attraction> selecciona las atracciones turísticas.poi.business> selecciona negocios.poi.government> selecciona edificios gubernamentales.poi.medical> selecciona servicios de emergencia, incluyendo hospitales, farmacias, policía y otros.poi.park> selecciona parques.poi.place_of_worship> selecciona sitios de culto religioso, incluyendo iglesias, templos, mezquitas y otros.poi.school> selecciona escuelas.poi.sports_complex> selecciona instalaciones deportivas.
Es decir, si lo que quieres es ocultar todos los puntos de interés tendrías que usar: {"featureType":"poi.attraction","stylers":[{"visibility":"off"}]}
Y esto solo es un ejemplo muy concreto de los estilos que puedes cambiar. Además de los puntos de interés, puedes modificar otros marcadores o la paleta de colores. Si te interesa echa un ojo a la documentación de Google.
Conclusiones
Ahora ya sabes cómo ocultar puntos de interés en 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. 😉
