Aplicar estilos de mapa personalizados al campo de mapa

¿Desea ocultar puntos de interés (POI) como restaurantes, tiendas y otros negocios en su campo de mapa para que solo sean visibles sus marcadores personalizados? Google Maps muestra estos POI de forma predeterminada, pero puede personalizar la apariencia del mapa utilizando la función de estilo de mapas basada en la nube de Google Cloud Console.

Este tutorial le muestra cómo crear un estilo de mapa personalizado en Google Cloud Console, configurarlo para ocultar POI y aplicarlo a su campo de mapa de WPForms utilizando un fragmento de código.

---

Crear un estilo de mapa personalizado en Google Cloud Console

Para empezar, abra la Google Cloud Console y seleccione el proyecto donde está configurada su clave de 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í, haga 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 estilos adicionales. 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, busque y haga clic en la categoría Puntos de interés. Esto se expandirá para mostrar una lista de tipos individuales de Puntos de interés (POI), como Emergencia, Entretenimiento, Comida y bebida, Alojamiento, Recreación, Venta minorista y otros.

Para ocultar los POI, haga clic en el icono del ojo en el lado derecho de la pantalla para cada categoría que desee ocultar. Puede ocultar todos los POI a la vez haciendo clic en el icono del ojo junto a la categoría principal Puntos de interés, o puede ocultar selectivamente tipos de POI específicos haciendo clic en el icono del ojo junto a cada categoría individual.

Después de configurar su estilo de mapa, haga clic en Guardar.

Obtener su ID de mapa

Una vez que su estilo se publique, deberá crear un ID de mapa y asociarlo con su estilo para usarlo en WPForms.

Para ello, navegue a la sección Administración de mapas desde 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, haga clic en Guardar para crear el nuevo ID de mapa.

Una vez creado su ID de mapa, desplácese hacia abajo en la página del ID de mapa hasta la sección Estilos de mapa. Haga clic en el icono del lápiz junto al estilo de mapa Predeterminado de Google.

Esto abre una barra lateral donde 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 asegura que el estilo que has configurado se aplicará cada vez que se utilice este ID de mapa.

Finalmente, copia el valor del ID del mapa que se muestra en la página del ID del mapa, ya que necesitarás este ID para integrar el estilo personalizado con WPForms en el siguiente paso.

Aplicar el ID de mapa a su campo de 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 el ID de tu formulario, el ID del campo y el ID del mapa que copiaste.

• En la línea 11, reemplaza 111 con el ID de tu formulario real.
• En la línea 15, reemplaza 222 con el ID de tu campo de mapa real.
• En la línea 19, reemplaza 'your-map-id' con el ID del mapa que copiaste de la Consola de Google Cloud (mantén las comillas alrededor).

Después de guardar el fragmento de código con tus valores personalizados, tu campo de mapa utilizará el estilo personalizado de la Consola de Google Cloud. El mapa mostrará solo tus marcadores personalizados sin ningún punto de interés, lo que te dará una vista limpia y enfocada 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 obtener más formas de personalizar tus formularios, consulta nuestra guía sobre cómo personalizar WPForms con código.