Application des styles de carte personnalisés au champ Carte

Souhaitez-vous masquer les points d'intérêt (POI) tels que les restaurants, les magasins et autres entreprises sur votre champ Carte afin que seuls vos marqueurs personnalisés soient visibles ? Google Maps affiche ces POI par défaut, mais vous pouvez personnaliser l'apparence de la carte à l'aide de la fonctionnalité de style de carte basée sur le cloud de Google Cloud Console.

Ce tutoriel vous montre comment créer un style de carte personnalisé dans Google Cloud Console, le configurer pour masquer les POI et l'appliquer à votre champ Carte WPForms à l'aide d'un extrait de code.

---

Création d'un style de carte personnalisé dans Google Cloud Console

Pour commencer, ouvrez la Google Cloud Console et sélectionnez le projet pour lequel votre clé API Google Places est configurée. Ensuite, cliquez sur Styles de carte dans la barre latérale gauche ou accédez directement à Styles de carte.

Une fois sur place, cliquez sur le bouton Créer un style de carte pour commencer un nouveau style de carte.

Ensuite, dans la fenêtre modale qui apparaît, sélectionnez un mode pour votre carte en choisissant Clair ou Sombre. Si vous le souhaitez, vous pouvez également sélectionner un thème facultatif tel que Monochrome pour appliquer un style supplémentaire. Une fois vos sélections effectuées, cliquez sur le bouton Personnaliser pour ouvrir l'éditeur de style.

Une fois l'éditeur de style ouvert, recherchez et cliquez sur la catégorie Points d'intérêt. Cela se développe pour révéler une liste de types de points d'intérêt (POI) individuels, tels que Urgence, Divertissement, Nourriture et boisson, Hébergement, Loisirs, Vente au détail, et autres.

Pour masquer les POI, cliquez sur l'icône en forme d'œil sur le côté droit de l'écran pour chaque catégorie que vous souhaitez masquer. Vous pouvez masquer tous les POI en même temps en cliquant sur l'icône en forme d'œil à côté de la catégorie principale Points d'intérêt, ou vous pouvez masquer sélectivement des types de POI spécifiques en cliquant sur l'icône en forme d'œil à côté de chaque catégorie individuelle.

Après avoir configuré votre style de carte, cliquez sur Enregistrer.

Obtention de votre ID de carte

Une fois votre style publié, vous devrez créer un ID de carte et l'associer à votre style pour l'utiliser dans WPForms.

Pour ce faire, accédez à la section Gestion des cartes dans la barre latérale gauche et cliquez sur Créer un ID de carte dans votre Google Cloud Console.

Dans la boîte de dialogue qui apparaît, entrez un nom descriptif pour votre ID de carte, sélectionnez JavaScript comme type de carte et choisissez Vector parmi les options disponibles.

Une fois terminé, cliquez sur Enregistrer pour créer le nouvel ID de carte.

Une fois votre ID de carte créé, faites défiler la page ID de carte vers le bas jusqu'à la section Styles de carte. Cliquez sur l'icône en forme de crayon à côté du style de carte Google par défaut.

Cela ouvre une barre latérale où vous devrez sélectionner votre style de carte personnalisé. Dans la barre latérale, recherchez votre style publié dans la section Mes styles et sélectionnez-le.

Ensuite, cliquez sur Terminé pour associer votre style personnalisé à l'ID de carte.

Cela garantit que le style que vous avez configuré sera appliqué chaque fois que cet ID de carte sera utilisé.

Enfin, copiez la valeur ID de carte affichée sur la page ID de carte, car vous aurez besoin de cet ID pour intégrer le style personnalisé à WPForms à l'étape suivante.

Application de l'ID de carte à votre champ Carte

Pour appliquer votre style de carte personnalisé au champ de carte WPForms, utilisez l'extrait de code PHP suivant. Personnalisez-le avec votre ID de formulaire, votre ID de champ et l'ID de carte que vous avez copié.

• À la ligne 11, remplacez 111 par l'ID de votre formulaire réel
• À la ligne 15, remplacez 222 par l'ID de votre champ de carte réel
• À la ligne 19, remplacez 'your-map-id' par l'ID de carte que vous avez copié de la console Google Cloud (gardez les guillemets autour)

Après avoir enregistré l'extrait de code avec vos valeurs personnalisées, votre champ de carte utilisera le style personnalisé de la console Google Cloud. La carte affichera uniquement vos marqueurs personnalisés sans aucun point d'intérêt, vous offrant une vue claire et ciblée de vos emplacements.

C'est tout ! Vous pouvez maintenant masquer les points d'intérêt sur votre champ de carte et afficher uniquement vos marqueurs personnalisés. Pour plus de façons de personnaliser vos formulaires, consultez notre guide sur la personnalisation de WPForms avec du code.