Resumen de la IA
¿Desea ocultar puntos de interés (PDI) como restaurantes, tiendas y otros negocios en su campo de mapa para que solo sean visibles sus marcadores personalizados? Google Maps muestra estos PDI de forma predeterminada, pero puede personalizar el aspecto del mapa utilizando la función de estilo de mapas basada en la nube de Google Cloud Console.
Este tutorial te muestra cómo crear un estilo de mapa personalizado en Google Cloud Console, configurarlo para ocultar los puntos de interés (POI) y aplicarlo a tu campo de mapa WPForms utilizando un fragmento de código.
Creación de un estilo de mapa personalizado en Google Cloud Console
Para empezar, abra Google Cloud Console y seleccione el proyecto en el que está configurada su clave API de Google Places. A continuación, haga clic en «Estilos de mapa » en la barra lateral izquierda o vaya directamente a «Estilos de mapa».
Una vez allí, haz clic en el botón Crear estilo de mapa para comenzar un nuevo estilo de mapa.
A continuación, en la ventana modal que aparece, seleccione un modo para su mapa eligiendo entre Claro u Oscuro. Si lo desea, también puede seleccionar un tema opcional, como Monocromo, para aplicar un estilo adicional. Una vez que haya realizado sus selecciones, haga clic en el botón Personalizar para abrir el editor de estilos.
Una vez abierto el editor de estilos, busca y haz clic en la categoría Puntos de interés. Se expandirá para mostrar una lista de tipos de puntos de interés (PDI) individuales, como Emergencias, Entretenimiento, Comida y bebida, Alojamiento, Ocio, Tiendas y otros.
Para ocultar los PDI, haz clic en el icono del ojo situado en la parte derecha de la pantalla para cada categoría que desees ocultar. Puedes ocultar todos los PDI a la vez haciendo clic en el icono del ojo situado junto a la categoría principal Puntos de interés, o puedes ocultar de forma selectiva tipos de PDI específicos haciendo clic en el icono del ojo situado junto a cada categoría individual.
Después de configurar el estilo del mapa, haz clic en Guardar.
Obtener su ID de mapa
Una vez publicado tu estilo, tendrás que crear un ID de mapa y asociarlo a tu estilo para poder utilizarlo en WPForms.
Para ello, vaya a la sección Gestión de mapas en la barra lateral izquierda y haga clic en Crear ID de mapa en su Google Cloud Console.
En el cuadro de diálogo que aparece, introduzca un nombre descriptivo para su ID de mapa, seleccione JavaScript como tipo de mapa y elija Vector entre las opciones disponibles.
Una vez hecho esto, haz clic en Guardar para crear el nuevo ID del mapa.
Una vez creado tu ID de mapa, desplázate hacia abajo en la página ID de mapa hasta la sección Estilos de mapa. Haz clic en el icono del lápiz situado junto al estilo de mapa predeterminado de Google.
Esto abre una barra lateral en la que deberá seleccionar su estilo de mapa personalizado. En la barra lateral, busque su estilo publicado en la sección Mis estilos y selecciónelo.
A continuación, haz clic en «Hecho» para asociar tu estilo personalizado con el ID del mapa.
Esto garantiza que el estilo que ha configurado se aplicará siempre que se utilice este ID de mapa.
Por último, copia el valor del ID del mapa que aparece en la página ID del mapa, ya que necesitarás este ID para integrar el estilo personalizado con WPForms en el siguiente paso.
Aplicar el ID del mapa al campo del mapa
Para aplicar tu estilo de mapa personalizado al campo de mapa de WPForms, utiliza el siguiente fragmento de código PHP. Personalízalo con tu ID de formulario, ID de campo y el ID de mapa que has copiado.
- En línea 11reemplazar
111con tu ID de formulario real - En línea 15reemplazar
222con su ID de campo de mapa real - En línea 19reemplazar
'your-map-id'con el ID del mapa que copiaste de Google Cloud Console (mantén las comillas a su alrededor)
Después de guardar el fragmento de código con tus valores personalizados, tu campo de mapa utilizará el estilo personalizado de Google Cloud Console. El mapa mostrará solo tus marcadores personalizados sin ningún punto de interés, lo que te proporcionará una vista clara y centrada de tus ubicaciones.
¡Eso es todo! Ahora puedes ocultar los puntos de interés en tu campo de mapa y mostrar solo tus marcadores personalizados. Para conocer más formas de personalizar tus formularios, consulta nuestra guía sobre cómo personalizar WPForms con código.