• Saltar a la navegación principal
  • Saltar al contenido principal
Código Genesis

Código Genesis

Tutoriales de WordPress y Genesis Framework

  • Empieza aquí
  • Cuenta
    • Suscripción
    • Perfil
    • Actualizar tarjeta
    • Favoritos
    • Salir
  • Suscribirse
  • Acceder

Ocultar algunos puntos de interés de Google Maps en Advanced Custom Fields

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.

Mapa Google creado con ACF por defecto

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?

Mapa de Google creado con ACF eliminando algunos puntos de interés.

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 1803 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. 😉

Advanced Custom Fields Javascript

Nahuai Badiola

Desarrollador web especializado en WordPress y Genesis Framework. CEO de Código Genesis y cofundador de OsomPress (temas y plugins para WordPress).

Para dejar dudas o preguntas sobre este código, puedes login o suscribirte.

  • Empieza aquí
  • Sobre Código Genesis
  • Preguntas frecuentes
  • Contacto

Aviso legal · Política de privacidad · Política de cookies · Condiciones de contratación
Copyright © 2023 · Código Genesis

¿Has olvidado tu contraseña?